Przesyłanie wielu zdjęć z podglądem

Question

Mam pole przesyłania plików, które akceptuje wiele obrazów. Muszę wyświetlić podgląd tych zdjęć przed ich przesłaniem. Czy mogę ustawić limit maksymalnej liczby zdjęć do przesłania?

Answer 1

Got rozwiązanie stąd tutoriale: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Answer 2

Możesz użyć niektórych wtyczek do przesyłania plików, które obsługuje takie funkcje. Użyłem tego: http://blueimp.github.io/jQuery-File-Upload/

Jednak ta funkcja nie jest obsługiwana przez IE9 i niżej.

Answer 3

Możesz spróbować Ajax Uploader przez albanx.

Ma podgląd obrazu. Małe miniatury obrazów są wyświetlane na liście przesyłania. Użytkownik może je usunąć, jeśli chce. Jest to czysty JavaScript i nie wymaga flashowania.

Pobierz here

Answer 4

próbować ten jeden. 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> 

użyj tego kodu do przesyłania wielu obrazów i podglądu z polem tekstowym .....