使用jQuery中止AJAX文件上传

时间:2015-07-27 15:33:05

标签: jquery ajax timeout multipartform-data

我尝试使用Code Igniter和jQuery构建上传脚本。在我的笔记本电脑上,一切正常,但是当我在我的网络服务器上传脚本时,如果文件大于2kb,上传过程会立即中止。我认为这是一个服务器配置问题,所以我编写了以下脚本,允许测试AJAX和HTML方式。结果是它在HTML中没问题,它在AJAX中崩溃:

upload.php

<?php


if( count($_FILES) )
{
    $content_dir = './';

    $tmp_file = $_FILES['fichier']['tmp_name'];

    if( !is_uploaded_file($tmp_file) )
    {
        die("File not found");
    }

    $name_file = $_FILES['fichier']['name'];

    if( !move_uploaded_file($tmp_file, $content_dir . $name_file) )
    {
        die("Impossible to copy the file in $content_dir");
    }
    die("File uploaded successfully");
}

?><html>
<head>
        <title>file upload</title>
        <script src="assets/js/jquery-2.1.4.min.js"></script>
</head>
<body>


    <form method="post" enctype="multipart/form-data" action="upload.php">
        <input type="file" name="fichier">
        <br/>
        <input type="submit" name="upload" value="HTML upload">
    </form>
    <button>AJAX Upload</button>


    <script type="text/javascript">

        $('button').on('click', function(e)
        {
            var data = new FormData()

            $.each( $('input[type=file]'), function(id, obj)
            {
                data.append( obj.name, obj.files[0] )
            })

            $.ajax({
                url: 'upload.php',
                data: data,
                cache: false,
                contentType: false,
                processData: false,
                timeout: 300,
                type: 'POST',
                success: function(msg)
                {
                    alert(msg)
                },
                error: function(xhr, str)
                {
                    console.log( xhr )
                    alert('Error : ' + str)
                }
            })
        })
    </script>

</body>
</html>

Firebug引发“中止”错误,而jQuery引发“超时”错误。

我在apache日志中找不到任何错误。

我删除了所有.htaccess文件。

根据phpinfo(),PHP配置是:

  • file_uploads On
  • max_file_uploads 20
  • upload_max_filesize 200M
  • post_max_size 300M

我怎样才能使AJAX方式正常工作? 任何帮助或指导感激不尽。

修改:

我终于找到了让它发挥作用的方法:

  • 首先,jQuery.each()回调函数似乎不返回dom对象,而是返回jQuery对象。

  • 其次,来自jQuery.ajax的参数'timeout'设置为'300'(在我的示例中不存在,但在生产中的代码中)。实际上,这个值是以毫秒为单位,而不是以秒为单位。

这是我的新代码:

$('button').on('click', function(e)
{
    var myfile = $('input[type=file]').get(0).files[0]
    var data = new FormData()
    data.append( 'myfile', myfile )

    $.ajax({
        url: 'upload.php',
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        timeout: 30000,
        type: 'POST',
        success: function(msg)
        {
            alert(msg)
        },
        error: function(xhr, str)
        {
            console.log( xhr )
            alert('Error : ' + str)
        }
    })
})

0 个答案:

没有答案