0

ajaxForm を介して画像をアップロードするためのフォームを取得しました。ユーザーがデスクトップから写真をドロップできるように機能を実装しました (HTML5 ドラッグ & ドロップ)。写真が「小さい」場合、すべてが正常に機能します-2MBとしましょう。4 MB より大きい写真をアップロードしようとすると、問題が発生します。Chrome ブラウザがクラッシュします。

Ajaxフォーム

$(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);

成功時に返される結果は、アップロードされた写真のパスです。ブラウザがクラッシュしないようにするにはどうすればよいですか?

4

2 に答える 2

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,
    ...
});
于 2013-03-22T19:57:50.313 に答える
0

jquery/ajax/ブラウザの問題ではないと思います。たとえば、Apache サーバーを使用している場合は、php.ini にある「upload_max_filesize = 2M」を確認してください。

デフォルトのサイズは 2 mb であるため、問題にうまく適合します。2 MB 以上をアップロードしようとすると、サーバーはタイムアウトを送信します。

于 2013-03-22T19:45:39.997 に答える