使用 jquery post 上传 PHP 文件答案

【问题标题】：PHP file-upload using jquery post使用 jquery post 上传 PHP 文件
【发布时间】：2012-06-18 06:54:56
【问题描述】：

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

基本上我想使用 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'];
?>

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

提前致谢！湿婆

【问题讨论】：

标签： php jquery file-upload

【解决方案1】：

不不不，您应该使用 jQuery 表单插件来异步上传文件。您不能使用 jQuery $.post 方法上传文件。该文件将使用隐藏的 iframe 上传

另一种方法是通过 FileAPI/BlobApi 使用 HTML5 上传

【讨论】：

谢谢伙计！现在，我将只使用普通的 html 表单提交而不是 jquery post。这样，它对我有用！

【解决方案2】：

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

您不能使用 AJAX 上传文件。您可以使用使用隐藏 iframe 的 jquery.form 插件：

<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 File API，假设客户端浏览器支持它，您可以实现它。

【讨论】：

你的意思是不能使用 AJAX 上传文件还是不能使用 jQuery 的 post() 方法上传文件？

【解决方案3】：

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

【讨论】：

【解决方案4】：

你也可以试试 jquery uploadify - http://www.uploadify.com/

【讨论】：

当浏览器有 API 时，为什么还要使用外部库？
因为我们很久以前就在谈论上传文件，我会说一个世纪或更长时间的新技术开发。当我提出没有 html5 或者它刚刚开始并且除了纯 html 之外的任何东西都需要 Flash 时（大多数情况下）。 Uploadify 在那个时候是相当不错的库，除其他功能外，它还提供进度条、多个文件上传、拖放，如果我没记错的话，它是基于 jquery 的。

【解决方案5】：

用 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 和一些模拟数据进行了完全有效的测试。
当前所有主流浏览器版本都支持它（甚至 IE 10+）。 caniuse.com/xhr2

【解决方案6】：

你的upload.php有一些错误。

你应该改变你的这部分。

echo $file['tmp_name'];

到：-

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

【讨论】：