无法使用formData数组一次上传5张图片

时间:2015-02-03 16:15:03

标签: javascript jquery json

我正在创建一种机制,用于在更改文件输入时一次上传5张图片。 由于某种原因,我无法一次上传5张照片,4张照片都没问题,5张不同的照片也尝试了,但同时也是5张...... .blah :(

这是我的代码,我想我有一个愚蠢的错误,请帮帮我:( 当我调试它的图片[]数组我发送如果为null,如果我上传4张图片,它已被填充。

var uploaded_images = 0;
$('#post-upload-pictures').change(function(){
    var formData = new FormData(), pictures = this.files, i;
    uploaded_images = uploaded_images + pictures.length;
    if (pictures.length > 5 || uploaded_images > 5){
        uploaded_images = uploaded_images - pictures.length;
        alert('ניתן להעלות עד חמש תמונות בלבד');
        return;
    }
    for(i=0; i < pictures.length; i++){
        formData.append('pictures['+i+']', pictures[i]);
    }
    if(window.FormData === undefined){
        alert('הדפדפן שאת משתמשת בו ישן מידיי, אנו ממליצים להתקין Chrome');
        return;
    }
    $.ajax({
        url: '/ajax/uploadPictures',
        type: 'POST',
        data: formData,
        dataType: 'json',
        contentType: false,
        processData: false,
        //Ajax events
        beforeSend: function(){
            $('#post-upload i').removeClass('fa fa-camera-retro fa-2x').addClass('spinner');
        },
        success: function(url){
            for(i=0; i < pictures.length; i++){
                $('#post-pictures').append('<img src="' + url.pic[i] +'"/>');
            }
            $('#post-pictures').fadeIn();
            $('#post-upload i').addClass('fa fa-camera-retro fa-2x').removeClass('spinner');
        },
        error: function(){
            $('#post-upload i').addClass('fa fa-camera-retro fa-2x').removeClass('spinner');
        }
    });
});

2 个答案:

答案 0 :(得分:1)

基本上......据我所知......你没有使用multipart/form-data内容类型。

所以......您的浏览器将所有数据作为单个请求发送。

现在...在您的服务器上(我假设是在php中)......应该有maximum-request-size的限制。而且......我认为它已超过了5个文件。

增加服务器上的maximum-request-size。它应该工作。

假设php ...您必须在php.ini中更改这些特定内容:

// Increase as per your expected file-upload size
post_max_size = 30m
// Expected input parsing time... in seconds
max_input_time = 20
// Increase as per your expected execution time of upload script... including input parsing... in seconds
max_execution_time = 30

答案 1 :(得分:1)

使用multipart / form-data作为enctype并将php.ini中的max_post_size和max_upload_size更改为大于五个文件的最大文件大小