1

after trying to get a multiple file selection input working with previews, but then finding out IE doesn't support it, i've changed how i'm going about a multiple file upload.

now I have multiple single file inputs, each with their own 'preview' div. the id of each select and preview div are linked (input select id ="file1", preview div id="previews_file1") etc up to 10.

Im using this code to preview the image selected:

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]);
}
}

with 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;" />

my problem is i cant seem to pass the inputs id over to the function, certainly $(this).id doesn't work. how would i go about putting the preview into the right preview div?

EDIT:

js fiddle: 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" />

江青

$('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 回答