我想用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”/>
我只得到文件名，而不是上传文件。我可以做什么来解决这个问题？
当前回答
我一直在使用下面的脚本来上传图像，这很好。
HTML
<input id="file" type="file" name="file"/>
<div id="response"></div>
JavaScript
jQuery('document').ready(function(){
var input = document.getElementById("file");
var formdata = false;
if (window.FormData) {
formdata = new FormData();
}
input.addEventListener("change", function (evt) {
var i = 0, len = this.files.length, img, reader, file;
for ( ; i < len; i++ ) {
file = this.files[i];
if (!!file.type.match(/image.*/)) {
if ( window.FileReader ) {
reader = new FileReader();
reader.onloadend = function (e) {
//showUploadedItem(e.target.result, file.fileName);
};
reader.readAsDataURL(file);
}
if (formdata) {
formdata.append("image", file);
formdata.append("extra",'extra-data');
}
if (formdata) {
jQuery('div#response').html('<br /><img src="ajax-loader.gif"/>');
jQuery.ajax({
url: "upload.php",
type: "POST",
data: formdata,
processData: false,
contentType: false,
success: function (res) {
jQuery('div#response').html("Successfully uploaded");
}
});
}
}
else
{
alert('Not a vaild image!');
}
}
}, false);
});
解释
我使用response div显示上传动画和上传完成后的响应。
最好的部分是，当您使用此脚本时，可以随文件发送额外的数据，如id等。我在脚本中提到了额外的数据。
在PHP级别，这将作为正常的文件上传工作。额外数据可以作为$_POST数据检索。
这里你没有使用插件之类的东西。您可以根据需要更改代码。你不是盲目地在这里编码。这是任何jQuery文件上传的核心功能。实际上是Javascript。
其他回答
你也可以考虑使用类似的https://uppy.io.
它可以在不离开页面的情况下进行文件上传，并提供一些奖励，如拖放、在浏览器崩溃/网络不稳定的情况下恢复上传，以及从例如Instagram导入。它是开源的，不依赖于jQuery/React/Angular/Vue，但可以与它一起使用。免责声明：作为它的创建者，我有偏见；）
这个AJAX文件上传jQuery插件在某处上传文件，并传递对回调的响应。
它不依赖于特定的HTML，只需给它一个＜input-type=“file”＞它不要求服务器以任何特定方式响应使用多少文件或文件在页面上的位置无关紧要
--尽可能少地使用--
$('#one-specific-file').ajaxfileupload({
'action': '/upload.php'
});
--或者--
$('input[type="file"]').ajaxfileupload({
'action': '/upload.php',
'params': {
'extra': 'info'
},
'onComplete': function(response) {
console.log('custom handler for file:');
alert(JSON.stringify(response));
},
'onStart': function() {
if(weWantedTo) return false; // cancels upload
},
'onCancel': function() {
console.log('no file selected');
}
});
注意：此答案已过时，现在可以使用XHR上载文件。
不能使用XMLHttpRequest（Ajax）上载文件。可以使用iframe或Flash模拟效果。优秀的jQuery表单插件，通过iframe发布文件以获得效果。
您可以使用以下代码。
async: false(true)
使用|HTML5的readAsDataURL（）或一些base64编码器将文件转换为base64。在这里摆弄
var reader = new FileReader();
reader.onload = function(readerEvt) {
var binaryString = readerEvt.target.result;
document.getElementById("base64textarea").value = btoa(binaryString);
};
reader.readAsBinaryString(file);
然后检索：
window.open("data:application/octet-stream;base64," + base64);
