Submitting an HTML form using AJAX that includes file input

Question

Can you submit the form via AJAX with file type input? I am trying to use jquery for this, but it seems that it cannot serialize the transferred file. Is this something that is blocked by the browser as a security issue? Is there any way around this?

Answer 1

You can use the File API , part of HTML5, to do this:

http://www.html5rocks.com/tutorials/file/dndfiles/

To discuss publishing with him, you can start with

http://groups.google.com/group/play-framework/browse_thread/thread/6223a9b25b87a839/6c74eda4f7b33010

Basically, using the File API , javascript can read files from the local system if the browser supports it, and then you can just publish it via an ajax call along with what you need to send.

If you need to send multiple files, this might be a good starting point:

http://robertnyman.com/2010/04/22/using-the-file-api-for-reading-file-information-multiple-file-uploads-another-sister-specification-to-html5/

If you must use jQuery, you can try this plugin, although I never used it:

http://plugins.jquery.com/blueimp-file-upload-jquery-ui/

Answer 2

I stopped Scott Harwell without giving the right explanation why I stopped. I ignored it because it MAY be done, and I do it consistently. My code is as follows:

html tag:

  <form id="inputForm1" method="POST" enctype="multipart/form-data" ACTION=""> <div id="file-attachment"> <div style="float:left;">file:</div> <div id="file-sub" style="float:left;"> <input type="file" id="WebAccessFile" name="WebAccessFile" size="45" value=""> </div> </div> </form> 

the key is enctype="multipart/form-data"

My jQuery ajax statement looks like this:

 $.ajaxFileUpload({url:'/LonApps/FoxWeb.exe/EWI/ewiprocedures?Proc=addrelease', secureuri: false, fileElementId:'WebAccessFile', dataType: 'text' }); 

I use Visual FoxPro as the coding language for this function, so I will post my VFP code, but you can simply adapt this code to which you have ever used the coding language:

  loAttachment = Request.FormFieldObject("WebAccessFile") lcReleaseMessage = loAttachment.FileName lcSaveFile = "" IF loAttachment.ContentLength > 0 lcFileName = loAttachment.FileName lcFileContent = loAttachment.Value() lcSaveFile = "D:\Website\Publish\Depts\EWI\docs\" + lcFileName SET SAFETY OFF STRTOFILE(lcFileContent, lcSaveFile) SET SAFETY ON lcHTTPSaveFile = "/Publish/Depts/EWI/docs/" + lcFileName ENDIF 

This takes an input value as loAttachment (lo stands for local object). Then, among other things, it is found that the length of the contents of the attachment is greater than 0, if this is the case, it saves the attachment in the local web directory for later access.

Answer 3

Take a look at the AJAX download plugin .

Answer 4

The technical answer is no, but there are “hacks” to submit your form to a hidden iFrame to look like it's Ajax. There should be many examples in a google search.