FormData内容长度Jquery,Ajax中的限制使用FormData使用数组时发送大图像文件

时间:2018-03-08 11:47:16

标签: javascript c# jquery ajax asp.net-mvc

我有3个图像或多个图像阵列,其总大小约为。 29mb或以上。我尝试使用带有表单数据的Ajax在服务器端发布它。但是当我尝试在MVC中使用FormData发布大数据时,它显示错误是否有任何解决方案。当我尝试发布数据时,它在客户端显示错误意味着进入request.fail部分

这是我的Jquery代码

 var filess = new Array();
var num = 4;
var IsAlready = false;
$(document).ready(function() {
    document.getElementById('pro-image').addEventListener('change', readImage, false);

    $( ".preview-images-zone" ).sortable();

    $(document).on('click', '.image-cancel', function() {
    debugger;
        let no = $(this).data('no');
        let Id = this.id;
        $(".preview-image.preview-show-"+no).remove();
        for (var i = 0; i < filess.length; i++) {
          debugger;
             filess = $.grep(filess, function(value) {
  return value.name != Id;
        });
}
    });
});

function readImage() {

    if (window.File && window.FileList && window.FileReader) {
        var files = event.target.files;
        var output = $(".preview-images-zone");

          for (var i = 0; i < files.length; i++) {

             $.grep(filess, function (n) {
                 if (n.name == files[i].name) {
                     IsAlready = true;
                 }
             })
             if (IsAlready)
             {
                 alert("Same Name File Exist");
                  $("#pro-image").val('');
                  IsAlready = false;
                 return false;
             }
        }

        var anyWindow = window.URL || window.webkitURL;
          for (var i = 0; i < files.length; i++) {

            filess.push(files[i]);
        var file = null;
             file = files[i];

            if (!file.type.match('image')) continue;
            var objectUrl = anyWindow.createObjectURL(files[i]);
            var html =  '<div class="preview-image preview-show-' + num + '"  >' +
                            '<div class="image-cancel" data-no="' + num + '" id="' + files[i].name + '">x</div>' +
                            '<div class="image-zone"><img id="pro-img-' + num + '" src="' + objectUrl + '"></div>' +

                            '</div>';

                output.append(html);
                num = num + 1;

            window.URL.revokeObjectURL(files[i]);
        }
       $("#pro-image").val('');
    }
    else {
        console.log('Browser not support');
    }

}

$("#submit").click(function () {
    event.preventDefault();
    debugger;
    var url = "/Administration/CreateAlbum";
    var albumName = $("#AlbumName").val();
    var albumDescription = $("#AlbumDescription").val();
    var IsActive = $("#IsActive").val();
    var filess = new Array();
    var data = new FormData();
    data.append('albumName', albumName);
    data.append('albumDescription', albumDescription);
    data.append('IsActive', IsActive);
    $("#submit").prop("disabled", true);

    for (var i = 0; i < filess.length; i++) {

        data.append('image', filess[i] );
    }

    var request = $.ajax({
        url: url,
        enctype: 'multipart/form-data',
        type: 'POST',
        processData: false,
        contentType: false,
        cache: false,
        timeout: 600000,
        data: data
    });

    request.done(function (response) {
        $("#resultCode").html(response.ResultCode);
        $("#resultMessage").html(response.ResultMessage);
        $('#reasonCode').val("");
        $('#quantity').val("");
        $('#inventoryCode').val("");
        $('#unitCost').val("");


    });
    request.fail(function (jqXHR, textStatus) {
        alert("Request failed: " + textStatus);
    });

});

2 个答案:

答案 0 :(得分:0)

用于大文件上传。

ini_set(&#39; upload_max_filesize&#39;,&#39; 10M&#39;); ini_set(&#39; post_max_size&#39;,&#39; 10M&#39;);

您的files数组为空,无需指定enctype。这里是Ajax

var files = array();

如果你有多个文件,那么追加

 data.append('image[]', filess[i] );





var filess = new Array();
var num = 4;
var IsAlready = false;
$(document).ready(function() {
    document.getElementById('pro-image').addEventListener('change', readImage, false);

    $( ".preview-images-zone" ).sortable();

    $(document).on('click', '.image-cancel', function() {
    debugger;
        let no = $(this).data('no');
        let Id = this.id;
        $(".preview-image.preview-show-"+no).remove();
        for (var i = 0; i < filess.length; i++) {
          debugger;
             filess = $.grep(filess, function(value) {
  return value.name != Id;
        });
}
    });
});

function readImage() {

    if (window.File && window.FileList && window.FileReader) {
        var files = event.target.files;
        var output = $(".preview-images-zone");

          for (var i = 0; i < files.length; i++) {

             $.grep(filess, function (n) {
                 if (n.name == files[i].name) {
                     IsAlready = true;
                 }
             })
             if (IsAlready)
             {
                 alert("Same Name File Exist");
                  $("#pro-image").val('');
                  IsAlready = false;
                 return false;
             }
        }

        var anyWindow = window.URL || window.webkitURL;
          for (var i = 0; i < files.length; i++) {

            filess.push(files[i]);
        var file = null;
             file = files[i];

            if (!file.type.match('image')) continue;
            var objectUrl = anyWindow.createObjectURL(files[i]);
            var html =  '<div class="preview-image preview-show-' + num + '"  >' +
                            '<div class="image-cancel" data-no="' + num + '" id="' + files[i].name + '">x</div>' +
                            '<div class="image-zone"><img id="pro-img-' + num + '" src="' + objectUrl + '"></div>' +

                            '</div>';

                output.append(html);
                num = num + 1;

            window.URL.revokeObjectURL(files[i]);
        }
       $("#pro-image").val('');
    }
    else {
        console.log('Browser not support');
    }

}

$("#submit").click(function () {
    event.preventDefault();
    debugger;
    var url = "/Administration/CreateAlbum";
    var albumName = $("#AlbumName").val();
    var albumDescription = $("#AlbumDescription").val();
    var IsActive = $("#IsActive").val();
    var filess = new Array();
    var data = new FormData();
    data.append('albumName', albumName);
    data.append('albumDescription', albumDescription);
    data.append('IsActive', IsActive);
    $("#submit").prop("disabled", true);

    for (var i = 0; i < filess.length; i++) {

        data.append('image', filess[i] );
    }

    var request = $.ajax({
        url: url,
        enctype: 'multipart/form-data',
        type: 'POST',
        processData: false,
        contentType: false,
        cache: false,
        timeout: 600000,
        data: data
    });

    request.done(function (response) {
        $("#resultCode").html(response.ResultCode);
        $("#resultMessage").html(response.ResultMessage);
        $('#reasonCode').val("");
        $('#quantity').val("");
        $('#inventoryCode').val("");
        $('#unitCost').val("");


    });
    request.fail(function (jqXHR, textStatus) {
        alert("Request failed: " + textStatus);
    });

});

答案 1 :(得分:0)

如上所述,您需要在web.config

中设置maxAllowedContentLength
 <system.webServer>
    <security>
      <requestFiltering>
        <requestLimits maxAllowedContentLength="YOUR SIZE"  />
      </requestFiltering>
    </security>
  </system.webServer>

感谢