upload file using ajax,jquery,php

Question

I want to upload a file and send to server without refreshing page.

I have following line in my HTML file

<form  id="FileUploader" enctype="multipart/form-data" >
    <input type="file" name="mfile" id="mfile" style='width:100%;' onchange="uploaded()">
</form>

function uploaded()
    {
        alert($('form#FileUploader')[0]);
        var formData=new FormData($('form#FileUploader')[0]);
        //alert(formData);
          $.ajax({
            url: "<?php echo $_SESSION['webpage']."/upload" ?>",
            type: "POST",
            async: true,
            dataType: "JSONP",
            data : formData
            })
            .success (function(response){
                alert(response);
            })
            .error   (function()     { alert("Error")   ; }) ;


    }

upload.php file

 if ($_FILES["mfile"]["error"] >0 )
    {
        echo "Error: " ;
    }
    else
    {
        if (file_exists("upload_email_files/" . $_FILES["mfile"]["name"]))
          {
          echo $_POST["file"]. " already exists. ";
          }
        else
          {
          $otp= move_uploaded_file('$_FILES["mfile"]"name"]','/../upload_templates/');
          }
    }

It's not working .Can anybody help me on this ? It is not coming in upload.php and giving me error Illegal Invocation.

Thanks, Shirish

uplaoded() should be uploaded(), won't fix issue at hand, but should be done — curtisk
– curtisk, Commented Jul 21, 2013 at 2:38
You are using Upload_file in your url when you should use upload.php if that's the name of the file you like to send the request to ie url: "<?php echo $_SESSION['webpage']."/upload.php" ?>" — Cyclonecode
– Cyclonecode, Commented Jul 21, 2013 at 2:38

Natesan · Accepted Answer · 2013-07-21 13:08:24Z

3

in the case of "without refreshing page", you can use hidden iframe.

For reference,

http://viralpatel.net/blogs/ajax-style-file-uploading-using-hidden-iframe/ ,

http://joekuan.wordpress.com/2009/06/12/ajax-a-simplified-version-of-file-upload-form-using-iframe/

answered Jul 21, 2013 at 13:08

Natesan

1,1452 gold badges15 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ARIF MAHMUD RANA · Accepted Answer · 2013-07-21 06:23:13Z

Check this out I haven't tested it hope this will work http://blog.new-bamboo.co.uk/2012/01/10/ridiculously-simple-ajax-uploads-with-formdata

<form  id="FileUploader" enctype="multipart/form-data" >
    <input type="file" name="mfile" id="mfile" style='width:100%;' onchange="uploaded()">
</form>

function uploaded()
    {
        alert($('form#FileUploader')[0]);
        var formData=new FormData($('form#FileUploader'));//remove [0]
        //alert(formData);
          $.ajax({
            url: "<?php echo $_SESSION['webpage']."/upload" ?>",
            type: "POST",
            //async: true,//Remove this line
            //dataType: "JSONP",//Remove this line
            data : formData
            })
            .success (function(response){
                alert(response);
            })
            .error   (function()     { alert("Error")   ; }) ;


    }

Yes but FormData is not working IE. So I want something that can also work on IE.

MHon Romero · Accepted Answer · 2015-03-26 06:28:50Z

Try this one :)

<form  id="FileUploader" enctype="multipart/form-data" >
   <input type="file" name="mfile" id="mfile" style='width:100%;' onchange="uploaded()">
</form>
$(document).ready(function() {
$("#form-geninfo").submit(function(e)
{
    e.preventDefault();
    alert($('form#FileUploader')[0]);
    var formData=new FormData($('form#FileUploader')[0]);
    //alert(formData);
      $.ajax({
        url: "<?php echo $_SESSION['webpage']."/upload" ?>",
        type: "POST",
        async: true,
        dataType: "JSONP",
        data : formData
        })
        .success (function(response){
            alert(response);
        })
        .error   (function()     { alert("Error")   ; }) ;


}
});

Collectives™ on Stack Overflow

upload file using ajax,jquery,php

3 Answers 3

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Related