How can I post an image that is uploaded using without using the form's submit button?

Question

This works fine as a normal form:

<form id="frm1" enctype="multipart/form-data" action="form_handler_post.php" method="POST">
    <input type="hidden" name="MAX_FILE_SIZE" value="300000" />     
    Send this file: <input name="userfile" type="file" />
    <input type="text" name="theRefNum" />
    <input type="submit" value="Send File" />
</form>

...but I want to post the contents of the form (i.e. the image) using jQuery, since I have lots of other data that I want to post at the same time and don't want to include it in the same form as the image upload. E.g.

$.post("form_handler_post.php", { name: "John", time: "2pm", otherData: "Friday", image:#######});

I've tried image:userfile, image:'userfile' and image:$('userfile').val() but to no avail.

How do I include the image file in the data section - i.e. how do I access the image's value?

No easy cross-browser way. If you don't need IE <= 9 support, you can use the FormData API with XHR2, else you have to submit to a hidden `iframe` to simulate Ajax. — Fabrício Matté, Mar 15 '13 at 11:41
@Bondye — From the [manual](http://api.jquery.com/serialize/): "Data from file select elements is not serialized" — Quentin, Mar 15 '13 at 11:49

score 0 · Answer 1 · answered Mar 15 '13 at 11:46

0

You can't do it by using normal ajax. You have to use some plugins available. Most of the plugins use iframe in the backend. see this http://jquerybyexample.blogspot.com/2012/08/5-best-jquery-file-upload-plugin.html

answered Mar 15 '13 at 11:46

Samy

632
4
14

No need for a plugin at all. This can be done in [a few small lines of code](http://stackoverflow.com/a/15431670/1317805). – James Donnelly Mar 15 '13 at 11:56
@JamesDonnelly I am accepting your comments. Whatever the code you written below, the same way plugins also doing the work.Why can't we use the available resources.Most of the plugins are tested and used by lot of developers. – Samy Mar 15 '13 at 12:00

score 0 · Answer 2 · answered Mar 15 '13 at 11:48

0

$("input[name='userfile']").on("change", function(){
    readURL($(this).get(0));
})
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('.somepicholder img').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }
}

answered Mar 15 '13 at 11:48

deerua

408
2
9

1

OP wants to post the image, not display it in the same page. – Fabrício Matté Mar 15 '13 at 11:54
What the above code will do ? – Samy Mar 15 '13 at 11:55
read image source from file input and place it in some image using data:base64 – deerua Mar 15 '13 at 11:56

James Donnelly · Answer 3 · 2013-03-15T11:54:00.797

0

You'd need to submit the file to an iframe as you can't submit files through AJAX in jQuery:

$('#frm1 input[type="submit"]').click(function(e) {
    /* Prevent this from submitting the form */
    e.preventDefault();

    /* Create an iframe. */
    var iframeName = "iframe" + (new Date()).getTime(),
        iframe = $('<iframe id="' + iframeName  + '" name="' + iframeName  + '"></iframe>');

    /* Add the iframe to the page and hide it. */
    $(this).append(iframe);
    $(iframe).hide();

    /* Set the form's target to point to the iframe. */
    $(this).attr({
        "action": "mypage.ext",
        "method": "post",
        "enctype": "multipart/form-data",
        "encoding": "multipart/form-data",
        "target": iframeName  
    });

    /* Call the modified form's submit function. */
    $(this).submit();
})

This code creates an iframe on the page and ensures it has a unique ID and name. It then submits the form to the hidden iframe.

You can then use the iframe's onload function to call back to the parent page (provided it's on the same domain). Using something like window.parent.parentFunction("Successfully uploaded!").

edited Mar 15 '13 at 11:54

answered Mar 15 '13 at 11:48

James Donnelly

126,410
34
208
218

This may handle submission, but you forgot to mention that if one wants to use the response data, you will need to put a ` – Fabrício Matté Mar 15 '13 at 11:53
I was editing my answer whilst you were posting this. Also I believe `attr()` is better suited here as it's dealing with strings rather than boolean values. – James Donnelly Mar 15 '13 at 11:54
When you're manipulating the DOM, `.prop()` is better because it sets properties of DOM elements. With `.attr` you're forcing a `.setAttribute()` which in turn will result in updating the property. Not much difference, but prop is a conceptually better way to work as what really matters are the element's properties. – Fabrício Matté Mar 15 '13 at 11:59

How can I post an image that is uploaded using without using the form's submit button?

3 Answers3