PHP file-upload using jquery post

Question

Let me know if anyone know what is the issue with this code.

Basically i want to upload a file using jQuery

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script type="text/javascript">
    $(document).ready(function(event) {
      $('#form1').submit(function(event) {
        event.preventDefault();
        $.post('post.php',function(data){
           $('#result').html(data);
        });
      });
    });
  </script>  
</head>
<body>
<form id="form1">
  <h3>Please input the XML:</h3>
  <input id="file" type="file" name="file" /><br/>
  <input id="submit" type="submit" value="Upload File"/>
</form>

<div id="result">call back result will appear here</div>

</body>
</html>

and my php 'post.php'

<?php
  echo $file['tmp_name'];
?>

Uploaded File name is not returned back. Issue is i couldn't access the uploaded file.

Thanks in advance! Shiv

Community · Accepted Answer · 2013-12-17 18:20:09Z

19

Basically i want to upload a file using jQuery

You cannot upload files using AJAX. You could use the jquery.form plugin which uses a hidden iframe:

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script>
    <script type="text/javascript">
        $(document).ready(function(event) {
            $('#form1').ajaxForm(function(data) {
                $('#result').html(data);
            });
        });
  </script>  
</head>
<body>
<form id="form1" action="post.php" method="post" enctype="multipart/form-data">
    <h3>Please input the XML:</h3>
    <input id="file" type="file" name="file" /><br/>
    <input id="submit" type="submit" value="Upload File"/>
</form>

<div id="result">call back result will appear here</div>

</body>
</html>

Also notice the enctype="multipart/form-data" on the form.

Another possibility is to use the HTML5 File API which allows you to achieve that assuming the client browser supports it.

edited Dec 17, 2013 at 18:20

CommunityBot

11 silver badge

answered Jun 15, 2012 at 7:56

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

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

1 Comment

Cedric Ipkiss Over a year ago

Did you mean you can't upload files using AJAX or you can't upload files using jQuery's post() method?

Buzut · Accepted Answer · 2014-05-10 09:28:48Z

9

It's not possible to upload files with jQuery $.post, neverthless, with the file API and XMLHttpRequest, it's perfectly possible to upload a file in AJAX, and you can even know how much data have been uploaded yet…

$('input').change(function() 
{
    var fileInput = document.querySelector('#file');

    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload/');

    xhr.upload.onprogress = function(e) 
    {
        /* 
        * values that indicate the progression
        * e.loaded
        * e.total
        */
    };

    xhr.onload = function()
    {
        alert('upload complete');
    };

    // upload success
    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0))
    {
        // if your server sends a message on upload sucess, 
        // get it with xhr.responseText
        alert(xhr.responseText);
    }

    var form = new FormData();
    form.append('title', this.files[0].name);
    form.append('pict', fileInput.files[0]);

    xhr.send(form);
}

edited May 10, 2014 at 9:28

answered May 1, 2013 at 21:16

Buzut

5,2434 gold badges52 silver badges57 bronze badges

2 Comments

user339827 Over a year ago

Sadly the support for XHR2 isn't good yet. But thanks for your input on this, I've managed to make a fully working test with Zepto and some mock data by using that approach.

Buzut Over a year ago

All current major browers versions suport it (even IE 10+). caniuse.com/xhr2

odiszapc · Accepted Answer · 2012-06-15 07:54:58Z

5

No no no, you should use a jQuery form plugin for async uploading files. You can't upload file with jQuery $.post method. The file will be uploaded with hidden iframe

Another way is to use HTML5 uploading with FileAPI/BlobApi

answered Jun 15, 2012 at 7:54

odiszapc

4,1172 gold badges31 silver badges45 bronze badges

1 Comment

Shiv A Over a year ago

Thanks mate! For now, i will just go with normal html form submit instead of jquery post. That way, it works for me!

Soner Gönül · Accepted Answer · 2015-10-14 11:28:11Z

2

Your upload.php has some error.

you should change your this part.

echo $file['tmp_name'];

to:-

echo $_FILES['file']['tmp_name'];

edited Oct 14, 2015 at 11:28

Soner Gönül

99.1k103 gold badges224 silver badges375 bronze badges

answered Oct 14, 2015 at 11:02

aary trivedi

778 bronze badges

Comments

user1432124 · Accepted Answer · 2012-06-15 07:56:57Z

0

Try uploading with an iframe because you can't send a file with $.post method.

answered Jun 15, 2012 at 7:56

user1432124

Comments

norbi771 · Accepted Answer · 2012-06-16 11:37:43Z

0

You could also try jquery uploadify - http://www.uploadify.com/

answered Jun 16, 2012 at 11:37

norbi771

8342 gold badges12 silver badges29 bronze badges

2 Comments

Heitara Over a year ago

Why you will go with an external library, when the browser has an API for that?

norbi771 Over a year ago

Because we were talking about uploading files long time ago, I would say a century or more in terms of new technologies development. When I proposed that there were no html5 or it was just starting and anything more than pure html required flash (mostly). Uploadify was pretty good library in that time and among other features offered progress bar, multiple files upload, drag and drop and if I recall correctly was jquery based.

Collectives™ on Stack Overflow

PHP file-upload using jquery post

6 Answers 6

1 Comment

2 Comments

1 Comment

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

2 Comments

1 Comment

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related