アイデアは、ユーザーのマシンからイメージを取得し、イメージをWebページに表示できるようにすることです。私はイメージをサーバーに送り返したくない。イメージをローカルにWebページに読み込むことは可能ですか?
アップロードボタンが存在します。ページコンテンツを動的に更新するだけです。
これはHTML5ローカルストレージなどで行うことができますか?
アイデアは、ユーザーのマシンからイメージを取得し、イメージをWebページに表示できるようにすることです。私はイメージをサーバーに送り返したくない。イメージをローカルにWebページに読み込むことは可能ですか?
アップロードボタンが存在します。ページコンテンツを動的に更新するだけです。
これはHTML5ローカルストレージなどで行うことができますか?
FileReaderのは、これを行うことが可能です。ここではサンプルコードです:
<input type="file" id="files" name="files[]" multiple />
<img id="image" />
<script>
function onLoad(evt) {
/* do sth with evt.target.result - it image in base64 format ("data:image/jpeg;base64,....") */
localStorage.setItem('image', evt.target.result);
document.getElementById('image').src = evt.target.result;
};
function handleFileUpload(evt) {
var files = evt.target.files; // FileList object
for (var i = 0; i < files.length; i++) {
var f = files[i];
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
reader.onload = onLoad;
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileUpload, false);
var image = localStorage.getItem('image');
if (image !== null) {
document.getElementById('image').src = image;
}
</script>
あなたは最先端のブラウザ(ChromeまたはFirefox)を提供していることを忘れないでください。
FileReader
とreadAsDataURL()
を使用します。このチュートリアルでは第三の例を見てみましょう:
試みは、ユーザーのマシン –
@MuhammadHaseebAsifから画像ファイルのパスと src属性を設定すると、どのようにそのパスを得ることができますか? – haynar