JavaScript图片上传前预览和限制图片格式
日期：2013-05-28 浏览次数：20519 次
这是一则PHP图片上传的例子，这里想说明的是在上传图片前，当用户从本地或是远程选择图片时能够预览图片，由于上传的图片有大有小，宽窄不一，上传后我们都将对图片进行裁减处理，但是在上传前用户能否知道裁减后的效果呢？而且能否在提交前就告诉用户哪些图片格式是有效的呢？答案是肯定的，本例就是一个上载图片前预览图片，并按比例压缩的实际例子，代码很简单，主要是创建一个new Image()，然后给这个给这个image写入要显示的地方，而图片格式是否有效，是通过文件上的后缀来判断的，js里没有直接验证文件的格式的函数，需要通过substring()文件名最后一个.来判断。
本例效果虽然能实现，但在预览时仍有两个问题要注意
1，在Opera下，由于得不到上传框里的本地图片全部路径(只能得到文件名)，所以无法预览图片。
2，用Firefox远程访问本文件时，出于安全原因，ff不允许预览本地的图片，在本地则可以。
注：这些在IE下均没有这些问题。
以下是本例的全部代码：
<html>
<head>
<title>上载文件表单</title></head>
<style>
#con { background-color:#c1c1c1}
#t{width:100px;float:left;clear:both;}
#con li{display:inline;}
#perDiv{position:absolute;width:210px;left:420px;height:210px;background-color:;align:center}
</style>
<body>
upload example for php by jarry!
<form enctype="multipart/form-data" action="upload.php" name="uploadform" method="post">
<div id="perDiv" style="display:">
<br><br>这里是用来预览图片用
</div>
<div id="con">
<div id=t>请选择文件:</div>
<li><input name="upload_file" type="file" size="30" >(将远程图片的url粘贴进来也可以)</li><br>
<font size=-1>只接受后缀名为".gif",".jpg",".jpeg","png","bmp"的文件！ </font><br>
<div id=t>名称:</div>
<li><input type=text value="11" size="30" name="name"></li><br>
<div id=t>描述:</div>
<li><textarea rows="5" cols="30" name="description">11</textarea></li><br>
<div id=t>上传人:</div>
<li><input type="text" value="11" size="40" name="uploader"></li><br>
<div id=t> </div><input type="submit" value="上传文件"> <a href="showimg.php">查看图片</a><br>
</div>
<div id="divinfo"><br></div>
</form>
<br clear="both">
<b><a href="showimg.php">查看上传图片列表</a></b><br>
<script type="text/javascript">
function selectFile(obj1,obj2){
var filepath = obj1.value;
if(filepath.lastIndexOf("\\")>0){
filename= filepath.substring(filepath.lastIndexOf("\\")+1,filepath.length);
}
obj2.value = filename;//用来得到文件名;
}
var re;
var tempimg=new Image();//构建一个image对象，用来临时存取上传的图片信息
function perImg(o)
{//o是浏览上传的值;
isOpare=(navigator.userAgent.toLowerCase().indexOf("opera")!=-1)?true:false;
if(isOpare && o.indexOf("http://")==-1){document.getElementById("perDiv").innerHTML="Opera 浏览器得到不本地路径，所以无法提供预览效果，谢谢！";return;}
//tempimg.src="http://www.pushad.com/XrssFile/2007-2/6/20072612928765.gif";
//tempimg.src=o;//return;
//远程访问时浏览本地的图片时因为安全原因而在firefox下能预览，
//ie下都没有问题:(,打开静态页面时也没有问题;
//可以把在线的图片url拷贝至文件框试一试，拷贝进来的一律有效，(地址为http://的)在其它浏览器下均有效
//而如果是firefox如果是通过远程访问，选择图片时无法预览本地的图片
//这可以说是firefox为安全考虑的一个方面，也可以说是firefox下的bug
//而对于opera来讲，只要是从本地选择的图片(不管是本地还是远程访问本文件)，都得不到全部的路径，所以opera下是无法预览本地图片的
//如果是远程的图片地址，粘贴进文件框里(地址为http://的)，就都可以预览图片了。
if(o!=""){
// o=encodeURIComponent(o);
if(o.indexOf("file:///")==-1 && o.indexOf("http://")==-1)o="file:///"+o;
//给url加上file,这种方式在非windows平台可能会有问题;
o=o.replace(/\\/g,"/");
tempimg.src=o;
//ale
