Desktop image drag & drop загрузить crashing browser

Question

У меня есть форма для загрузки изображений через ajaxForm. Я реализовал функцию, позволяющую пользователям удалять фотографии с рабочего стола (перетаскивание HTML5 &). Все отлично работает, если фотография «маленькая» - скажем, 2 Мб. Проблема возникает, когда я пытаюсь загрузить фотографии размером более 4 МБ. Сбой браузера 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({ 
    url:'theurl', 
    type:'post', 
    data: data, 
    contentType:false, 
    processData:false, 
    ... 
}); 

Answer 2

Я думаю, что это не проблема jquery/ajax/browser. Если вы используете сервер apache, например, проверьте «upload_max_filesize = 2M», расположенный на вашем php.ini.

Размер по умолчанию - 2 МБ, поэтому он подходит для вас. Сервер отправляет таймаут, если вы пытаетесь загрузить более 2 МБ.