[php图片上传代码]PHP+Ajax图片上传并且无刷新生成缩略图预览

【www.bbyears.com--php常用代码】

XML/HTML Code

 
JavaScript Code

<script type="text/javascript">  
$(document).ready(function() {   
    var options = {   
            target:   '#output',   // target element(s) to be updated with server response   
            beforeSubmit:  beforeSubmit,  // pre-submit callback   
            success:       afterSuccess,  // post-submit callback   
            resetForm: true        // reset the form after successful submit   
        };   
          
     $('#MyUploadForm').submit(function() {   
            $(this).ajaxSubmit(options);              
            // always return false to prevent standard browser submit and page navigation   
            return false;   
        });   
});   
  
function afterSuccess()  
{  
    $('#submit-btn').show(); //hide submit button  
    $('#loading-img').hide(); //hide submit button  
  
}  
  
//function to check file size before uploading.  
function beforeSubmit(){  
    //check whether browser fully supports all File API  
   if (window.File && window.FileReader && window.FileList && window.Blob)  
    {  
          
        if( !$('#imageInput').val()) //check empty input filed  
        {  
            $("#output").html("Are you kidding me?");  
            return false  
        }  
          
        var fsize = $('#imageInput')[0].files[0].size; //get file size  
        var ftype = $('#imageInput')[0].files[0].type; // get file type  
          
  
        //allow only valid image file types   
        switch(ftype)  
        {  
            case 'image/png': case 'image/gif': case 'image/jpeg': case 'image/pjpeg':  
                break;  
            default:  
                $("#output").html(""+ftype+" Unsupported file type!");  
                return false  
        }  
          
        //Allowed file size is less than 1 MB (1048576)  
        if(fsize>1048576)   
        {  
            $("#output").html(""+bytesToSize(fsize) +" Too big Image file! Please reduce the size of your photo using an image editor.");  
            return false  
        }  
                  
        $('#submit-btn').hide(); //hide submit button  
        $('#loading-img').show(); //hide submit button  
        $("#output").html("");    
    }  
    else  
    {  
        //Output error to older unsupported browsers that doesn't support HTML5 File API  
        $("#output").html("Please upgrade your browser, because your current browser lacks some new features we need!");  
        return false;  
    }  
}  
  
//function to format bites bit.ly/19yoIPO  
function bytesToSize(bytes) {  
   var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; 
   if (bytes == 0) return '0 Bytes'; 
   var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024))); 
   return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];  
}  
  
</script>

 
processupload.php

PHP Code

';  
        echo '';  
        echo '';  
        echo '';  
        echo '';  
  
        /* 
        // Insert info into database table! 
        mysql_query("INSERT INTO myImageTable (ImageName, ThumbName, ImgPath) 
        VALUES ($DestRandImageName, $thumb_DestRandImageName, 'uploads/')"); 
        */  
  
    }else{  
        die('Resize Error'); //output error  
    }  
}  
  
  
// This function will proportionally resize image   
function resizeImage($CurWidth,$CurHeight,$MaxSize,$DestFolder,$SrcImage,$Quality,$ImageType)  
{  
    //Check Image size is not 0  
    if($CurWidth <= 0 || $CurHeight <= 0)   
    {  
        return false;  
    }  
      
    //Construct a proportional size of new image  
    $ImageScale         = min($MaxSize/$CurWidth, $MaxSize/$CurHeight);   
    $NewWidth           = ceil($ImageScale*$CurWidth);  
    $NewHeight          = ceil($ImageScale*$CurHeight);  
    $NewCanves          = imagecreatetruecolor($NewWidth, $NewHeight);  
      
    // Resize Image  
    if(imagecopyresampled($NewCanves, $SrcImage,0, 0, 0, 0, $NewWidth, $NewHeight, $CurWidth, $CurHeight))  
    {  
        switch(strtolower($ImageType))  
        {  
            case 'image/png':  
                imagepng($NewCanves,$DestFolder);  
                break;  
            case 'image/gif':  
                imagegif($NewCanves,$DestFolder);  
                break;            
            case 'image/jpeg':  
            case 'image/pjpeg':  
                imagejpeg($NewCanves,$DestFolder,$Quality);  
                break;  
            default:  
                return false;  
        }  
    //Destroy image, frees memory     
    if(is_resource($NewCanves)) {imagedestroy($NewCanves);}   
    return true;  
    }  
  
}  
  
//This function corps image to create exact square images, no matter what its original size!  
function cropImage($CurWidth,$CurHeight,$iSize,$DestFolder,$SrcImage,$Quality,$ImageType)  
{      
    //Check Image size is not 0  
    if($CurWidth <= 0 || $CurHeight <= 0)   
    {  
        return false;  
    }  
      
    //abeautifulsite.net has excellent article about "Cropping an Image to Make Square bit.ly/1gTwXW9  
    if($CurWidth>$CurHeight)  
    {  
        $y_offset = 0;  
        $x_offset = ($CurWidth - $CurHeight) / 2;  
        $square_size    = $CurWidth - ($x_offset * 2);  
    }else{  
        $x_offset = 0;  
        $y_offset = ($CurHeight - $CurWidth) / 2;  
        $square_size = $CurHeight - ($y_offset * 2);  
    }  
      
    $NewCanves  = imagecreatetruecolor($iSize, $iSize);   
    if(imagecopyresampled($NewCanves, $SrcImage,0, 0, $x_offset, $y_offset, $iSize, $iSize, $square_size, $square_size))  
    {  
        switch(strtolower($ImageType))  
        {  
            case 'image/png':  
                imagepng($NewCanves,$DestFolder);  
                break;  
            case 'image/gif':  
                imagegif($NewCanves,$DestFolder);  
                break;            
            case 'image/jpeg':  
            case 'image/pjpeg':  
                imagejpeg($NewCanves,$DestFolder,$Quality);  
                break;  
            default:  
                return false;  
        }  
    //Destroy image, frees memory     
    if(is_resource($NewCanves)) {imagedestroy($NewCanves);}   
    return true;  
  
    }  
        
}

以上就是我们要介绍的ajax无刷新图片上传功能了，其实就是通过异步模式提交给php然后由php上传图片并且生成小图返回给指定的id的htm元素模块即可。

本文来源：http://www.bbyears.com/jiaocheng/84219.html