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

【问题标题】：Desktop image drag&drop upload crashing browser桌面图片拖放上传崩溃浏览器
【发布时间】：2013-03-22 19:36:35
【问题描述】：

我得到了一个通过 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);

成功返回的结果只是上传照片的路径。有什么想法我该怎么做才能使浏览器不会崩溃？

【问题讨论】：

标签： javascript jquery ajax google-chrome asp.net-mvc-4

【解决方案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,
    ...
});

【讨论】：

【解决方案2】：

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

默认大小是 2mb，所以它很适合你的问题。如果您尝试上传超过 2mb 的内容，服务器会发送超时。

【讨论】：

不是服务器端的问题。我们获得了 10M 的许可。