如何运行 jQuery 预览上传按钮？

如何解决如何运行 jQuery 预览上传按钮？

我可以毫无问题地预览许多图像。但是我不知道如何获取上传部分点击的图片的值并用ajax发送？

<div>
    <input type="file" name="file[]" id="images" multiple />
    </div>
    
    <ul id="prewiew">
    
    </ul>
    
    
    $(document).ready(function () {
      
       $('#images').on('change',function (e) { 

           //It prints the added pictures one by one on the page with a loop.
           var files = e.target.files;
                   
            $.each(files,function (i,file) {        
                     
               var reader = new FileReader();
               reader.readAsDataURL(file);
               reader.onload = function (e) {
                            
               var template = '<li>' +
               '<img src="' + e.target.result + '" width="50" height="50"> ' +
               '<label>' + file.name + file.size + '</label> <input type="text" name="title">' +
               ' <button  class="btn btn-sm btn-info upload">Yükle</button>' +           
               '</li>';
    
               $("#prewiew").append(template);
               $("#resim").val('');
            }
    
          });
                  
     });
   

     $(document).on("click",".upload",function () {

         //How can I receive and transfer data when the button is clicked? 

         var file = $(this).closest("img");
         var data= new FormData();     
         data.append("ImageFile",file); 
       
         $.ajax({
             url: '/Home/ImagePost/',type: 'POST',data: data,contentType: false,processData: false,success: function () {
    
             },});
    
     });   

总结：我正在预览多个图像。我想通过按上传按钮发送预览图片。

解决方法

你可以在这里做一个简单的技巧：

1. 隐藏您的输入字段。
2. 向需要动态点击隐藏输入的按钮添加点击事件。

这是工作示例：

$('button').click(function () {
    $('input').click();
    // Your ajax code 
});

input {
    display: block;
    visibility: hidden;
    width: 0;
    height: 0;
}

<script src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<div>
    <img src="anonim.jpg" width="100" height="50" />
    <input type="file" name="somename" size="chars">
    <button>Upload</button>
</div>