如何使用 Jquery 为 fileuplaod 中选择的多个图像提供预览？答案

【问题标题】：How to provide a Preview For Multiple images selected in fileuplaod Using Jquery?如何使用 Jquery 为 fileuplaod 中选择的多个图像提供预览？
【发布时间】：2012-11-20 22:31:01
【问题描述】：

大家好，我有一个文件上传，用户可以在其中选择多个图像，我想在上传之前显示这些选定图像的预览...目前我为单个图像预览管理它我如何为多个图像提供预览选择了

  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">

谁能帮帮我...

【问题讨论】：

标签： jquery

【解决方案1】：

好的，这是really crude implementation

基本思路是，获取 files 数组，循环遍历它，使用 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]);
        }


}

【讨论】：

【解决方案2】：

我有一个解决方案这是链接： http://maraustria.wordpress.com/2014/04/25/multiple-select-and-preview-of-image-of-file-upload/

<!DOCTYPE html>
<html>
<head>
<title>File API – FileReader as Data URL</title>
</head>
<body>
<header>
<h1>File API – FileReader</h1>
</header>
<article>
<label for=”files”>Select multiple files: </label>
<input id=”files” type=”file” multiple/>
<button type=”button” id=”clear”>Clear</button>
<output id=”result” />
</article>
</body>
</html>

Javascript

window.onload = function(){
//Check File API support
if(window.File && window.FileList && window.FileReader)
{
$(‘#files’).live(“change”, function(event) {
var files = event.target.files; //FileList object
var output = document.getElementById(“result”);
for(var i = 0; i< files.length; i++)
{
var file = files[i];
//Only pics
// if(!file.type.match(‘image’))
if(file.type.match(‘image.*’)){
if(this.files[0].size < 2097152){
// continue;
var picReader = new FileReader();
picReader.addEventListener(“load”,function(event){
var picFile = event.target;
var div = document.createElement(“div”);
div.innerHTML = “<img class=’thumbnail’ src='” + picFile.result + “‘” +
“title=’preview image’/>”;
output.insertBefore(div,null);
});
//Read the image
$(‘#clear, #result’).show();
picReader.readAsDataURL(file);
}else{
alert(“Image Size is too big. Minimum size is 2MB.”);
$(this).val(“”);
}
}else{
alert(“You can only upload image file.”);
$(this).val(“”);
}
}

});
}
else
{
console.log(“Your browser does not support File API”);
}
}

$(‘#files’).live(“click”, function() {
$(‘.thumbnail’).parent().remove();
$(‘result’).hide();
$(this).val(“”);
});

$(‘#clear’).live(“click”, function() {
$(‘.thumbnail’).parent().remove();
$(‘#result’).hide();
$(‘#files’).val(“”);
$(this).hide();
});

CSS

body{
font-family: ‘Segoe UI';
font-size: 12pt;
}

header h1{
font-size:12pt;
color: #fff;
background-color: #1BA1E2;
padding: 20px;

}
article
{
width: 80%;
margin:auto;
margin-top:10px;
}

.thumbnail{

height: 100px;
margin: 10px;
float: left;
}
#clear{
display:none;
}
#result {
border: 4px dotted #cccccc;
display: none;
float: right;
margin:0 auto;
width: 511px;
}

http://jsfiddle.net/2xES5/28/

【讨论】：