按钮点击显示上传的图片

Question

点击按钮预览我需要上传的图片显示，它的工作正常的脚本改变事件，但不是点击一个。

HTML

<form action="test.php" enctype="multipart/form-data" id="mainform" method="post" name="mainform"> 
Imagine 1:<br> 
<input type="file" name="img1" id="img1"><br> 
    <br><br>  
Imagine 2 :<br> 
<input type="file" name="img2" id="img2"><br> 
    <br> 
Imagine 3 :<br> 
<input type="file" name="img3" id="img3"><br> 
    <br> 
Imagine 4 :<br> 
<input type="file" name="img4" id="img4"><br>  
    <br> 
Imagine 5 :<br> 
<input type="file" name="img5" id="img5"><br> 
    <br> 
Imagine 6 :<br> 
<input type="file" name="img6" id="img6"><br> 
    <br> 
Imagine 7 :<br> 
<input type="file" name="img7" id="img7"><br>  
    <br> 
Imagine 8 :<br> 
<input type="file" name="img8" id="img8"><br>  
    <br> 
Imagine 9 :<br> 
<input type="file" name="img9" id="img9"><br> 
    <br> 
Imagine 10 :<br> 
<input type="file" name="img10" id="img10"><br>  
    <br> 
Imagine 11 :<br> 
<input type="file" name="img11" id="img11"><br> 
    <br> 
Imagine 12 :<br> 
<input type="file" name="img12" id="img12"><br>  
    <br> 
Imagine 13 :<br> 
<input type="file" name="img13" id="img13"><br>  
    <br> 
Imagine 14 :<br> 
<input type="file" name="img14" id="img14"><br>  
    <br> 
Imagine 15 :<br> 
<input type="file" name="img15" id="img15"><br>  
    <br /> 
    Preview: 
    <br /> 
    <input type="checkbox" id="previz" />Preview 
</form> 
<div id="#previzdiv"> 
<img src="" id="preview-img1"> 
<img src="" id="preview-img2"> 
<img src="" id="preview-img3"> 
<img src="" id="preview-img9"> 
<img src="" id="preview-img5"> 
</div> 

的Jquery：

$("#center2 #forme #previz").change(function(){ 
    if(this.checked){ 
     for(i=1;i<15;i++){ 
      j = $("form#mainform #img"+i); 
      console.log(j); 
      readURL(j); 
     } 
    } 
}); 

function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      imgId = '#preview-'+$(input).attr('id'); 
      $(imgId).attr('src', e.target.result); 
     } 

     reader.readAsDataURL(input.files[0]); 
    } 
} 

$("form#mainform input[type='file']").change(function(){ 
    readURL(this); 
    console.log(this); 
}); 

从 “J” 控制台日志应该像<input type="file" name="img1" id="img1">但它不同于什么变化事件控制台logging.Is的方法正确吗？ 的jsfiddle：https://jsfiddle.net/eLss3ojx/8/

Answer 1

尝试利用具有multiple属性集，通过选择files对象环单input type="file"元件，附加img元素内的用户的每个file选择files对象

var previews = $("#previews"); 
 
// append `img` element "preview" of single , multiple 
 
// selected `files` to `#preview` element 
 
$("input[type=file]").on("change", function(e) { 
 
    previews.empty(); 
 
    Array.prototype.slice.call(e.target.files) 
 
    .forEach(function(file, idx) { 
 
     var reader = new FileReader(); 
 
     reader.onload = function(event) { 
 
     $("<span />", { 
 
      "html": "<br />" + file.name 
 
      }).add("<br />") 
 
      .add(
 
      $("<img />", { 
 
       "src": event.target.result, 
 
       "class": idx 
 
      })).appendTo(previews); 
 
     }; 
 
     reader.readAsDataURL(file); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<input type="file" accepts="image/*" multiple="true" /> 
 
<div id="previews"></div>