js实现图片上传预览

发布时间:2020-02-14 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了js实现图片上传预览脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

下面是脚本之家 jb51.cc 通过网络收集整理的代码片段。

脚本之家小编现在分享给大家,也给大家做个参考。

图片裁剪,预览,上传保存的功能。这个功能一般用于会员中心的图片。 下面代码为js实现图片上传预览
    <!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>  

    <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,$width,$height,$w,$h);  
    $filename="upload/s_".$file;  
    imagejpeg($newimage,$filename);  

    <?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);  
            $black=imagecolorallocate($nimage,0);  
            $red=imagecolorallocate($nimage,0);  
            imagefill($nimage,$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,$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,$waterstring,$black);  
                break;  
                case 2:   //加水印图片  
                $simage1 =imagecreatefromgif("xplore.gif");  
                imagecopy($nimage,$simage1,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>  
来自:http://blog.csdn.net/phpfenghuo/article/details/21080609

以上是脚本之家(jb51.cc)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

总结

以上是脚本之家为你收集整理的js实现图片上传预览全部内容,希望文章能够帮你解决js实现图片上传预览所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。

脚本之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ” ,选择关注!
精选程序员所需精品干货内容!

标签: