0

我使用 JQuery 来提取表单数据并发送一个我使用该方法XMLHttpRequest(); 打开请求。POST图像和补充数据被传递到一个 PHP 脚本，该脚本处理、调整大小并将其保存到服务器。图像的文件名和位置在 MySQL 数据库的相关字段中更新。在uploadComplete(evt)我尝试通过调用.load()填充 div 来显示新上传的图像。

80% 的情况下，当内容加载到 div 中时，图像会正确显示。在 20% 的情况下，图像显示就好像所提供的链接是断开的链接一样。但是，如果我刷新页面，图像会正确显示。

为什么图像有时显示为断开的链接？

我该如何阻止它这样做？

*编辑

    function loadFile() 
{
    var fileURL = $( "#url" ).val();
    if(fileURL == "")
    {
        // Retrieve the FileList object from the referenced element ID
        var myFileList = document.getElementById('upload_file').files;

        // Grab the first File Object from the FileList
        var myFile = myFileList[0];

        // Set some variables containing the three attributes of the file
        var myFileName = myFile.name;
        var myFileSize = myFile.size;
        var myFileType = myFile.type;

        // Let's upload the complete file object
        imageUpdate(myFile);
    }
    else
    {
        var newinfo = new Array();
        newinfo[0] = "URL";
        newinfo[1] = fileURL;
        imageUpdate(newinfo);
    }
}

    function imageUpdate(newinfo)
    {
        var formData = new FormData(); // data object
        // extra
        var stylistID = $( "#editThisStylist" ).data('stylistid');  // Grab stlyistID
        formData.append("stylistID", stylistID);

        // IF URL
        if ( newinfo[0] == "URL" ){
            formData.append("type", "URL"); 
            formData.append("url", newinfo[1]);
        }
        // IF LOCAL FILE
        else
        {
            formData.append("type", "FILE");
            // Append our file to the formData object
            // Notice the first argument "file" and keep it in mind
            formData.append('my_uploaded_file', newinfo);
        }

            // Create our XMLHttpRequest Object
            var xhr = new XMLHttpRequest();

            xhr.addEventListener("progress", updateProgress, false);
            xhr.addEventListener("load", uploadComplete, false);
            xhr.addEventListener("error", transferFailed, false);
            xhr.addEventListener("abort", transferCanceled, false);

            // Open our connection using the POST method
            xhr.open("POST", "u/stylist_avatar.php", true);

            // Request headers
            //xhr.setRequestHeader("Content-Type", formData.files[0].type);

            // Send the file
            xhr.send(formData);
    }

    // While xhr is in progress
    function updateProgress(oEvent)
    {  
        if (evt.lengthComputable) 
        {  
            //var progressBar = document.getElementById("progressBar");
            //var percentComplete = oEvent.loaded / oEvent.total;
            //progressBar.value = percentComplete;
        } 
        else 
        {
            // unable to compute progress information since the total size is unkown
        }
    }

    // onComplete
    function uploadComplete(evt) {
        //alert("The transfer is complete.");
        resetForm($('#uploadImageForm'));

        var stylistID = $( "#editThisStylist" ).data('stylistid');  // Grab stlyistID
        $('#uploadImageModal').modal('toggle');

        // Reload right div
        $( "#editStylistRight" ).load( "u/stylist_lookup.php", {stylistID: stylistID}, function (){});
        // Reload stylist list
        var index = 0;
        var numRecords = 10;
        $( "#stylistTable" ).load( "u/stylist_lookuptable.php", {start: index, end: numRecords}, function (){});
    }

    function transferFailed(evt) {
        alert("An error occurred while transferring the file.");
    }

    function transferCanceled(evt) {
        alert("The transfer has been canceled by the user.");
    }
4

2 回答 2

0

这是由于图像缓存而发生的，强制浏览器每次都获取图像。在 uploadcomplete 事件中使用它

var timestamp = new Date();
timestamp   = timestamp.getTime();
imageurl+'?t='+timestamp;
于 2013-11-12T04:30:57.617 回答
0

似乎您正试图在 PHP 脚本实际创建和保存新图像之前显示新图像。

不要调用在“uploadComplete”上加载新图像的 javascript 函数，而是使用调用加载新图像的函数的“成功”参数（如果您使用的是 jQuery $.ajax 函数）。

“成功”函数仅在服务器完成处理请求（PHP 脚本完成编辑和保存图像）时调用，而不是在新图像参数成功发送到服务器时调用。

于 2013-11-12T04:22:19.283 回答