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

Question

$(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 + '" 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>' +
                 ' <a href="#" class="btn btn-sm btn-danger remove">Sil</a>' +
                 '</li>';
             $("#prewiew").append(template);
             $("#file").val('');
         }
     });
 });

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

$(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();
});

Answer 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 () {
     }
 })

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

I'm doing an image preview with jQuery. But I cannot post the data I clicked after preview. How Can I Make It Real?

javascript

jquery

post

jquery-plugins

backend