js實現(xiàn)圖片上傳預(yù)覽
2018-07-20 來源：open-open
圖片裁剪，預(yù)覽，上傳保存的功能。這個功能一般用于會員中心的圖片。
<!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]){
//火狐下，直接設(shè)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");
//必須設(shè)置初始大小
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上傳縮略圖
<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);
//縮略圖
//讀取已經(jīng)上傳圖片
$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;
}
//創(chuàng)建空白新圖片
$newimage=imagecreatetruecolor($width, $height);
//copy源圖片內(nèi)容 copy新圖片
imagecopyresized($newimage, $image, 0,0, 0,0, $width, $height, $w, $h);
$filename="upload/s_".$file;
imagejpeg($newimage,$filename);
php圖片上傳
<?php
header('content-type:text/html;charset=gbk');
/******************************************************************************
參數(shù)說明:
$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; //是否生成預(yù)覽圖(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 "同名文件已經(jīng)存在了";
exit;
}
if(!move_uploaded_file ($filename, $destination))
{
echo "移動文件出錯";
exit;
}
$pinfo=pathinfo($destination);
$fname=$pinfo[basename];
echo " <font color=red>已經(jīng)成功上傳</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>圖片預(yù)覽:<br>";
echo "<img src=\"".$destination."\" width=".($image_size[0]*$imgpreviewsize)." height=".($image_size[1]*$imgpreviewsize);
echo " alt=\"圖片預(yù)覽:\r文件名:".$destination."\r上傳時間:\">";
}
}
?>
</body>
</html> 來自：http://blog.csdn.net/phpfenghuo/article/details/21080609
版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。
上一篇:ASP.NET加密解密
下一篇: php獲取客戶端IP地址的幾種方法
最新資訊
熱門推薦