8

Can you submit a form via AJAX that has a file type input? I am trying to use jquery to do this but it appears that it cannot serialize the file being submitted. Is this something that is blocked by the browser as a security concern? Is there a way around it?

1
  • Can you post the html/js you are using ?
    – Khez
    Apr 9, 2011 at 0:36

4 Answers 4

3

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

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

For a discussion on posting with it 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 post that through an ajax call, along with whatever else you need to submit.

If you need to submit multiple files, this may 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, then you can try this plugin, though I have never used it:

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

1
  • The last link is broken Feb 5, 2014 at 15:13
2

I downvoted Scott Harwell without giving a proper explanation of why I downvoted. I downvoted because this CAN 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 the enctype="multipart/form-data"

My jQuery ajax statement is as follows:

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

I use Visual FoxPro as my coding language for this function so I will post my VFP code but you can just adapt this code to which ever coding language you are using:

 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 is receiving the input value as loAttachment (lo stands for Local Object). Then, among other things it is finding if the attachment content length is greater than 0, if it is then it is saving the attachment to a local web directory for later access.

0

Take a look at the AJAX Upload plugin.

1
  • Doesn't this plugin only upload the file? Will it submit the other info in the form? I think that this plugin is to post files, but no other data and I think the asked intends to send other info. Apr 9, 2011 at 1:01
0

The technical answer is no, but there are "hacks" to post your form to a hidden iFrame in order to appear as if it is Ajax. A google search should yield many examples.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.