PHP file-upload using jquery post

2019-01-11 11:05发布

站内问答 / PHP
563 6 5

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

6条回答
干净又极端
2楼-- · 2019-01-11 11:33

Your upload.php has some error.

you should change your this part.

echo $file['tmp_name'];

to:- 

echo $_FILES['file']['tmp_name'];
查看更多
0人赞 添加讨论(0) 举报
仙女界的扛把子
3楼-- · 2019-01-11 11:33

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

查看更多
0人赞 添加讨论(0) 举报
冷血范
4楼-- · 2019-01-11 11:34

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

查看更多
0人赞 添加讨论(0) 举报
老娘就宠你
5楼-- · 2019-01-11 11:41

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

查看更多
0人赞 添加讨论(0) 举报
迷人小祖宗
6楼-- · 2019-01-11 11:42

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);
}
查看更多
0人赞 添加讨论(0) 举报
Fickle 薄情
7楼-- · 2019-01-11 11:47

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)