php上传图片预览
1.先创建一个file表单域，我们需要用它来浏览本地文件。
<form name="form1" id="form1" method="post" action="upload.php">
<input type="file" name="file1" id="file1" />
</form>
2.试下效果：
判断文件类型：
当用户选择了一个图片文件时，希望他能马上看到这张图片的缩略图，以便他能确认没有把自己的光屁股照片当作头像传到服务器上^_^。
在预览之前还得先判断一下用户选择的是不是一个图像文件，如果他想用一个.rar文件做头像的话我们也需要礼貌地提醒一下。
<form name="form2" id="form2" method="post" action="upload.php">
<input type="file" name="file2" id="file2"
onchange="preview()" />
</form>
javascript函数实现，注意使用DOM方法getElementById来访问对象。不要再使用form
和input的name属性来访问对象了，只有IE才这么干。<script type="text/javascript">
function preview2(){
var x = document.getElementById("file2");
if(!x || !x.value) return;
if(x.value.indexOf(".jpg")<0
&& x.value.indexOf(".jpeg")<0
&& x.value.indexOf(".gif")<0){
alert("您选择的似乎不是图像文件。");
}else{
alert("通过");
}
}
</script>
3.试下效果：
这里有一个问题，如果用户选择了名为“fake.jpg.txt”的文件，这段脚本仍旧会认为这是一个合法的图像文件。一个可行的解决方案是先 把文件名转换成小写，再取文件路径的最后4到5位，判断一下文件的扩展名是否确为支持的图像文件扩展名。不过这种方案略显笨拙，也没有什么美感可言， 我们换一种方案：用“正则表达式”来判断文件扩展名。
<script type="text/javascript">
function preview3(){
var x = document.getElementById("file3");
if(!x || !x.value) return;
var patn = /\.jpg$|\.jpeg$|\.gif$/i;
if(patn.test(x.value)){
alert("通过");
}else{
alert("您选择的似乎不是图像文件。");
}
}
</script>
4.看看效果（可以自己创建一个“fake.jpg.txt”文件试试）：
回到这段脚本上来，即使你还看不懂正则表达式那两行，但整段脚本的美感还是很明显的：简洁、直接、语义流畅，这与Web标准关于XHTML的要求是一致的，与Web设计师或开发者天生的“完美”主义也是一致的。
jjww一大段之后，转入重点——预览图片
预览功能的基本设计思路是很清晰的：创建一个img元素，再把文件域的value值赋值给img
元素的src属性。<form name="form4" id="form4" method="post" action="#">
<input type="file" name="file4" id="file4"
onchange="preview4()" />
<img id="pic4" src="http://blog.163.com/lgh_2002/blog/" alt="图片在此显示" width="120"/>
</form>
<script type="text/javascript">
function preview4(){
var x = document.getElementById("file4");
var y = document.getElementById("pic4");
if(!x || !x.value || !y) return;
var patn = /\.jpg$|\.jpeg$|\.gif$/i;
if(patn.test(x.value)){
y.src = "file://localhost/" + x.value;
}else{
alert("您选择的似乎不是图像文件。");
}
}
</script>
5.试下效果：
如果用的是Firefox（或Opera），可能会发现什么也没有发生。是的，很不幸Firefox的安全策略不允许显示一个用户的本地 图像文件。不知道为什么要这么做，个人觉得图像文件并不会造成严重的安全性问题。即使是不久前比较热门的那个会引起Windows崩溃的jpeg文 件，要显示它的前提条件是用户自己选择了这个文件或者你知道这个文件在用户硬盘上的准确路径。所以我想这种策略很可能来自于一个“懒惰”的开发人员，并 不想多写一些程序来区分这个本地文件是一个图像文件还是一个恶意文件，Firefox对安全性的要求让他们有些过于敏感了。
让Firefox显示本地文件的唯一办法就是修改它的默认安全策略：
在Firefox的地址栏中输入“about:config”
继续输入“security.checkloari”
双击下面列出来的一行文字，把它的值由true改为false
然后你可以再试试上面预览，everything works well！可惜的是并不能要求所有的用户都去修改这个值（更不用说修改的过程还挺麻烦），所以毫无意义。我们能做的也许就是接受Firefox不能预览本地图片这种“可笑”的局面。
用DOM来创建对象
在上面的XHTML代码中，为了预览图片，事先加入了一个没有设置src的img对象。除去不美观、代码冗余之外，如果用户浏览器不支持 Javascript，不仅无法使用这个功能，还要接受页面上一个永远不会显示出来的破图。要解决这个问题，就需要在“运行时”再生成这个img对 象，途径还是DOM。
<form name="form5" id="form5" method="post" action="#">
<input type="file" name="file5" id="file5"
onchange="preview5()"/>
</form>
<script type="text/javascript">
function preview5(){
var x = document.getElementById("file5");
if(!x || !x.value) return;
var patn = /\.jpg$|\.jpeg$|\.gif$/i;
if(patn.test(x.value)){
var y = document.getElementById("img5");
if(y){
y.src = 'file://localhost/' + x.value;
}else{
var img=document.createElement('img');
img.setAttribute('src','file://localhost/'+x.value);
img.setAttribute('width','120');
img.setAttribute('height','90');
img.setAttribute('id','img5');
document.getElementById('form5').appendChild(img);
}
}else{
alert("您选择的似乎不是图像文件。");
}
}
</script>
6.试下效果：
这样就相对比较完美了。DOM和正则表达式一样，都是“包你不悔”的实 用技术，如果你希望更多了解、深入学习、或者顺利实践Web标准，DOM是不可或缺的。从本人最近的体会来说，Javascript+DOM+CSS蕴 藏着强大的能量，就看怎么释放它了。
7.最后帖上JQUERY的上传预览代码：
de><html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://blog.163.com/lgh_2002/blog/jquery.js"></script>
<script language="javascript">
$(function(){
var ei = $("#large");
ei.hide();
$("#img1").mousemove(function(e){
ei.css({top:e.pageY,left:e.pageX}).html('<img style="border:1px solid gray;" src="http://blog.163.com/lgh_2002/blog/' + this.src + '" />').show();
}).mouseout( function(){
ei.hide("slow");
})
$("#f1").change(function(){
$("#img1").attr("src","file:///"+$("#f1").val());
})
});
</script>
<style type="text/css">
#large{position:absolute;display:none;z-index:999;}
</style>
</head>
<body>
<form name="form1" id="form1">
<div id="demo">
<input id="f1" name="f1" type="file" />
<img id="img1" width="60" height="60">
</div>
<div id="large"></div>
</form>
</body>
</html>de>
B. 用php上传图片怎么做
上传图片原理：首先判断文件类型是否为图片格式，若是则上传文件，然后重命名文件(一般都是避免上传文件重名，现在基本上都是以为时间来命名)，接着把文件上传到指定目录，成功上传后输出上传图片的预览。
1.首先我们开始判断文件类型是否为图片类型用到的函数
{
strrchr:查找字符串在另一个字符串中最后一次出现的位置，并返回从该位置到字符串结尾的所有字符。
substr: 取部份字符串。
$HTTP_POST_FILES['file']['name']:获取当前上传的文件全称。
}
图片类型就是“.”后面的字符(比如：一个文件名称为XXX.JPG 那么它的类型就是“.”后面的JPG)。 我们可以用PHP中的函数来截取上传者文件名字的。我们来写个获取文件类型的函数
<?
function type()
{
return substr(strrchr($HTTP_POST_FILES['file']['name'],'.'),1);
}
?>
2.若是则上传文件，然后重命名文件用到的函数
{ strtolower:把字符串的字母全部转换为小写字母. in_array： 函数在数组中搜索给定的值。 implode：函数把数组元素组合为一个字符串 random:随机生成的数 $_FILES['userfile']['name']:上传文件名称 $uploaddir：自己定义的变量。比如在同一个文件夹里面，你想把上传的文件放到这个文件夹的FILE文件夹下，你可以这样定义$uploaddir="./file/"；注意写法 } 这边会出现很多问题，第一先写一个能上传类型的数组。第二判断文件合法性。第三给文件重名。*(这边判断文件大小就不写了)先定义允许上传文件的类型数组：$type=array("jpg","gif","bmp","jpeg","png");第二用一个IF。。else。。写一个判断文件合法性的控制流语句。if(!in_arry(strtolower(type()),$type))//如果不存在能上传的类型 { $text=implode('.',$type); echo "您只能上传以下类型文件: ",$text,"<br>"; } 下面就是给他们重新命名了,else { $filename=explode(".",$_FILES['userfile']['name']);//把上传的文件名以“.”好为准做一个数组。 $time=date("m-d-H-i-s");//去当前上传的时间 $filename[0]=$time;//取文件名t替换 name=implode(".",$filename); //上传后的文件名 $uploadfile=$uploaddir.$name;//上传后的文件名地址 } 3.最后把文件上传到指定目录，成功上传后输出上传图片的预览用到的函数{ move_uploaded_file：执行上传文件 } if(move_uploaded_file($_FILES['userfile']['tmp_name'],$uploadfile)) { echo "<center>您的文件已经上传完毕 上传图片预览: </center><br><center><img src='$uploadfile'></center>"; echo"<br><center><a href='javascrīpt:history.go(-1)'>继续上传</a></center>"; } else { echo"传输失败！"; }
C. php图片上传和浏览
主要有两种：
1是存在数据库，以数据的形式，浏览的时候用PHP程序从数据库读取出来，然后输出给客户。
2是存在文件里+数据库里保存文件的路径，浏览的时候把图片文件的路径放在HTML文件里发出去。
代码会非常多，免费帮你写是不现实的。
D. jquery php图片上传预览功能
其实这个的主要部分并不是一个jquery，但是必须使用到
php程序部分，也只需要这个一个php程序就可以了 ！
E. php中图片上传后如何实现预览的
上传之后跳转回来然后读取最后一次保存到数据库的图片地址，显示一个<img/>就可以了
F. 用php写一个上传图片的程序 谢谢
<?php
$uptypes=array('image/jpg', //上传文件类型列表
'image/jpeg',
'image/png',
'image/pjpeg',
'image/gif',
'image/bmp',
'application/x-shockwave-flash',
'image/x-png');
$max_file_size=5000000; //上传文件大小限制, 单位BYTE
$destination_folder="upload/"; //上传文件路径
$watermark=0; //是否附加水印(1为加水印,其他为不加水印);
$watertype=1; //水印类型(1为文字,2为图片)
$waterposition=1; //水印位置(1为左下角,2为右下角,3为左上角,4为右上角,5为居中);
$waterstring="newphp.site.cz"; //水印字符串
$waterimg="xplore.gif"; //水印图片
$imgpreview=1; //是否生成预览图(1为生成,其他为不生成);
$imgpreviewsize=1/2; //缩略图比例
?>
<html>
<head>
<title>M4U BLOG - fywyj.cn</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">body,td{font-family:tahoma,verdana,arial;font-size:11px;line-height:15px;background-color:white;color:#666666;margin-left:20px;}
strong{font-size:12px;}
aink{color:#0066CC;}
a:hover{color:#FF6600;}
aisited{color:#003366;}
a:active{color:#9DCC00;}
table.itable{}
td.irows{height:20px;background:url("index.php?i=dots" repeat-x bottom}</style>
</head>
<body>
<center><form enctype="multipart/form-data" method="post" name="upform">
上传文件: <br><br><br>
<input name="upfile" type="file" style="width:200;border:1 solid #9a9999; font-size:9pt; background-color:#ffffff" size="17">
<input type="submit" value="上传" style="width:30;border:1 solid #9a9999; font-size:9pt; background-color:#ffffff" size="17"><br><br><br>
允许上传的文件类型为:jpg|jpeg|png|pjpeg|gif|bmp|x-png|swf <br><br>
<a href="index.php">返回</a>
</form>
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
if (!is_uploaded_file($_FILES["upfile"][tmp_name]))
//是否存在文件
{
echo "<font color='red'>文件不存在！</font>";
exit;
}
$file = $_FILES["upfile"];
if($max_file_size < $file["size"])
//检查文件大小
{
echo "<font color='red'>文件太大！</font>";
exit;
}
if(!in_array($file["type"], $uptypes))
//检查文件类型
{
echo "<font color='red'>只能上传图像文件或Flash！</font>";
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 "<font color='red'>同名文件已经存在了！</a>";
exit;
}
if(!move_uploaded_file ($filename, $destination))
{
echo "<font color='red'>移动文件出错！</a>";
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];
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("<font color='red'>不能上传此类型文件！</a>");
exit;
}
image($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");
image($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 "<a href=\"".$destination."\" target='_blank'><img src=\"".$destination."\" width=".($image_size[0]*$imgpreviewsize)." height=".($image_size[1]*$imgpreviewsize);
echo " alt=\"图片预览:\r文件名:".$destination."\r上传时间:\" border='0'></a>";
}
}
?>
</center>
</body>
</html>
G. PHP怎样上传图片以及预览图片
本地图片，就搞个img，设置他的src就可以实现；
参考如下：
<div class="column " style="width: 400px; margin-left: 200px;" id="imageShow">
<div id="proctImageNew">@*用于图片预览*@
</div>
<div id="proctImage">
<div class="widget the-common-margin-top" style="height: 400px; border: 1px solid #eeeeee;
padding: 3px;">
<img id="imgHolder" style="max-height: 390px; max-width: 390px;" />
</div>
</div>
</div>
<form id="formImageUpload" name="formImageUpload" method="post" action="/DocTeam/ProctsImage/UploadImage"
enctype="multipart/form-data">
<div id="fileDiv">
<input type="file" id="theFile" name="theFile" size="20" style="cursor: pointer;
width: 65px; height: 60px; position: absolute; filter: alpha(opacity:1); -moz-opacity: 0;
opacity: 0; z-index: 102;" />
</div>
<input type="hidden" name="imageId_hide" id="imageId_hide" />
</form>
<div id="cover" style="position: absolute; background-color: White; z-index: 10;
filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; overflow: auto; width: 400px;">
<input id="selectImage" type="button" style="width: 65px; height: 60px;" value="Select" />
<br />
<br />
<input type="button" value="Upload" id="imageUpload" style="width: 65px; height: 60px;"
disabled="disabled" onclick="javascript:uploadImage();" />
</div>
//js本地图片预览，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3
function PreviewImage(fileObj, imgPreviewId, divPreviewId) {
var allowExtention = ".jpg,.bmp,.gif,.png"; //允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value;
var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".") + 1).toLowerCase();
var browserVersion = window.navigator.userAgent.toUpperCase();
if (allowExtention.indexOf(extention) > -1) {
if (fileObj.files) {//HTML5实现预览，兼容chrome、火狐7+等
if (window.FileReader) {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById(imgPreviewId).setAttribute("src", e.target.result);
}
reader.readAsDataURL(fileObj.files[0]);
} else if (browserVersion.indexOf("SAFARI") > -1) {
alert("不支持Safari6.0以下浏览器的图片预览!");
}
} else if (browserVersion.indexOf("MSIE") > -1) {
if (browserVersion.indexOf("MSIE 6") > -1) {//ie6
document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
} else {//ie[7-9]
fileObj.select();
if (browserVersion.indexOf("MSIE 9") > -1)
fileObj.blur(); //不加上document.selection.createRange().text在ie9会拒绝访问
var newPreview = document.getElementById(divPreviewId + "New");
if (newPreview == null) {
newPreview = document.createElement("div");
newPreview.setAttribute("id", divPreviewId + "New");
}
var a = document.selection.createRange().text;
// newPreview.style.width = document.getElementById(imgPreviewId).width + "px";
// newPreview.style.height = document.getElementById(imgPreviewId).height + "px";
//newPreview.style.width = 390 + "px";
newPreview.style.height = 390 + "px";
newPreview.style.border = "solid 1px #eeeeee";
newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";
var tempDivPreview = document.getElementById(divPreviewId);
// tempDivPreview.parentNode.insertBefore(newPreview, tempDivPreview);
newPreview.style.display = "block";
tempDivPreview.style.display = "none";
}
} else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox
var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
if (firefoxVersion < 7) {//firefox7以下版本
document.getElementById(imgPreviewId).setAttribute("src", fileObj.files[0].getAsDataURL());
} else {//firefox7.0+
document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(fileObj.files[0]));
}
} else {
document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
}
} else {
alert("仅支持" + allowExtention + "为后缀名的文件!");
fileObj.value = ""; //清空选中文件
if (browserVersion.indexOf("MSIE") > -1) {
fileObj.select();
document.selection.clear();
}
fileObj.outerHTML = fileObj.outerHTML;
}
}
function setTheFileButton_Cover_SelectImageButton() {
// debugger;
// var position = $("#selectImage", "#cover").position();
// var css = { top: position.top, left: position.left };
// $("#theFile", "#fileDiv").css(css);
}
var $imgHolder = $('#imgHolder', "#proctImage");
var tempDiv = $("#temp_div");
$("#select", "#cover").click(function () {
$("#theFile", "#fileDiv").click().select();
});
$("#theFile", "#fileDiv").click(function () {
$(this).blur();
});
$("#theFile", "#fileDiv").change(function () {
PreviewImage(this, 'imgHolder', 'proctImage');
setTheFileButton_Cover_SelectImageButton();
// alert("预览已生成!");
$("#imageUpload").prop("disabled", false);
});
H. php 如何实现图片上传前预览，并且有多个图片上传和预览
<form name="form4" id="form4" method="post" action="#"> <input type="file" name="file4" id="file4" ōnchange="preview4()" /> <img id="pic4" src="" alt="图片在此显示" width="120"/> </form> <scrīpt type="text/javascrīpt"> function preview4(){ var x = document.getElementById("file4"); var y = document.getElementById("pic4"); if(!x || !x.value || !y) return; var patn = /\.jpg$|\.jpeg$|\.gif$/i; if(patn.test(x.value)){ y.src = "file://localhost/" + x.value; } else{ alert("您选择的似乎不是图像文件。"); } } </scrīpt>
I. php中图片上传前预览
ie屏蔽了上传文件功能
在IE的"工具=选项=安全=自定义级别=将文件上载到服务器时包含本地目录路径"开启这个选项就OK了
J. 用PHP如何实现一个图片预览的功能
lt;HTMLgt;lt;HEADgt;lt;TITLEgt;用商家做上传图片预览功能lt;/TITLEgt;lt;scriptgt;functionnbsp;Wa_SetImgAutoSize(img){//varnbsp;img=document.all.img1;//获取图片varnbsp;MaxWidth=200;//设置图片宽度界限varnbsp;MaxHeight=100;//设置图片高度界限varnbsp;HeightWidth=img.offsetHeight/img.offsetWidth;//设置高宽比varnbsp;WidthHeight=img.offsetWidth/img.offsetHeight;//设置宽高比alert(“test“+img.offsetHeight+img.fileSize);if(img.offsetHeightgt;1)nbsp;alert(img.offsetHeight);if(img.readyState!=“complete“){nbsp;nbsp;nbsp;returnnbsp;false;//确保图片完全加载}nbsp;nbsp;if(img.offsetWidthgt;MaxWidth){img.width=MaxWidth;img.height=MaxWidth*HeightWidth;}if(img.offsetHeightgt;MaxHeight){img.height=MaxHeight;img.width=MaxHeight*WidthHeight;}}nbsp;nbsp;functionnbsp;CheckImg(img){nbsp;nbsp;nbsp;varnbsp;message=““;nbsp;nbsp;nbsp;varnbsp;MaxWidth=1;//设置图片宽度界限nbsp;nbsp;nbsp;varnbsp;MaxHeight=1;//设置图片高度界限nbsp;nbsp;nbsp;nbsp;nbsp;if(img.readyState!=“complete“){nbsp;nbsp;nbsp;returnnbsp;false;//确保图片完全加载nbsp;nbsp;nbsp;}nbsp;nbsp;nbsp;if(img.offsetHeightgt;MaxHeight)nbsp;message+=“
高度超额：“+img.offsetHeight;nbsp;nbsp;nbsp;if(img.offsetWidthgt;MaxWidth)nbsp;message+=“
宽度超额：“+img.offsetWidth;nbsp;nbsp;nbsp;if(message!=““)nbsp;alert(message);}lt;/scriptgt;lt;/HEADgt;lt;BODYgt;lt;imgnbsp;src=“http://www..com/img/sslm1_logo.gif“nbsp;name=“img1“nbsp;width=“80“nbsp;border=0nbsp;id=“img1“nbsp;gt;lt;brgt;lt;inputnbsp;id=inpnbsp;type=“file“nbsp;onpropertychange=“img1.src=this.value;“gt;lt;/BODYgt;lt;/HTMLgt;另外附上ＰＨＰ的一个取得图片文件信息的函数getimagesize()的一个使用实例:lt;?//nbsp;$arr=getimagesize(“images/album_01.gif“);//nbsp;echonbsp;“arr=“.$arr[3];//nbsp;$strarr=explode(“““,$arr[3]);//nbsp;echonbsp;“strarr=“.$strarr[1];?gt;