桌面圖像拖放上傳導致瀏覽器崩潰

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以上，服務器將發送超時信息。