[英]AJAX file upload/form submit without jquery or iframes?
Is it possible to do an AJAX form submit without jQuery or IFrames (so just pure JavaScript)?是否可以在没有 jQuery 或 IFrame(所以只是纯 JavaScript)的情况下提交 AJAX 表单? I'm currently sending to a struts fileUploadAction that works.
我目前正在发送到一个有效的 struts fileUploadAction。 Would the action's code still work with the asynchronous submit, or are there additions required to pick up the async form submit?
该操作的代码是否仍适用于异步提交,或者是否需要添加以获取异步表单提交?
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 的文件?
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,请尝试以下操作
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的上传,从而在各处提供良好的用户体验。
The up-to-date (march 2022), pure js solution, can be found in here .可以在此处找到最新的(2022 年 3 月)纯 js 解决方案。 Summary:
概括:
You can use
fetch
optionally with await-try-catch您可以选择使用
fetch
和 await-try-catchlet photo = document.getElementById("image-file").files[0]; let formData = new FormData(); formData.append("photo", photo); fetch('/upload/image', {method: "POST", body: formData});
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,此[对象],[dynamicFunctionForResponse])
if user select responseType as 'html' then dynamicFunctionForResponse will get response in HTML format. 如果用户选择responseType为'html',那么dynamicFunctionForResponse将以HTML格式获得响应。 In below example you will get 'done' response in alert.
在下面的示例中,您将在警报中获得“完成”响应。
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";
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.