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

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

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

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