Question

我收到了一张通过ajaxForm上传图片的表单。我已经实现了一个功能，因此用户可以从桌面上删除照片（HTML5拖放）。如果照片是“小”的话，每件事情都很好 - 让我们说2mb。当我尝试上传大于4mb的照片时出现问题。 Chrome浏览器崩溃了。

给ajaxForm

$(document).ready(function() {
    $("#uploadForm").ajaxForm({
        iframe: true,
        dataType:"json",
        beforeSubmit: function () {
            $("#post .button.save").prop("disabled",true).val("Uploading...");
        },
        success: function (result) {
            $("#FilePhotoString").val("");
            $("#post").css({
                "background": 'url(' + result + ') no-repeat center center',
                "display": "block",
                "height": $("body").height(),
                "background-size": "cover"
            });
            $("img").attr("src",result).load(function() { 
               $('input[name="ImageFilePath"]').attr('value', result);
               $("#post .button.save.now").prop("disabled",false).val("Publish now");
               $("#post .button.save.later").prop("disabled",false).val("Publish later");
            });
        }
    });
});

掉落

document.body.addEventListener('dragover',function(event) { event.preventDefault(); },false);
document.querySelector('#content').addEventListener('drop', function(event) {
    event.preventDefault(); 
    var reader = new FileReader();
        reader.onload = function(evt) { 
                $("#FilePhotoString").val(evt.target.result);   
            $("#uploadForm").submit();  
        };
    reader.readAsDataURL(event.dataTransfer.files[0]);
}, false);

成功时返回的结果只是上传照片的路径。任何想法我能做什么，所以浏览器不会崩溃？

Answer 1

如何使用另一种方法，例如使用FormData并发送文件而不是字符串。

var data = new FormData(document.getElementById('#uploadForm'));
data.append('theNameYouWantToSend', event.dataTransfer.files[0]);

然后发送ajax请求

$.ajax({
    url:'theurl',
    type:'post',
    data: data,
    contentType:false,
    processData:false,
    ...
});

Answer 2

我认为这不是一个jquery / ajax / browser问题。例如，如果您使用的是apache服务器，请检查位于php.ini的“upload_max_filesize = 2M”。

默认大小为2mb，因此它很适合您。如果您尝试上传超过2mb，服务器会发送超时。

桌面图片拖放上传崩溃的浏览器

2 个答案: