私はhtml5で非常に簡単な画像アップローダーを作ろうとしています。html5画像アップロード
<input type="file" multiple=""/>
私がしたいことは、PhPなどを使用せずにアップロードされたものを表示することです。これに似たコードを使用できますか?
<img src="WHATEVER WAS UPLOADED"/>
ありがとうございます!
私はhtml5で非常に簡単な画像アップローダーを作ろうとしています。html5画像アップロード
<input type="file" multiple=""/>
私がしたいことは、PhPなどを使用せずにアップロードされたものを表示することです。これに似たコードを使用できますか?
<img src="WHATEVER WAS UPLOADED"/>
ありがとうございます!
HTML5ファイルApiでこれをアーカイブすることができます。チュートリアル後
あなたが始める必要があります。Reading local files in JavaScript
ローカルファイルを読むチュートリアルIEのために働かないfilereaderを使用します。 –
を私は
http://www.html5rocks.com/en/tutorials/file/dndfiles/
がかなり役に立ちました。
あなたは(私はあなたの質問からこれを仮定)、いくつかのサーバーに画像をプッシュしたいいけない場合、あなただけのローカル画像を更新することができます。
<style>
.thumb {
height: 75px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
</style>
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result,
'" title="', escape(theFile.name), '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
またはsomesuchを。
これを修正して、単一の画像のみを受け入れる(つまり、複数の画像ではない)ようにして、ループ処理を取り除くことができますか?それは、他のブラウザ[check here](http://caniuse.com/filereader)でも機能しますか? 'files'はいくつかの場所で使われています。私はそれが変数' files'やid'files'や名前 'files'を参照しているかどうかはわかりませんので、私はその変更を行うことができませんでした。 – user1063287
これは1つの画像のアップロードとプレビューで動作し、上記のコードに基づいていますhttp://jsfiddle.net/rwone/4n8HW/ – user1063287
詳しい説明とより多くのコードは、このリンクから見つけることができます:https:// www。 html5rocks.com/en/tutorials/file/dndfiles/ – domdambrogia
可能な複製:http://stackoverflow.com/questions/5256620/can-i-preview-the-image-file-who-uploaded-by-user-in-the-browser –