js實現圖片上傳預覽

jopen 9年前發布 | 14K 次閱讀 PHP 圖片上傳

圖片裁剪,預覽,上傳保存的功能。這個功能一般用于會員中心的圖片。

下面代碼為js實現圖片上傳預覽

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<body>
<input type=file name="doc" id="doc" onchange="javascript:setImagePreview();">
<p>
<div id="localImag"><img id="preview" width=-1 height=-1 style="diplay:none" /></div>
</p>
<script>
function setImagePreview() {
var docObj=document.getElementById("doc");

        var imgObjPreview=document.getElementById("preview");  
                if(docObj.files &&    docObj.files[0]){  
                        //火狐下,直接設img屬性  
                        imgObjPreview.style.display = 'block';  
                        imgObjPreview.style.width = '300px';  
                        imgObjPreview.style.height = '120px';                      
                        //imgObjPreview.src = docObj.files[0].getAsDataURL();  


      //火狐7以上版本不能用上面的getAsDataURL()方式獲取,需要一下方式    
      imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);  


                }else{  
                        //IE下,使用濾鏡  
                        docObj.select();  
                        var imgSrc = document.selection.createRange().text;  
                        var localImagId = document.getElementById("localImag");  
                        //必須設置初始大小  
                        localImagId.style.width = "300px";  
                        localImagId.style.height = "120px";  
                        //圖片異常的捕捉,防止用戶修改后綴來偽造圖片  
try{  
                                localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";  
                                localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;  
                        }catch(e){  
                                alert("");  
                                return false;  
                        }  
                        imgObjPreview.style.display = 'none';  
                        document.selection.empty();  
                }  
                return true;  
        }  
</script>  
</body>  

</html>  </pre> 


php上傳縮略圖

    <form method="post" action="suo_do.php"  enctype="multipart/form-data">
<input type="file" name="pic" />
<input type="submit" value="上傳1" />
</form>

<?php  
header("content-type:text/html;charset=gbk");  
ini_set("date.timezone","Asia/chong");  
//判斷文件是否為空  
if(empty($_FILES)){  
    echo"上傳文件過大";  
    exit;  
}  
//判斷文件上傳是否有錯誤  
if($_FILES['pic']['error']){  
    echo "上傳文件";  
    exit;  
}  
//判斷文件類型是否非法獲取文件后綴  
$allowtype=array("jpg","png","jpeg","gif");  
$a=explode('.',$_FILES['pic']['name']);  
$index=count($a)-1;  
$ex=strtolower($a[$index]);  
if(!in_array($ex,$allowtype)){  
    echo "上傳文件非法";  
    exit;  
}  
$file=date('YmdHis').rand().".".$ex;  
$src=$_FILES['pic']['tmp_name'];  
$des="upload/".$file;  
$rs=move_uploaded_file($src,$des);  


//縮略圖  
//讀取已經上傳圖片  
$image=imagecreatefromjpeg($des);  
$a=getimagesize($des);  
$w=$a[0];  
$h=$a[1];  
if($w>$h){  
    $width=300;  
    $height=$width/$w*$h;  
}else if($w<$h){  
    $height=300;  
    $width=$height/$h*$w;  
}else{  
    $width=300;  
    $height=300;  
}  
//創建空白新圖片  
$newimage=imagecreatetruecolor($width, $height);  
//copy源圖片內容 copy新圖片  
imagecopyresized($newimage, $image, 0,0, 0,0, $width, $height, $w, $h);  
$filename="upload/s_".$file;  
imagejpeg($newimage,$filename);  </pre> 


php圖片上傳

    <?php
header('content-type:text/html;charset=gbk');
/**

參數說明: 
$max_file_size  : 上傳文件大小限制, 單位BYTE 
$destination_folder : 上傳文件路徑 
$watermark   : 是否附加水印(1為加水印,其他為不加水印); 

使用說明: 
1. 將PHP.INI文件里面的"extension=php_gd2.dll"一行前面的;號去掉,因為我們要用到GD庫; 
2. 將extension_dir =改為你的php_gd2.dll所在目錄; 
******************************************************************************/  

//上傳文件類型列表  
$uptypes=array(  
    'image/jpg',  
    'image/jpeg',  
    'image/png',  
    'image/pjpeg',  
    'image/gif',  
    'image/bmp',  
    'image/x-png'  
);  

$max_file_size=2000000;     //上傳文件大小限制, 單位BYTE  
$destination_folder="uploadimg/"; //上傳文件路徑  
$watermark=1;      //是否附加水印(1為加水印,其他為不加水印);  
$watertype=1;      //水印類型(1為文字,2為圖片)  
$waterposition=1;     //水印位置(1為左下角,2為右下角,3為左上角,4為右上角,5為居中);  
$waterstring="這是水印";  //水印字符串  
$waterimg="xplore.gif";    //水印圖片  
$imgpreview=1;      //是否生成預覽圖(1為生成,其他為不生成);  
$imgpreviewsize=1/2;    //縮略圖比例  
?>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />  
<title>ZwelL圖片上傳程序</title>  
<style type="text/css">  
<!--  
body  
{  
     font-size: 9pt;  
}  
input  
{  
     background-color: #66CCFF;  
     border: 1px inset #CCCCCC;  
}  
-->  
</style>  
</head>  

