JQuery Ajax调用 - 间歇性图像显示问题（Chrome和FF）（一些PHP和MySQL）

Question

I use JQuery to pull form data and send an XMLHttpRequest(); I open the request using the POST method. The image and supplementary data are passed to a PHP script that handles, resizes, and saves it to the server. The file name and location of the image are updated in the relevant fields in a MySQL database. On the uploadComplete(evt) I attempt to display the newly uploaded image by calling .load() to populate a div.

80% of the time, the image displays correctly when the content is loaded into the div. 20% of the time, the image is displayed as if the link provided were a broken link. However, if I refresh the page, the image is displayed correctly.

Why does the image sometimes show as a broken link?

How do I stop it from doing this?

* EDIT

    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.");
    }

Answer 1

It seems that you are trying to show the new image before the PHP script in fact create and save the new image.

Instead of calling the javascript function that loads the new image on the "uploadComplete", use the "success" param (if you are using jQuery $.ajax function) that call the function that loads the new image.

The "success" function is called only when the server finish processing the request (when the PHP script finish editing and saving the image) and not when the new image params were succesfully sent to the server.