javascript AJAX 文件上传/表单提交没有 jquery 或 iframes？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11506510/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AJAX file upload/form submit without jquery or iframes?
提问by edwardmlyte
Is it possible to do an AJAX form submit without jQuery or IFrames (so just pure JavaScript)? I'm currently sending to a struts fileUploadAction that works. Would the action's code still work with the asynchronous submit, or are there additions required to pick up the async form submit?
是否可以在没有 jQuery 或 IFrames 的情况下提交 AJAX 表单（所以只是纯 JavaScript）？我目前正在发送到一个有效的 struts fileUploadAction。操作的代码是否仍然适用于异步提交，或者是否需要添加异步表单提交？
I am using struts 1.x and current my form is:
我正在使用 struts 1.x 并且当前我的形式是：
<html:form action="fileUploadAction" method="post" enctype="multipart/form-data">
...form elements...
<html:file property="theFile" />
...other elements...
</html:form>
Can this form be submitted, and thus the file uploaded with AJAX?
可以提交此表单，从而使用 AJAX 上传文件吗？
回答by Madman
If I understood you correct, you can use the following code to upload the file async. Modify it as you like
如果我理解正确，您可以使用以下代码异步上传文件。随意修改
var AjaxFileUploader = function () {
this._file = null;
var self = this;
this.uploadFile = function (uploadUrl, file) {
var xhr = new XMLHttpRequest();
xhr.onprogress = function (e) {
...
};
xhr.onload = function (e) {
...
};
xhr.onerror = function (e) {
...
};
xhr.open("post", uploadUrl, true);
xhr.setRequestHeader("Content-Type", "multipart/form-data");
xhr.setRequestHeader("X-File-Name", file.name);
xhr.setRequestHeader("X-File-Size", file.size);
xhr.setRequestHeader("X-File-Type", file.type);
xhr.send(file);
};
};
AjaxFileUploader.IsAsyncFileUploadSupported = function () {
return typeof (new XMLHttpRequest().upload) !== 'undefined';
}
if (AjaxFileUploader.IsAsyncFileUploadSupported) {
ajaxFileUploader = new AjaxFileUploader();
$("form").submit(function () {
var uploader = $("#fileUploader")[0];
if (uploader.files.length == 0) {
return;
} else {
ajaxFileUploader.uploadFile(
"/YourUploadUrl",
uploader.files[0]);
}
return false;
});
}
To upload the form use the FormData class, populate it with form values and post it with XHR.
要上传表单，请使用 FormData 类，使用表单值填充它并使用 XHR 发布它。
Update:For HTML4 try the following
更新：对于 HTML4，请尝试以下操作
回答by paulslater19
http://fineuploader.com/is a ajax file-uploader.
http://fineuploader.com/是一个 ajax 文件上传器。
This plugin uses XHR for uploading multiple files with progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden iframe based upload in other browsers, providing good user experience everywhere.
该插件使用 XHR 在 FF3.6+、Safari4+、Chrome 中上传带有进度条的多个文件，并在其他浏览器中回退到基于隐藏 iframe 的上传，在任何地方提供良好的用户体验。
回答by Neeraj Dhekale
No need to add jquery or any other third party library, just add IPerfect JS library and you are good to go.
无需添加 jquery 或任何其他第三方库，只需添加 IPerfect JS 库即可。
IP_uploadFile(URL,responseType,this[object],[dynamicFunctionForResponse])
IP_uploadFile(URL,responseType,this[object],[dynamicFunctionForResponse])
if user select responseType as 'html' then dynamicFunctionForResponse will get response in HTML format. In below example you will get 'done' response in alert.
如果用户选择 responseType 为 'html'，则 dynamicFunctionForResponse 将获得 HTML 格式的响应。在下面的示例中，您将在警报中获得“完成”响应。
HTML
HTML
<script type="text/javascript" src="http://services.iperfect.net/js/IP_generalLib.js"></script>
<script language='javascript'>
function testResponse(data){
alert(data)
}
</script>
Body
身体
<form method="POST" enctype="multipart/form-data" onsubmit="IP_uploadFile('testupload.php','html',this,testResponse); return false;">
<input type="file" name="file1">
<input type="submit" name="submit1" value="Click here">
</form>
PHP: testupload.php
PHP：testupload.php
move_uploaded_file($_FILES['file1']['tmp_name'], realpath("./")."/upload/".$_FILES["file1"]["name"]);
echo "done";
