How to upload file using ajax?

Question

HTML:

 <form id="confirmresourceform" enctype="multipart/form-data" method="post" style="display: none;">
              <input id="uploadlecture" name="fileToUpload1" type="file" value="Upload Resources"/>
           </form>

Javascript/Jquery/Ajax:

$("#submitchanges").on("click",function(){
    //Upload files
    var formData = new FormData(document.getElementById("confirmresourceform"));
    formData.append('lecture', $('#uploadlecture')[0].files[0]);
    $.ajax({
        type: 'POST',
        url: 'upload.php',
        contentType: false, 
        processData: false,
        data: formData,
         success: function (data) {
           console.log(data);
         }
    });
});

PHP(upload.php):

echo $_FILES['lecture']['name'];

Ok so I'm attempting to upload a file using ajax(on the click of a div instead of using the submit form thing). I've gotten jQuery to append the file data to formdata with the key 'lecture'. Currently the upload.php script has one line to echo the file name. However, when the ajax runs and calls the upload.php, I get the following error:

Undefined index: lecture in C:\wamp\www\TheClass\lesson_creator_page\upload.php on line 4

I'm pretty sure I've defined 'lecture' in the formdata and passed the formdata to the php. Is there anything I'm doing wrong and is the line formData.append('lecture', $('#uploadlecture')[0].files[0]); correct?

This may help you here: http://stackoverflow.com/questions/6974684/how-to-send-formdata-objects-with-ajax-requests-in-jquery — Notaras, May 27 '15 at 02:05

Kentot · Answer 1 · 2015-05-27T00:41:29.843

1

I had the same problem months ago and solved it by doing the following with ".ajaxFileUpload":

in your jquery the set looks like this:

jQuery.ajaxFileUpload({
            url             : "upload.php",
            secureurl       : false,
            fileElementId   : "fileToUpload1",
            dataType        : 'json',
            data            : {
               // if you have another data to pass in your phhp     
            },
            success : function ()
            {

             },
            error  : function(){

            }
        });

edited May 27 '15 at 00:41

answered May 27 '15 at 00:35

Kentot

512
5
10
26

Thanks for the quick answer! Wouldn't fileElementId be 'uploadlecture' and not fileToUpload1? – kws3778 May 27 '15 at 01:00
as I understand it, this is the name of your input file and be use in your php post in uploading but, if this does not work try to change it to 'uploadlecture' – Kentot May 27 '15 at 01:02
Ok. I get: Uncaught TypeError: jQuery.ajaxFileUpload is not a function – kws3778 May 27 '15 at 01:09
Sorry I forgot to tell you to enter the plugin in your project, I could now no longer found the link where I downloaded it, but I have it in my local, I just don't know how to share it to you. Or you can suggest – Kentot May 27 '15 at 01:14
Ah ok. I see. I'll get a ajax file upload plugin then. Thanks for the help! – kws3778 May 27 '15 at 19:34

score 1 · Answer 2 · edited May 23 '17 at 11:52

1

There is a lot of literature online regarding this.

The best way to do file uploads with Ajax is to use a plugin. Here are several for you to consider:

From: How can I upload files asynchronously?

Multiple File Upload Plugin

Mini Multiple File Upload

jQuery File Upload

You can search more from jQuery's plugin site.

If you dont want to use a plugin, then your best bet is to use an iFrame.

You can also javascript's file API but that isnt supported by all browsers. Check here: https://developer.mozilla.org/en/docs/Web/API/File

EDIT: if you want to be even fancier, you can develop a JAVA or SWF app to embed into your page to do this.

edited May 23 '17 at 11:52

Community

1
1

answered May 27 '15 at 02:18

Notaras

611
1
14
44

Thanks! Would these plugins affect webpage load time significantly? – kws3778 May 27 '15 at 19:40
Not at all. You can download the source for these plugins and check the size of the .js files associated with them. I dont think they are that large – Notaras May 27 '15 at 22:33

How to upload file using ajax?

2 Answers2