我正在为每个带有 jQuery 预览的图像添加一个按钮。如何操作按钮？

Question

我可以毫无问题地预览许多图像。但是我不知道如何获取在上传部分单击的图像的值并使用 ajax?

发送

HTML:

<div>
  <input type="file" name="file[]" id="images" multiple />
</div>
    
<ul id="prewiew">
    
</ul>

JavaScript:

$(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 () {

      },

    });

  });

总结：我正在预览多张图片。我想按上传按钮发送预览图片。

Answer 1

缺少的部分是发送图像文件时需要的 file 对象。

如果您使用全局引用维护文件数组，那么在发送时您将可以访问必要的文件对象。

唯一需要做的就是将按钮与其对应的 file 对象相关联。

// CHANGE: declare `files` as a global here:
let files;
// end CHANGE

$(document).ready(function () {
  
   $('#images').on('change', function (e) { 

       //It prints the added pictures one by one on the page with a loop.
       files = e.target.files;
               
        $.each(files, function (i, file) {        
                 
           var reader = new FileReader();
           reader.readAsDataURL(file);
           reader.onload = function (e) {
                        
           // CHANGE: add a `data-fileindex` attribute to the button
           // to associate button with its file object
           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"' +
           '   data-fileindex="' + i + '">' +
           'Yükle</button>' +           
           '</li>';
           // end CHANGE

           $("#prewiew").append(template);
           $("#resim").val('');
        }

      });
              
 });

然后点击处理程序可以访问适当的 file 对象：

document.onclick = function (evt) {
  const button = evt.target;
  const iFile = Number(button.dataset.fileindex);
  const file = files[iFile];

  // using `file`, perform POST below
};

有关如何使用 ajax 上传文件的详细信息，请参阅现有 How can I upload files asynchronously?

我正在为每个带有 jQuery 预览的图像添加一个按钮。如何操作按钮？

I am adding a button to each image with jQuery preview. How can I operate the buttons?

javascript

ajax

jquery

jquery-plugins

jquery-file-upload