我正在使用 jQuery 进行图像预览。但是我无法发布预览后单击的数据。我怎样才能使它成为现实？

Posted 2023-05-09

【中文标题】我正在使用 jQuery 进行图像预览。但是我无法发布预览后单击的数据。我怎样才能使它成为现实？

【英文标题】：I'm doing an image preview with jQuery. But I cannot post the data I clicked after preview. How Can I Make It Real?

【发布时间】：2021-04-03 12:29:27

【问题描述】：

$(document).ready(function () 
 //Define an array
 var fileCollection = new Array();

 $('#file').on('change', function (e) 
     var files = e.target.files;
     $.each(files, function (i, file) 

         fileCollection.push(file);//I'm adding the previewed pictures into the series.

         var reader = new FileReader();
         reader.readAsDataURL(file);
         reader.onload = function (e) 
             var template = '<li>' +
                 '<img src="' + e.target.result + '"  > ' +
                 '<label>' + file.name + file.size + '</label> <input type="text" name="title">' +
                 ' <button class="btn btn-sm btn-info upload">Yükle</button>' +
                 ' <a href="#" class="btn btn-sm btn-danger remove">Sil</a>' +
                 '</li>';
             $("#prewiew").append(template);
             $("#file").val('');
         
     );
 ); 

如何获取我添加的带有上传类名称的图像数据并发布？ 我希望用户在预览后通过单击上传按钮将数据提交到数据库。 我想在不使用表单标签的情况下提交，这可能吗？因为使用表单标签，我将发布大量带有图像的数据。 这就是为什么我只想动态发送预览部分的图片？

$(document).on("click", ".upload", function () 
/* I want to submit without using a form tag, is this possible? Because using a form tag I will post a lot of data with an image.
 * That's why I want to dynamically send only the pictures in the preview section.   */

    //If the user clicks the upload button, I want to send the values in the array. But I'm having trouble. Do you have any ideas?

    $.ajax(
        url: '/Home/ImagePost/',
        type: 'POST',
        data: fileCollection, //I cannot send the defined array and its values.
        contentType: false,
        processData: false,
        success: function () 
        ,
    );
);

$(document).on("click", ".remove", function () 
    var removeDelete = $(this).closest("li");
    removeDelete.remove();
);

【问题讨论】：

是的，有可能。不确定您的示例中的 values 可能是什么，但在成功函数引用之后似乎存在带有逗号的语法错误。检查浏览器控制台选项卡以确保没有错误。此外，那里还有一个网络选项卡，您可以在其中查看 XHR 请求。

【参考方案1】：

是的，您可以使用以下代码仅发送图片

 var pictureData = new FormData(document.getElementById("yourFileID"));
 pictureData.append("label", "myPicture"); //this is to identify on server
 $.ajax(
     url: "/Home/ImagePost/",
     type: "POST",
     data: pictureData,
     processData: false,
     contentType: false,
     success: function () 
     
 )