2

こんにちは、ユーザーが複数の画像を選択できるファイルアップロードがあります。アップロードする前に、選択した画像のプレビューを表示したいのですが...現在、単一の画像プレビュー用に管理しています。選択した複数の画像のプレビューを提供するにはどうすればよいですか

  function readURL(input) {
    var img = $(input).closest('div').find('img').first();
    var imgid=$(img).attr('id');
    if (input.files && input.files[0]) {
        alert(input.files);
        alert(input.files[0]);
        var reader = new FileReader();

        reader.onload = function (e) {
            $("#"+imgid)
                .attr('src', e.target.result);
        };

        reader.readAsDataURL(input.files[0]);
    }
}

 <input type="file"  accept="gif|jpg|jpeg|png" name="files[]" multiple onchange="readURL(this);" />

                    <img src="http://placehold.it/140x140" class="img-rounded" id="thumbnailimage">

誰でもここで助けてもらえますか...

4

2 に答える 2

12

わかりました、これは本当に大雑把な実装です

基本的な考え方は、ファイル配列を取得し、それをループし、File API を使用して画像を追加することです。ここで、src 値は、ユーザー マシン上のパスではなく、js が使用できる blob です。

var inputLocalFont = document.getElementById("image-input");
inputLocalFont.addEventListener("change",previewImages,false); //bind the function to the input

function previewImages(){
    var fileList = this.files;

    var anyWindow = window.URL || window.webkitURL;

        for(var i = 0; i < fileList.length; i++){
          //get a blob to play with
          var objectUrl = anyWindow.createObjectURL(fileList[i]);
          // for the next line to work, you need something class="preview-area" in your html
          $('.preview-area').append('<img src="' + objectUrl + '" />');
          // get rid of the blob
          window.URL.revokeObjectURL(fileList[i]);
        }


}
于 2012-12-03T13:12:44.907 に答える