<body>  
<form enctype="multipart/form-data" method="post" name="upform">  
  上傳文件:  
  <input name="upfile" type="file">  
  <input type="submit" value="上傳"><br>  
  允許上傳的文件類型為:<?=implode(', ',$uptypes)?>  
</form>  

<?php  
if ($_SERVER['REQUEST_METHOD'] == 'POST')  
{  
    if (!is_uploaded_file($_FILES["upfile"][tmp_name]))  
    //是否存在文件  
    {  
         echo "圖片不存在!";  
         exit;  
    }  

    $file = $_FILES["upfile"];  
    if($max_file_size < $file["size"])  
    //檢查文件大小  
    {  
        echo "文件太大!";  
        exit;  
    }  

    if(!in_array($file["type"], $uptypes))  
    //檢查文件類型  
    {  
        echo "文件類型不符!".$file["type"];  
        exit;  
    }  

    if(!file_exists($destination_folder))  
    {  
        mkdir($destination_folder);  
    }  

    $filename=$file["tmp_name"];  
    $image_size = getimagesize($filename);  
    $pinfo=pathinfo($file["name"]);  
    $ftype=$pinfo['extension'];  
    $destination = $destination_folder.time().".".$ftype;  
    if (file_exists($destination) && $overwrite != true)  
    {  
        echo "同名文件已經存在了";  
        exit;  
    }  

    if(!move_uploaded_file ($filename, $destination))  
    {  
        echo "移動文件出錯";  
        exit;  
    }  

    $pinfo=pathinfo($destination);  
    $fname=$pinfo[basename];  
    echo " <font color=red>已經成功上傳</font><br>文件名:  <font color=blue>".$destination_folder.$fname."</font><br>";  
    echo " 寬度:".$image_size[0];  
    echo " 長度:".$image_size[1];  
    echo "<br> 大小:".$file["size"]." bytes";  

    if($watermark==1)  
    {  
        $iinfo=getimagesize($destination,$iinfo);  
        $nimage=imagecreatetruecolor($image_size[0],$image_size[1]);  
        $white=imagecolorallocate($nimage,255,255,255);  
        $black=imagecolorallocate($nimage,0,0,0);  
        $red=imagecolorallocate($nimage,255,0,0);  
        imagefill($nimage,0,0,$white);  
        switch ($iinfo[2])  
        {  
            case 1:  
            $simage =imagecreatefromgif($destination);  
            break;  
            case 2:  
            $simage =imagecreatefromjpeg($destination);  
            break;  
            case 3:  
            $simage =imagecreatefrompng($destination);  
            break;  
            case 6:  
            $simage =imagecreatefromwbmp($destination);  
            break;  
            default:  
            die("不支持的文件類型");  
            exit;  
        }  

        imagecopy($nimage,$simage,0,0,0,0,$image_size[0],$image_size[1]);  
        imagefilledrectangle($nimage,1,$image_size[1]-15,80,$image_size[1],$white);  

        switch($watertype)  
        {  
            case 1:   //加水印字符串  
            imagestring($nimage,2,3,$image_size[1]-15,$waterstring,$black);  
            break;  
            case 2:   //加水印圖片  
            $simage1 =imagecreatefromgif("xplore.gif");  
            imagecopy($nimage,$simage1,0,0,0,0,85,15);  
            imagedestroy($simage1);  
            break;  
        }  

        switch ($iinfo[2])  
        {  
            case 1:  
            //imagegif($nimage, $destination);  
            imagejpeg($nimage, $destination);  
            break;  
            case 2:  
            imagejpeg($nimage, $destination);  
            break;  
            case 3:  
            imagepng($nimage, $destination);  
            break;  
            case 6:  
            imagewbmp($nimage, $destination);  
            //imagejpeg($nimage, $destination);  
            break;  
        }  

        //覆蓋原上傳文件  
        imagedestroy($nimage);  
        imagedestroy($simage);  
    }  

    if($imgpreview==1)  
    {  
    echo "<br>圖片預覽:<br>";  
    echo "<img src=\"".$destination."\" width=".($image_size[0]*$imgpreviewsize)." height=".($image_size[1]*$imgpreviewsize);  
    echo " alt=\"圖片預覽:\r文件名:".$destination."\r上傳時間:\">";  
    }  
}  
?>  
</body>  
</html>  </pre> 來自:http://blog.csdn.net/phpfenghuo/article/details/21080609


 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!