jquery - 从 FileReader.result 检索文件对象以作为 ajax 数据发送到服务器

Question

我的问题很简单:

var picReader = new FileReader();
picReader.addEventListener("load",function(event){
    var picFile = event.target;
    // I assign picFile.result to an <img>'s src attribute
    <img class='thumbnail' src='" + picFile.result + "'/>";
}
//Read the image
picReader.readAsDataURL(file);

后来当我无法访问实际的 FileReader 并且只能访问 <img> 时在 jquery 中，如何将此图像(img.src)作为数据发送到服务器。服务器代码位于 ASP.NET MVC 中，并且需要 HttpPostedFileBase Controller 中的对象。

如果我使用“img.src”作为 $.ajax 中的数据，它不会将文件发送为 Request.File ，它将数据附加到请求参数中。

背景

我正在尝试构建一个多图像上传功能，并在 div 中进行预览。用户可以单击按钮从 div 中删除任何选定的图像，但该图像文件无法从文件列表 ( <input type=file> ) 中删除，如 Files对象是只读的。因此，要获得最终的图像列表，我必须依赖 <img>预览 div 内的标签。用户最初可能选择了 5 张图像，这意味着

事件.目标.文件;//FileList对象包含5个文件对象

但在看到预览后，他只想上传其中的 3 个。

Answer 1

你认为这会有帮助吗？

How to send FormData objects with Ajax-requests in jQuery?

基本上将图像转换为 FormData 对象，然后通过 ajax 发送它？