File uploader using jquery ajax

Question

I want to upload file using jQuery, but I am getting an exception saying undefined is not a function at $('#myFile').ajaxForm({

HTML

<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="jquery-1.11.1.min.js"></script>
<script src="x.js"></script>
</head>
<body>
    <form enctype="multipart/form-data" action="/FileUploadUI5/upload"
        method="POST" id="myFile">
        <input type=file name=upfile><br> <input type="submit"
            name="Upload" value="Upload" id="ubutton" />
    </form>
</body>
</html>

X.js

$(document).ready(function() {
    $(function() {
        $('#myFile').ajaxForm({
            beforeSend : function() {
            },
            uploadProgress : function(event, position, total, percentComplete) {
                alert(position + "|" + total + "|" + percentComplete);
            },
            complete : function(xhr) {
                // status.html(xhr.responseText);
            }
        });
    });

    $('#ubutton').click(function(e) {
        $('#myFile').submit();
    });

});

I have included jquery nd in console i printed jQuery.fn.jquery; and result is "1.11.1" ... so i think it is correctly included — Arvind, May 29 '14 at 17:49
Also, you don't need ` $('#ubutton').click(...` as '#ubutton' is already a submit button inside '#myFile' form. And, why do you have an empty beforeSend function? — Debanshu Kundu, May 29 '14 at 17:50
yes X.js is jqiery file ... which i have downloaded from https://code.jquery.com/jquery-1.11.1.min.js — Arvind, May 29 '14 at 17:51
You also need to download and include the jquery form plugin from here http://malsup.com/jquery/form/ — Debanshu Kundu, May 29 '14 at 17:53
My requirement like like on click of button I need to upload. I do not wan to do any processing before send so it is empty — Arvind, May 29 '14 at 17:54
can i do that without ajaxForm bcos i cannot include jquery form plugin — Arvind, May 29 '14 at 17:57
If you want to do an upload without the plugin you can do something like this - http://www.peachpit.com/articles/article.aspx?p=1766159 — Jay Blanchard, May 29 '14 at 19:07

score -2 · Answer 1 · edited May 23 '17 at 12:20

I believe sending files is not available in pure jquery. I did it few days ago using plugins; http://rubaxa.github.io/jquery.fileapi/ or https://github.com/blueimp/jQuery-File-Upload

The first one is really impressive; i was able to do it in no time and visual progress indicatior and ability to use webcam for images is astonishing.

more in the topic You can find here, i think: How can I upload files asynchronously?

hope it helps :-)

File uploader using jquery ajax

1 Answers1