显示图片上传的缩略图AJAX/PHP

Posted 2021-02-25

This is how you can add a file/image upload tool to your forms and have AJAX store the file with php and return a thumbnailed version to the user for display on the form. Nice.

/*******************************************************************
  JS - PREVIEW IMAGE
BY JQUERY4U - http://jquery4u.com
article: http://www.jquery4u.com/tutorials/thumbnail-image-upload-ajaxphp/
*******************************************************************/
function previewImage(str) {
    //alert(str);
    ajaxFileUpload();
}
 
function removeImage() {
    //alert("Image Removed");
    $("#imagethumb").html('');
    $("#removebutton").hide();
    $("#supportedfiles").show();
    var tid = $("Input[name=allocatedimagename]").val();
    //remove the temporary image files created by the image
    $.get("/php/deleteblogthumb.php",{thumb_name: tid, type: 'js-<a href="http://blogoola.com" title="Submit your blog">blog</a>'}, function(data){
        //alert(data);
    });
 
    $("Input[name=allocatedimagename]").val('');
    $("Input[name=blogpic]").val('');
}
 
function ajaxFileUpload() {
    //starting setting some animation when the ajax starts and completes
    $("#loading")
    .ajaxStart(function(){
        $(this).show();
    })
    .ajaxComplete(function(){
        $(this).hide();
    });
 
    /*
        prepareing ajax file upload
        url: the url of script file handling the uploaded files
                    fileElementId: the file type of input element id and it will be the index of  $_FILES Array()
        dataType: it support json, xml
        secureuri:use secure protocol
        success: call back function when the ajax complete
        error: callback function when the ajax failed
 
            */
    $.ajaxFileUpload
    (
        {
            url:'doajaxfileupload.php',
            secureuri:false,
            fileElementId:'blogpic',
            dataType: 'json',
            success: function (data, status)
            {
                if(typeof(data.error) != 'undefined')
                {
                    if(data.error != '')
                    {
                        alert(data.error);
                    }else
                    {
                        //alert(data.loc);
                        //show the preview of image
                        var imageloc = '<span class="normaltext">Your uploaded image: <samp>'+data.name+'('+data.size+'kb)'+'</samp><br><img class="small blogthumb" src="'+data.loc+'" height="40" width="40" alt="your uploaded image"></span>';
                        $("#imagethumb").html(imageloc); //add
                        $("#removebutton").show();
                        $("#supportedfiles").hide();
                        //save the allocated image name for use with the process signup script
                        $("Input[name=allocatedimagename]").val(data.loc);
                    }
                }
            },
            error: function (data, status, e)
            {
                alert(e);
            }
        }
    )
 
    return false;
 
}