1

複数のファイルを選択する入力をプレビューで機能させようとしましたが、IEがそれをサポートしていないことがわかったので、複数のファイルをアップロードする方法を変更しました。

これで、複数の単一ファイル入力があり、それぞれに独自の「プレビュー」divがあります。各selectおよびpreviewdivのIDは、最大10までリンクされています（input select id = "file1"、preview div id = "previews_file1"）など。

このコードを使用して、選択した画像をプレビューします。

function readURL(input) {
if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
        var thisid = $(this).id;
        var container = $('#previews_'+ thisid);
        var image = $('<img>').attr('src', e.target.result).css({'max-width':'200px','max-height':'200px'});
        image.appendTo(container);
    };
    reader.readAsDataURL(input.files[0]);
}
}

HTML付き：

    <div id="previews_file1" style="float:left;width:200px;height:200px;"></div>
    <input type='file' id="file1" name="file1" onchange="readURL(this);" style="float:left;" />

私の問題は、入力IDを関数に渡せないようです。確かに、$（this）.idは機能しません。プレビューを適切なプレビューdivに配置するにはどうすればよいですか？

編集：

jsフィドル： http： //jsfiddle.net/KE3tv/

4

1 に答える 1

2

http://jsfiddle.net/KE3tv/1/ 

<input type='file' name="file1" />
<input type='file' name="file2" />
<input type='file' name="file3" />

JQ

$('input[type="file"]').on('change', function(){
    ...
    // name is already a unique attribute, no need for an id
    var container = $('#previews_'+ $(this).attr('name')); 
    ...
});
于 2013-02-10T13:51:27.770 に答える