本文介绍如何利用 JavaScript 获取上传图片的临时路径、名称及大小，并通过 AJAX 传递给后端。针对直接使用 JSON.stringify 序列化 File 对象返回空对象的问题，推荐使用 FormData 进行 Ajax 上传，或借助 jQuery File Upload 等插件实现多文件上传、进度条显示及缩略图预览等功能。
获取图片信息并传递后端的需求
项目需求涉及如何通过 JavaScript 获取上传图片的相关信息，包括临时保存路径、文件名称以及文件大小，随后利用 AJAX 将这些信息传递给后端服务器。
提问者使用了 jQuery 框架来处理接收逻辑。
基于 jQuery 的文件接收实现
<input name="c_pic" id="c_pic" type="file" class="file">所采用的具体方法如下所示：
尝试序列化 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) 将文件对象解析为字符串，代码如下：
使用 FormData 或插件的替代方案
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 传递给后端的实现方法，希望能对读者有所帮助。