0

Web ブラウザーからファイルをアップロードするために、次のコードを作成しました。Firefoxでは機能しますが、Safariでは機能しません。これが当てはまる明らかな理由はありますか.

// when the file field is changed I get its data and the "salonId" variable
    $("#btnFrontUpload").change(function (e){
        frontPic = e.target.files[0]
        displayPicAsBackground(frontPic, "btnFrontUploadShow")
        frontPicName = frontPic.name
        salonId=$("#salonId").val();
    });

fd = new FormData()

$("#btnNextPhotos").click(function(){
    $('#mdlPhotos').modal('hide')
        resizeAndPopulateVariables()
        doAjaxRequest()
    });

});

function updateMilliTime(){
    milliTime = (new Date).getTime()
}

function displayPicAsBackground(file, btn){
// here I display the uploaded file (which is a picture) on the screen
//  it works on most browsers including mobile safari, but not the "desktop" safari
    $.canvasResize(file,
        {
            width: 160,
            height: 0,
            crop: false,
            quality: 100,
            callback: function (data)
            {
                $('#'+btn).css("background", "url("+data+")")
            }
        });
}

function resizeAndPopulateVariables(){
// I resize the image and create a file variable for upload
    $.canvasResize(frontPic,
           {
                width: 400,
                height: 0,
                crop: false,
                quality: 100,
                callback: function (data)
           {    // Add file data
                var frontPicForUpload = $.canvasResize('dataURLtoBlob', data)
                fd.append("frontPic", frontPicForUpload)
                fd.append("frontPicName", frontPicName)
                fd.append("salonId", salonId)
           }
           });
}

function doAjaxRequest(){
// send the ajax request
    $.ajax(
          {
                url: '/create/picture',
                type: 'POST',
                data: fd,  //fd is a global variable
                dataType: 'json',
                contentType: false,
                processData: false,
                beforeSend: function (xhr)
                {
                    xhr.setRequestHeader("pragma", "no-cache");
                }
          }
          ).done(function (response){
            window.location.reload()
    });
4

2 に答える 2

1

コードには多くの構文エラーがあります。Firefoxでどのように動作するかわかりません。JSLintなどのJavascriptコードチェッカーを使用してコードを実行します。;明らかなのは、行の終わりにセミコロン（）がないことです。それらを追加します。

最大のものはこのセグメントです：

$("#btnNextPhotos").click(function(){
    $('#mdlPhotos').modal('hide'); 
        resizeAndPopulateVariables();
        doAjaxRequest();
    }); // <--- what is this closing?
});

の後に.modal()終了があるため、コールバック関数を使用して呼び出すつもりだったようです。私はこの関数に精通していませんが、おそらく次のようなコールバックが必要です。)}doAjaxRequest().modal()

$("#btnNextPhotos").click(function(){
    $('#mdlPhotos').modal('hide', function () { 
        resizeAndPopulateVariables();
        doAjaxRequest();
    }); 
});

または、余分な終了演算子を削除する必要があります。

$("#btnNextPhotos").click(function(){
    $('#mdlPhotos').modal('hide'); 
    resizeAndPopulateVariables();
    doAjaxRequest();
});
于 2013-03-03T19:57:16.343 に答える
1

ここでの問題が Ajax cal である可能性があるかどうかはよくわかりません。プラグイン Ajaxを使用しないでください。私はこれが憂鬱に聞こえることを知っています。

これはとても簡単なサンプルです：

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 

    <script> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
            // bind 'myForm' and provide a simple callback function 
            $('#myForm').ajaxForm(function() { 
                alert("Thank you for your comment!"); 
            }); 
        }); 
    </script> 
</head>
于 2013-03-03T07:44:48.580 に答える