Carica più immagini con anteprima

Question

Ho un campo di caricamento file che accetta più immagini. Ho bisogno di visualizzare l'anteprima di queste immagini prima di caricarle. Posso anche impostare il limite per il numero massimo di immagini da caricare?

Answer 1

Got la soluzione dei tutorial qui: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Answer 2

È possibile utilizzare alcuni plugin per il caricamento di file, che supporta tali funzioni. Ho usato questo: http://blueimp.github.io/jQuery-File-Upload/

Tuttavia, questa funzione non è supportata da IE9 e inferiore.

Answer 3

Si può provare Ajax Uploader di albanx.

Ha un'anteprima dell'immagine. Le miniature di piccole immagini vengono visualizzate nell'elenco di caricamento. L'utente può rimuoverli se lo desidera. È puro JavaScript e non richiede alcun flash.

garantita here

Answer 4

provare questo. 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> 

uso di questo codice per più caricamento delle immagini e anteprima con testo .....