龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > php编程 >

php js实现图片上传预览

时间:2017-06-26 15:17来源:网络整理 作者:网络 点击:
分享到:
js实现图片上传预览 图片裁剪,预览,上传保存的功能。这个功能一般用于会员中心的图片。下面代码为js实现图片上传预览[代码片段(49行)] php上传缩略图 [代码片段(57行)] php图片上传

图片裁剪,预览,上传保存的功能。这个功能一般用于会员中心的图片。

下面代码为js实现图片上传预览```javascript <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
 php上传缩略图 
```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);  
精彩图集

赞助商链接