我得到了一个通过 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);
成功返回的结果只是上传照片的路径。有什么想法我能做些什么以使浏览器不会崩溃?