0

我编写了以下代码来从网络浏览器上传文件。它适用于 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 中运行的。通过 Javascript 代码检查器（如JSLint ）运行您的代码。显而易见的是，您的行尾没有分号 ( ;)。添加它们。

最大的一个是这个部分：

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

看起来您打算.modal()使用回调函数调用，因为您有一个结束)}after 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 回答