多个图像上传和预览

我正在学习如何上传多个图像并显示他们的预览……

我遇到了以下代码

   .input-file-row-1:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .input-file-row-1{ display: inline-block; margin-top: 25px; position: relative; } https://stackoverflow.com/questions/20779983/multiple-image-upload-and-preview/#preview_image { display: none; width: 90px; height: 90px; margin: 2px 0px 0px 5px; border-radius: 10px; } .upload-file-container { position: relative; width: 100px; height: 137px; overflow: hidden; background: url('images/picplus.png') top center no-repeat; float: left; margin-left: 23px; } .upload-file-container-text{ font-family: Arial, sans-serif; font-size: 12px; color: https://stackoverflow.com/questions/20779983/multiple-image-upload-and-preview/#719d2b; line-height: 17px; text-align: center; display: block; position: absolute; left: 0; bottom: 0; width: 100px; height: 35px; } .upload-file-container-text > span{ border-bottom: 1px solid https://stackoverflow.com/questions/20779983/multiple-image-upload-and-preview/#719d2b; cursor: pointer; } .one_opacity_0 { opacity: 0; height: 0; width: 1px; float: left; }   function readURL(input,target) { if(input.files && input.files[0]) { var reader=new FileReader(); var image_target=$(target); reader.onload=function(e) { image_target.attr('src',e.target.result).show(); }; reader.readAsDataUrl(input.files[0]); } } $("patient_pic").live("change",function(){ readURL(this,"https://stackoverflow.com/questions/20779983/multiple-image-upload-and-preview/#preview_image") });    
 
 
 
  
 
  
  Add Photo  
 
 
  
  Add Photo  
 
 
 
 
   

我遇到了这个http://jsfiddle.net/dn9Sr/2/ （小提琴），它完美地向我解释。 但作为初学者，我知道它包含一个jquery库，它清楚地显示了Fiddle的框架扩展。 现在我的问题是。 当我在机器上开始编码时，我应该如何包含它。

什么将包含在head（）部分中以致电图书馆……谢谢

Answer 1

我有一个预览多个图像上传的解决方案https://maraustria.wordpress.com/2014/04/25/multiple-select-and-preview-of-image-of-file-upload/

HTML

 
 Select multiple files:   
  

使用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 = “”; 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 2

首先在部分包含Jquery库

然后低于那个

改变你的function而不是live

 $("patient_pic").on("change",function(){ readURL(this,"#preview_image") }); 

jQuery从1.7开始不推荐使用live() ，而是使用on()

Answer 3

它很简单： –