JavaScript 获取上传图片信息并通过 AJAX 传递至后端的方法

获取图片信息并传递后端的需求

项目需求涉及如何通过 JavaScript 获取上传图片的相关信息，包括临时保存路径、文件名称以及文件大小，随后利用 AJAX 将这些信息传递给后端服务器。

提问者使用了 jQuery 框架来处理接收逻辑。

<input name="c_pic" id="c_pic" type="file" class="file">

所采用的具体方法如下所示：

var input = document.getElementById("c_pic");
input.addEventListener('change',readFile,false);
function readFile(){ 
var file = this.files[0]; 
}

提问者希望利用 AJAX 的 POST 方法将上传图片的相关信息发送至后端。此时接收到的 file 变量是一个 object file 类型的对象，问题在于如何将其转换为适合通过 POST 方法传递的数据格式。

针对该问题，一种直观的思路是直接使用 JSON.stringify(file) 将文件对象解析为字符串，代码如下：

var input = document.getElementById("c_pic");
input.addEventListener('change',readFile,false);

function readFile(){ 
var file = this.files[0];
var file_json = JSON.stringify(file);
console.log(file_json); //打印出来是: {}
$.post('',file_json);
}

然而，执行后发现打印结果为空对象 {}。若有人知晓正确处理方式，恳请告知，在此先表示感谢。

因此，换用另一种思路，可以使用 uploadfile 插件或百度的 webuploader。其中，jQuery File Upload 是一个基于 jQuery 的图片上传组件，它支持多文件上传、取消操作、删除功能，提供上传前的缩略图预览、列表显示图片大小以及上传进度条显示，并兼容各种由动态语言开发的服务器端。此外，如果浏览器支持 HTML5，使用 FormData 对象进行 Ajax 上传同样可以实现该功能。

以上内容即为通过 JavaScript 获取上传图片信息（包括临时保存路径、名称、大小）并通过 AJAX 传递给后端的实现方法，希望能对读者有所帮助。