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">但它与控制台日志记录的更改事件不同。这种方法是否正确？的的jsfiddle： https://jsfiddle.net/eLss3ojx/8/

Answer 1

尝试使用具有User.where(id: [1,2,3]).pluck(:address)属性集的单个input type="file"元素，循环选定的multiple对象，为所选用户{{}中的每个files附加img元素1}}对象

file

files

单击按钮显示上传的图像

1 个答案: