logo标签列表

使用jQuery post实现PHP文件上传

phpjqueryfile-upload
16

如果有人知道这段代码的问题，请告诉我。

基本上，我想使用 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>

我的php文件名为'post.php'

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

上传的文件名没有返回。问题是我无法访问已上传的文件。

先感谢！ Shiv

6个回答
19

基本上我想使用jQuery上传文件。

您无法使用AJAX上传文件。您可以使用jquery.form插件，该插件使用隐藏的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>

还要注意表单上的enctype="multipart/form-data"。

另一种可能是使用HTML5文件API，只要客户端浏览器支持它，就可以实现这一点。

1
你的意思是说，你无法使用AJAX上传文件，还是无法使用jQuery的post()方法上传文件？ - Cedric Ipkiss
9

使用jQuery $.post无法上传文件，但是通过文件API和XMLHttpRequest，可以完全实现AJAX上传文件，并且您甚至可以知道已上传多少数据...

$('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);
}
不幸的是，XHR2的支持还不够好。但是感谢您对此提供的意见，我已经使用这种方法通过Zepto和一些模拟数据成功地进行了完整的测试。 - user339827
1
所有当前主流浏览器版本都支持它（甚至包括IE 10+）。http://caniuse.com/xhr2 - Buzut
5

不，不，不，你应该使用jQuery表单插件进行异步上传文件。无法使用jQuery $.post方法上传文件。文件将使用隐藏的iframe上传。

另一种方法是使用FileAPI/BlobApi的HTML5上传。

谢谢伙计！目前，我将使用普通的HTML表单提交而不是jQuery post。这样，对我来说就可以工作了！ - Shiv
2

你的 upload.php 存在一些错误。

你需要更改这部分内容。

echo $file['tmp_name'];

to:- 

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

尝试使用iframe上传，因为您无法使用$.post方法发送文件。

0
当浏览器已经有API提供此功能时，为什么您会选择使用外部库？ - Heitara
1
因为我们很久以前就谈论上传文件的问题了，从新技术的发展来看，这可能已经有一个世纪或更长时间了。当我提出这个问题时，HTML5 还不存在或者刚刚开始出现，除了纯 HTML 之外的任何东西都需要 Flash（大多数情况下）。在那个时候，Uploadify 是一个非常好的库，除了其他功能外，还提供了进度条、多文件上传、拖放等功能，如果我没记错的话，它是基于 jQuery 的。 - norbi771
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接