我想用jQuery异步上传文件。
$（文档）.ready（函数（）{$（“#uploadbutton”）.click（函数（）{var filename=$（“#file”）.val（）；$.ajax美元({类型：“POST”，url:“addFile.do”，enctype:'多部分/表单数据'，数据：{文件：文件名},成功：函数（）{alert（“上传的数据：”）；}});});});<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js“></script><span>文件</span><input type=“file”id=“file”name=“file”size=“10”/><input id=“uploadbutton”type=“button”value=“Upload”/>
我只得到文件名，而不是上传文件。我可以做什么来解决这个问题？
当前回答
我找到的一个解决方案是让<form>以隐藏iFrame为目标。iFrame然后可以运行JS向用户显示它已完成（页面加载时）。
其他回答
你可以很容易地用普通JavaScript实现。以下是我当前项目的片段：
var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(e) {
var percent = (e.position/ e.totalSize);
// Render a pretty progress bar
};
xhr.onreadystatechange = function(e) {
if(this.readyState === 4) {
// Handle file upload complete
}
};
xhr.open('POST', '/upload', true);
xhr.setRequestHeader('X-FileName',file.name); // Pass the filename along
xhr.send(file);
您可以使用以下代码。
async: false(true)
这是一个老问题，但仍然没有正确答案，因此：
您尝试过jQuery文件上载吗？
下面是上面链接中的一个示例，可以解决您的问题：
$('#fileupload').fileupload({
add: function (e, data) {
var that = this;
$.getJSON('/example/url', function (result) {
data.formData = result; // e.g. {id: 123}
$.blueimp.fileupload.prototype
.options.add.call(that, e, data);
});
}
});
我过去做过的最简单、最健壮的方法是，简单地将表单中隐藏的iFrame标记作为目标，然后它将在iFrame中提交，而无需重新加载页面。
这是如果你不想使用插件、JavaScript或HTML以外的任何其他形式的“魔法”。当然，您可以将其与JavaScript或其他功能结合起来。。。
<form target="iframe" action="" method="post" enctype="multipart/form-data">
<input name="file" type="file" />
<input type="button" value="Upload" />
</form>
<iframe name="iframe" id="iframe" style="display:none" ></iframe>
您还可以读取iframe onLoad的内容以查找服务器错误或成功响应，然后将其输出给用户。
Chrome、iFrames和onLoad
-注意-如果你对上传/下载时如何设置UI拦截器感兴趣，你只需要继续阅读
当前，当用于传输文件时，Chrome不会触发iframe的onLoad事件。Firefox、IE和Edge都会触发文件传输的onload事件。
我发现唯一适用于Chrome的解决方案是使用cookie。
要基本上在开始上传/下载时做到这一点：
[客户端]开始间隔以查找cookie的存在[服务器端]对文件数据执行任何需要的操作[服务器端]为客户端间隔设置cookie[Client Side]Interval查看cookie并像onLoad事件一样使用它。例如，您可以启动一个UI阻止程序，然后在加载时（或在制作cookie时）删除UI阻止程序。
用饼干做这件事很难看，但它很管用。
我制作了一个jQuery插件来处理Chrome下载时的这个问题，你可以在这里找到
https://github.com/ArtisticPhoenix/jQuery-Plugins/blob/master/iDownloader.js
同样的基本原则也适用于上传。
使用下载器（显然包括JS）
$('body').iDownloader({
"onComplete" : function(){
$('#uiBlocker').css('display', 'none'); //hide ui blocker on complete
}
});
$('somebuttion').click( function(){
$('#uiBlocker').css('display', 'block'); //block the UI
$('body').iDownloader('download', 'htttp://example.com/location/of/download');
});
在服务器端，在传输文件数据之前，创建cookie
setcookie('iDownloader', true, time() + 30, "/");
插件将看到cookie，然后触发onComplete回调。
var formData=new FormData();
formData.append("fieldname","value");
formData.append("image",$('[name="filename"]')[0].files[0]);
$.ajax({
url:"page.php",
data:formData,
type: 'POST',
dataType:"JSON",
cache: false,
contentType: false,
processData: false,
success:function(data){ }
});
您可以使用表单数据发布包括图像在内的所有值。
