使用ajax上传文件不起作用答案

【问题标题】：Uploading file with ajax not working使用ajax上传文件不起作用
【发布时间】：2014-04-15 13:35:31
【问题描述】：

我正在创建自己的小型 CMS，需要上传文件和图像。我已经尝试实现 blueimp 上传器，但无济于事。

我想通过 jquery 脚本将 formData 发送到我的 CMS。在 PHP 代码（接收）中，我检查内容类型，然后想将文件传递给函数（处理）。在控制台中，我可以看到 jquery 发送了附件，但我在 PHP 中得到了空的 $_POST 和 $_FILES 数组。

我不能使用 GET 请求，因为这些请求受到我的 CMS 的限制。

这是我的代码 sn-ps：

HTML 表单：

<form enctype="multipart/form-data">
    <input type="file" name="import_file" id="import_file" />
    <button id="import_send" value="import">Import</button>
</form>

jquery:

$(document).ready(function(){
    $('#import_send').on('click', function(e){
        e.preventDefault();
        var data = new FormData();
        data.append($('#import_file')[0].files[0].name, $('#import_file')[0].files[0]);
        $.ajax({
            url: window.location.href,
            data: data,
            processData: false,
            type: 'POST',
            contentType: 'multipart/form-data',
            mimeType: 'multipart/form-data',
            success: function (ret) {
                alert(ret);
            }
        });
    });
});

PHP（接收）：

<?php
    function do_control(){
        if ($_SERVER['CONTENT_TYPE']){
            if (strpos($_SERVER['CONTENT_TYPE'], 'multipart/form-data') !== false){
                $in = $_FILES;
                $method = 'on_upload';
                if ($bothandler->get_by_name('upload_bot', true) == true){
                    $bothandler->trigger($method, $in);
                }
            }
        }
    }
?>

PHP（处理）：

<?php
    public function on_upload($in){
            if ($in['type'] == 'application/zip'){
                if (!file_exists('../extension/'.$in['name'])){
                    move_uploaded_file($in['tmp_name'], '../extension/'.$in['name']);
                }
            }
            if ($in['type'] == 'image/jpeg' || $in['type'] == 'image/png' || $in['type'] == 'image/bmp' || $in['type'] == 'image/gif'){
                if (!file_exists('../images/'.$in['name'])){
                    move_uploaded_file($in['tmp_name'], '../images/'.$in['name']);
                }
            };
            echo 'loaded';
    }
?>

这是写在请求头中的内容：

Accept  */*
Accept-Encoding gzip, deflate
Accept-Language de,en-US;q=0.7,en;q=0.3
Cache-Control   no-cache
Connection  keep-alive
Content-Length  316648
Content-Type    multipart/form-data
Cookie  f23476c1b4331c112ea6010733733bd5=icg8d641nv2e79lm3ce7p39h06; 78fad9eff80cd47c7c23dc899cb72eea=b38c1atf7fbqk4jc29p3bej964; silent_admin_session=b38c1atf7fbqk4jc29p3bej964
DNT 1
Host    www.abc.com
Pragma  no-cache
Referer http://www.abc.com/index.php5
User-Agent  Mozilla/5.0 (Windows NT 6.1; WOW64; rv:28.0) Gecko/20100101 Firefox/28.0
X-Requested-With    XMLHttpRequest

这就是帖子里的内容

-----------------------------24138208746564 Content-Disposition: form-data; name="192184_10150119104647532_7869997_o.jpg"; filename="192184_10150119104647532_7869997_o.jpg" Content-Type: image/jpeg
***

PHP 脚本抛出一个错误，因为它没有从 $_FILES 获取任何数据，因为它是空的。如果我尝试上传绝对不大于允许的 upload_max_filesize 的图像或 zip 文件，这并不重要。

另外一个问题是我不能发送大于 2M 的文件。我已经尝试包含

php_value upload_max_filesize 40M
php_value post_max_size 42M

在 htaccess 文件中，但随后出现 500 错误。我也尝试使用 user.ini 文件来做到这一点

upload_max_filesize=40M
post_max_size=42M

但是好像没有效果。

【问题讨论】：

请添加有关上传到底出了什么问题的信息。使用向您显示 ajax 请求和响应的浏览器（即 Firefox Web Developer Extension (Web-Console)。是否正在发送 ajax 请求？响应正文是什么？
你它不能正常工作，你必须使用其他技术来 ajax 一个文件，比如 iframe，或者试试这个 jquery 插件，我有时使用它，它很好用：malsup.com/jquery/form跨度>
您能否对htaccess 文件进行其他更改？这可能是allowoverride 问题。
@MatthewJohnson 是的，我可以对 htacess 文件进行其他更改。

标签： php jquery ajax html

【解决方案1】：

我开发了自己的文件上传系统，这是我的一段代码，希望对你有帮助

$('#inputFile').on('change', function(e) {
        var $input = $(this);
        var file = e.currentTarget.files[0];
        var data = new FormData();
        data.append('file', file);

        $.ajax({
          type: "POST",
          data: data,
          cache: false,
          contentType: false,
          processData: false,
          url: 'path/to/php/script'
        })
          .done(function() {
            alert('success');
          });
});

【讨论】：

将缓存设置为 false 并将 contentType 设置为 false，谢谢。
不客气。请考虑接受此答案作为最适合您的问题的答案。谢谢

【解决方案2】：

我对我的 ajax 调用做了些许改动。现在它起作用了。谢谢史蒂夫。

$.ajax({ 网址：window.location.href，数据：数据，缓存：假，处理数据：假，类型：'POST'，内容类型：假，成功：函数（ret）{ 警报（ret）； } });

【讨论】：