Question

尝试使用预览获得多个文件选择输入后，但发现IE不支持它，我已经改变了我的多文件上传方式。

现在我有多个单个文件输入，每个输入都有自己的'预览'div。每个select和preview div的id被链接（输入select id =“file1”，preview div id =“previews_file1”）等，最多10个。

我使用此代码预览所选图像：

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 fiddle：http://jsfiddle.net/KE3tv/

Answer 1

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')); 
    ...
});

多个文件输入，如何获取每个用于预览的id

1 个答案: