Przesyłanie wielu plików i używanie czytnika plików do podglądu

Question

<input type='file' name="image" onchange="preview(this);" multiple="multiple" /> 


window.preview = function (input){ 
     if(input.files && input.files[0]) { 

      var reader = new FileReader(); 

      reader.readAsDataURL(input.files[0]); 
      reader.onload = function(e){ 

       $("#previewImg").append("<img src='" + e.target.result +"'>"); 


      } 
     } 
    } 

Mam funkcję wykorzystującą czytnik plików do podglądu obrazu, działa dobrze w jednym pliku.

Jednak staram się osiągnąć wiele plików.

Moje pytanie brzmi, jak uzyskać pliki wejściowe tablicę, pliki pętli poprzez czytnik plików i dołączyć img

Answer 1

Użycie pojedynczego pliku Prześlij jQuery

JQuery File Input Image Preview Before It Is Uploaded

<form id="form1" runat="server"> 
    <input type='file' id="inputFile" /> 
    <img id="image_upload_preview" src="http://placehold.it/100x100" alt="your image" /> 
</form> 

jQuery

function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 
     reader.onload = function (e) { 
      $('#image_upload_preview').attr('src', e.target.result); 
     } 
     reader.readAsDataURL(input.files[0]); 
    } 
} 

$("#inputFile").change(function() { 
    readURL(this); 
}); 

File API - FileReader Czysta JavaScriptFiddle DEMO

<input id="files" type="file" multiple="multiple" /> 
<output id="result" /> 

Czysta JavaScript

function handleFileSelect() { 
    //Check File API support 
    if (window.File && window.FileList && window.FileReader) { 

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

document.getElementById('files').addEventListener('change', handleFileSelect, false); 

Answer 2

Working Fiddle
JavaScript

function handleFileSelect(evt) { 
    var files = evt.target.files; // FileList object 

    // Loop through the FileList and render image files as thumbnails. 
    for (var i = 0, f; f = files[i]; i++) { 

     // Only process image files. 
     if (!f.type.match('image.*')) { 
      continue; 
     } 

     var reader = new FileReader(); 

     // Closure to capture the file information. 
     reader.onload = (function (theFile) { 
      return function (e) { 
       // Render thumbnail. 
       var span = document.createElement('span'); 
       span.innerHTML = ['<img class="thumb" src="', e.target.result, 
        '" title="', escape(theFile.name), '"/>'].join(''); 
       document.getElementById('previewImg').insertBefore(span, null); 
      }; 
     })(f); 

     // Read in the image file as a data URL. 
     reader.readAsDataURL(f); 
    } 
} 

document.getElementById('files').addEventListener('change', handleFileSelect, false); 

Więcej szczegółów na temat Files API i pomoc odniesienia dla tej odpowiedzi ...

---

przy użyciu koduWorking Fiddle
HTML

<input type='file' name="image" onchange="preview(this);" multiple="multiple" /> 
<div id='previewImg'></div> 

JavaScript

window.preview = function (input) { 
    if (input.files && input.files[0]) { 
     $(input.files).each(function() { 
      var reader = new FileReader(); 
      reader.readAsDataURL(this); 
      reader.onload = function (e) { 
       $("#previewImg").append("<img class='thumb' src='" + e.target.result + "'>"); 
      } 
     }); 
    } 
} 

Answer 3

muliple pliku podglądu przy użyciu jQuery i DataURL

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 

<script language="Javascript"> 
$(function() { 
    $("#browse").change(function() { 
     if (typeof (FileReader) != "undefined") { 
      var dvPreview = $("#preview"); 
      dvPreview.html(""); 
      var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/; 
      $($(this)[0].files).each(function() { 
       var file = $(this); 
       if (regex.test(file[0].name.toLowerCase())) { 
        var reader = new FileReader(); 
        reader.onload = function (e) { 
         var img = $("<img />"); 
         img.attr("style", "height:100px;width: 100px"); 
         img.attr("src", e.target.result); 
         dvPreview.append(img); 
        } 
        reader.readAsDataURL(file[0]); 
       } else { 
        alert(file[0].name + " is not a valid image file."); 
        dvPreview.html(""); 
        return false; 
       } 
      }); 
     } else { 
      alert("This browser does not support HTML5 FileReader."); 
     } 
    }); 
}); 


</script> 

</html>