我想用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。
其他回答
注意：此答案已过时，现在可以使用XHR上载文件。
不能使用XMLHttpRequest（Ajax）上载文件。可以使用iframe或Flash模拟效果。优秀的jQuery表单插件，通过iframe发布文件以获得效果。
使用HTML5和JavaScript，异步上传非常容易，我创建了上传逻辑和html，这不是完全有效的，因为它需要api，但演示了它是如何工作的，如果你有一个名为/upload的端点从你的网站的根目录，这段代码应该适合你：
const asyncFileUpload=（）=>{const fileInput=document.getElementById（“文件”）；const file=文件输入文件[0]；const-uri=“/upload”；const-xhr=新XMLHttpRequest（）；xhr.upload.onprogress=e=>{常量百分比=e.loaded/e.total；console.log（百分比）；};xhr.onreadystatechange=e=>{如果（xhr.readyState==4&&xhr.status==200）{console.log（“文件已上载”）；}};xhr.open（“POST”，uri，true）；xhr.setRequestHeader（“X-FileName”，文件名）；xhr.send（文件）；}<表单><span>文件</span><input type=“file”id=“file”name=“file”size=“10”/><input onclick=“asyncFileUpload（）”id=“upload”type=“button”value=“upload”/></form>
还有一些关于XMLHttpReques的进一步信息：
XMLHttpRequest对象所有现代浏览器都支持XMLHttpRequest对象。XMLHttpRequest对象可用于与web交换数据幕后服务器。这意味着可以更新而不重新加载整个页面。
创建XMLHttpRequest对象所有现代浏览器（Chrome、Firefox、，IE7+、Edge、Safari、Opera）有一个内置的XMLHttpRequest对象。创建XMLHttpRequest对象的语法：variable=new XMLHttpRequest（）；
跨域访问出于安全原因，现代浏览器不会允许跨域访问。这意味着网页和它试图加载的XML文件，必须位于同一服务器上。W3Schools上的示例都是位于W3Schools中的XML文件领域如果您想在自己的网页上使用上面的示例您加载的XML文件必须位于您自己的服务器上。
有关详细信息，请继续阅读此处。。。
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){ }
});
您可以使用表单数据发布包括图像在内的所有值。
您可以使用以下代码。
async: false(true)
在此处查找“异步处理文件的上载过程”：https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
链接中的示例
<?php
if (isset($_FILES['myFile'])) {
// Example:
move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
exit;
}
?><!DOCTYPE html>
<html>
<head>
<title>dnd binary upload</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function sendFile(file) {
var uri = "/index.php";
var xhr = new XMLHttpRequest();
var fd = new FormData();
xhr.open("POST", uri, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// Handle response.
alert(xhr.responseText); // handle response.
}
};
fd.append('myFile', file);
// Initiate a multipart/form-data upload
xhr.send(fd);
}
window.onload = function() {
var dropzone = document.getElementById("dropzone");
dropzone.ondragover = dropzone.ondragenter = function(event) {
event.stopPropagation();
event.preventDefault();
}
dropzone.ondrop = function(event) {
event.stopPropagation();
event.preventDefault();
var filesArray = event.dataTransfer.files;
for (var i=0; i<filesArray.length; i++) {
sendFile(filesArray[i]);
}
}
}
</script>
</head>
<body>
<div>
<div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div>
</div>
</body>
</html>
