如何爲fileuplaod中選擇的多個圖像提供預覽使用Jquery？

大家好我有一個fileuplaod用戶可以選擇多個圖像nad我想要顯示上傳之前所選圖像的預覽...目前我管理它的單個圖像預覽如何提供預覽多個圖像選擇如何爲fileuplaod中選擇的多個圖像提供預覽使用Jquery？

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

任何一個可以幫助在這裏，請...

來源

2012-12-03 SoftwareNerd

好吧，這裏是一個really crude implementation

的基本思路是，得到的文件數組，循環通過它，使用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-03 13:12:44 daveyfaherty

我有一個解決方案這裏的鏈接： 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/

enter image description here

來源

2014-07-22 06:41:51

如何爲fileuplaod中選擇的多個圖像提供預覽使用Jquery？

回答

相關問題