Question

我编写了以下代码来从网络浏览器上传文件。它适用于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()
    });

Answer 1

我真的不知道你的问题可能是你的Ajax cal，所以为什么不使用plugin 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>

Answer 2

您的代码中存在许多语法错误。我不确定它在Firefox中是如何运行的。通过Javascript代码检查器运行代码，例如JSLint。显而易见的是，你的行末端没有分号（;）。添加它们。

最大的一个是这个部分：

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

Ajax文件上传表单适用于Firefox，但不适用于Safari

2 个答案: