Loading / forming an AJAX file without jquery or iframes?

Is it possible to submit an AJAX form without jQuery or IFrames (so it's just pure JavaScript)? I am currently sending a struts fileUploadAction file that works. Will the action code still work with the asynchronous view, or are there any add-ons needed to submit the async form?

I am using struts 1.x and my current form is:

<html:form action="fileUploadAction" method="post" enctype="multipart/form-data"> ...form elements... <html:file property="theFile" /> ...other elements... </html:form> 

Is it possible to submit this form, and thus the file uploaded using AJAX?

+6
source share
3 answers

If you understand correctly, you can use the following code to download the async file. Change 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 load a form, use the FormData class, fill it with the values โ€‹โ€‹of the form, and publish it using XHR.

Update: For HTML4, try the following

+9
source

http://fineuploader.com/ - ajax downloader.

This plugin uses XHR to download multiple progress bar files in FF3.6 +, Safari4 +, Chrome, and returns to iframe-based covert downloads in other browsers, providing a good user experience around the world.

+3
source

No need to add jquery or any other third-party library, just add the IPerfect JS library and you're good to go.

IP_uploadFile (URL, responseType, this is [object], [dynamicFunctionForResponse])

if the user selects responseType as 'html', then dynamicFunctionForResponse will receive an HTML response. In the example below, you will get the answer "done" in the warning.

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

  move_uploaded_file($_FILES['file1']['tmp_name'], realpath("./")."/upload/".$_FILES["file1"]["name"]); echo "done"; 
-3
source

Source: https://habr.com/ru/post/920598/


All Articles