按鈕點擊顯示上傳的圖片

-1

點擊按鈕預覽我需要上傳的圖片顯示，它的工作正常的腳本改變事件，但不是點擊一個。按鈕點擊顯示上傳的圖片

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/

來源

2015-05-06 Orlando GTh

' ＃center2'，'#forme'元素不會出現在OP的'html'處？從'$（「＃center2 #forme #previz」）中調用'readURL（j）'。change（function（）{}事件處理程序不啓動'input type =「file」元素的'change'事件''elements ？ – guest271314

@ guest271314我沒有包含所有的div，事件正在運行，我無法獲得 on「for」 –

只能用id =「img1」'？另外，嘗試在'var i = 1'處包含'var'？ – guest271314

嘗試利用具有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>

來源

2015-05-06 20:01:28 guest271314

按鈕點擊顯示上傳的圖片

回答

相關問題