Tải lên nhiều hình ảnh với bản xem trước

Question

Tôi có trường tải lên tệp chấp nhận nhiều hình ảnh. Tôi cần xem trước những hình ảnh này trước khi tải chúng lên. Tôi cũng có thể đặt giới hạn cho số lượng hình ảnh tối đa được tải lên không?

Answer 1

Got giải pháp từ các hướng dẫn ở đây: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Answer 2

Bạn có thể sử dụng một số plugin để tải tệp lên, hỗ trợ các chức năng như vậy. Tôi đã sử dụng cái này: http://blueimp.github.io/jQuery-File-Upload/

Tuy nhiên, tính năng này không được IE9 hỗ trợ và thấp hơn.

Answer 3

Bạn có thể thử Trình tải lên Ajax bởi albanx.

Nó đã có bản xem trước hình ảnh. Hình thu nhỏ hình ảnh nhỏ được hiển thị trong danh sách tải lên. Người dùng có thể xóa họ nếu họ muốn. Đó là JavaScript thuần túy và không yêu cầu bất kỳ flash nào.

Get it here

Answer 4

Hãy thử thế này. http://maraustria.wordpress.com/2014/04/25/multiple-select-and-preview-of-image-of-file-upload/

Html

<label for=”files”>Select multiple files: </label> 
<input id=”files” type=”file” multiple/> 
<output id=”result” /> 

Javascript

window.onload = function(){ 
//Check File API support 
if(window.File && window.FileList && window.FileReader) 
{ 
var filesInput = document.getElementById(“files”); 
filesInput.addEventListener(“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’)) 
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=’” + picFile.name + “‘/>”; 
output.insertBefore(div,null); 
}); 
//Read the image 
picReader.readAsDataURL(file); 
} 
}); 
} 
else 
{ 
console.log(“Your browser does not support File API”); 
} 
} 

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

http://jsfiddle.net/0GiS0/Yvgc2/

Answer 5

window.onload = function() { 
    var fileUpload = document.getElementById("fileupload"); 
    fileUpload.onchange = function() { 
     if (typeof (FileReader) != "undefined") { 
      var dvPreview = document.getElementById("dvPreview"); 
      dvPreview.innerHTML = ""; 
      var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/; 
      for (var i = 0; i < fileUpload.files.length; i++) { 
       var file = fileUpload.files[i]; 
       if (regex.test(file.name.toLowerCase())) { 
        var reader = new FileReader(); 
        reader.onload = function (e) { 
         var img = document.createElement("IMG"); 
         var textbox = document.createElement('input'); 
         textbox.type = 'text'; 
         textbox.name = 'tag_line[]'; 
         textbox.placeholder = 'Enter image tag line'; 
         img.height = "100"; 
         img.width = "100"; 
         img.src = e.target.result; 
         dvPreview.appendChild(img); 
         dvPreview.appendChild(textbox); 
        } 
        reader.readAsDataURL(file); 
       } else { 
        alert(file.name + " is not a valid image file."); 
        dvPreview.innerHTML = ""; 
        return false; 
       } 
      } 
     } else { 
      alert("This browser does not support HTML5 FileReader."); 
     } 
    } 
}; 



<div class="row"> 
<div class="form-group col-sm-6"> 
<input id="fileupload" type="file" multiple="multiple" /> 
<hr /> 
<b>Preview</b><br /> 
</div> 
</div> 
<div id="dvPreview"> 
</div> 

sử dụng mã này để tải lên và xem trước nhiều hình ảnh với hộp văn bản .....