JavaScript图片上传前预览和限制图片格式

boris-song
浏览: 125260 次
性别:
来自: 北京
最近访客更多访客>>

ningzong
long-will
308806058
zhuwentao16
博主相关

博客
微博
相册
留言
关于我
文章分类

社区版块

存档分类

JavaScript PHP Firefox Opera MySQL
这是一则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" onsubmit="return sub(this)" 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" onchange="if(checkImgType(this.value)){perImg(this.value)};selectFile(document.uploadform.upload_file, document.uploadform.name)">(将远程图片的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.baidu.com/img/logo.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;
   //alert(o+"||"+tempimg.width+"||"+tempimg.height);
   clearTimeout(re);
   re=setTimeout("resize(tempimg)",100);
   //设置100毫秒的迟延就可解决ff下得到前一次size的问题;
 }
}

function resize(o){
//预览时若图片宽或高大于200*200,则设定宽或高最大为200*200;
//上传后再用java/php/c等裁剪生成大小两张图片;
  ow=o.width;
  oh=o.height;
  var ow2=ow,oh2=oh;//得到宽高
  //alert("ow:"+ow+"oh:"+oh+"\now2:"+ow2+"oh2"+oh2)
  try{
  if(ow>oh){//如宽大于高且宽大于200就缩小宽为200,高则按比例缩放
      if(ow>200){ow2=200;oh2="auto";}
  }else{//如高大于宽且高大于200就缩小高为200,宽则按比例缩放
      if(oh>200){oh2=200;ow2="auto";}
  }
          var showdiv=document.getElementById("divinfo");
          var info="原宽:"+ow+" || 原高:"+oh+" == "+"改后宽:"+ow2+" || 改后高:"+oh2;
          var getimg="<a href=\""+o.src+"\" onclick=\"window.open(this.href,'','width=500,height=400,top='+(window.screen.height-500)/2+',left='+(window.screen.width-500)/2+',resizable=yes ');return false;\" target=\"_blank\">"
                                +"<img border=\"0\" id=\"uploadimg\" src=\""+o.src+"\" style=\"width:"+ow2+";height:"+oh2+";\">"
                                +"</a>";
          document.getElementById("perDiv").innerHTML=getimg;
          if(showdiv)showdiv.innerHTML=info;           
  }catch(ex){
     alert(ex.toString());
  }  

}
//jiarry.126.com
//differentiate file type

var right_type=new Array(".gif",".jpg",".jpeg","png","bmp")
function checkImgType(fileURL)
{
//本程序用来验证后缀，如果还有其它格式，可以添加在right_type;
var right_typeLen=right_type.length;
var imgUrl=fileURL.toLowerCase();
var postfixLen=imgUrl.length;
var len4=imgUrl.substring(postfixLen-4,postfixLen);
var len5=imgUrl.substring(postfixLen-5,postfixLen);
for (i=0;i<right_typeLen;i++)
{
    if((len4==right_type[i])||(len5==right_type[i]))
    {
    return true;
    }
 }
}

 
var xlist=0;var errStr="";
function sub(o){
   if(o.upload_file.value==""){xlist+=1;errStr+=xlist+")请选择一个图片文件\n";}
   if(o.name.value==""){xlist+=1;errStr+=xlist+")请输入名称\n";}
   if(o.description.value==""){ xlist+=1; errStr+=xlist+")请输入描述\n";}
   if(o.uploader.value==""){xlist+=1; errStr+=xlist+")请输入上传人\n";}   
   if(errStr!=""){
       alert(errStr);
       xlist=0;errStr="";
       return false;
   }
   if(checkImgType(o.upload_file.value)){
    perImg(o.upload_file.value);
    return true;
     //alert("选择图片正确，你上传的图片是"+o.upload_file.value);
     return false;
   }else{
   alert("您选择的文件格式不正确！");o.upload_file.focus();
   return false;
   }
}

</script>
</body>
</html>
<?
/*data*/
$conn=mysql_connect("localhost","root","")or die("连接失败！");
mysql_select_db("test",$conn);
/*data*/
$upload_file=$_FILES['upload_file']['tmp_name'];
$upload_file_name=$_FILES['upload_file']['name'];
if($upload_file){
$file_size_max = 1000*1000;// 1M限制文件上传最大容量(bytes)
$store_dir = "upimg/";// 上传文件的储存位置
$accept_overwrite = 1;//是否允许覆盖相同文件
// 检查文件大小
if ($upload_file_size > $file_size_max) {
echo "对不起，你的文件容量大于规定";
exit;
}

// 检查读写文件
if (file_exists($store_dir . $upload_file_name) && !$accept_overwrite) {
Echo "存在相同文件名的文件";
exit;
}

//复制文件到指定目录
if (!move_uploaded_file($upload_file,$store_dir.$upload_file_name)) {
echo "复制文件失败";
exit;
}

}


echo "<p>你上传了文件:";
echo $_FILES['upload_file']['name'];
echo "<br>";
//客户端机器文件的原名称。 

Echo "文件的 MIME 类型为:";
echo $_FILES['upload_file']['type'];
//文件的 MIME 类型，需要浏览器提供该信息的支持，例如“image/gif”。 
echo "<br>";

Echo "上传文件大小:";
echo $_FILES['upload_file']['size'];
//已上传文件的大小，单位为字节。 
echo "<br>";

Echo "文件上传后被临时储存为:";
echo $_FILES['upload_file']['tmp_name'];
//文件被上传后在服务端储存的临时文件名。 
echo "<br>";
$name=$_FILES['upload_file']['name'];
$path=$_FILES['upload_file']['name'];
$type=$_FILES['upload_file']['type'];
$size=$_FILES['upload_file']['size'];
@ $desc=$_POST['description'];
@ $note=$_POST['uploader'];
@ $name=$_POST['name'];
/*insert database*/
if(!empty($name)){
$inserSql = mysql_query("insert into upimg (name,path,type,size,description,note) " .
        "values ('$name','$path','$type','$size','$desc','$note')");
//echo "a".$_POST['upload_file']."a";
}else{
//echo "b".$_POST['upload_file']."b";
}



$Erroe=$_FILES['upload_file']['error'];
echo "<font color=red>";
switch($Erroe){
case 0:
Echo "上传成功";
break;
case 1:
Echo "上传的文件超过了 php.ini 中 upload_max_filesize 选项限制的值."; break;
case 2:
Echo "上传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项指定的值。"; break;
case 3:
Echo "文件只有部分被上传";break;
case 4:
Echo "没有文件被上传";break;
}
echo "</font>";
mysql_close($conn) or die("无法与服务器断开连接！");
?>
分享到：