图片上传预览

首页 > 代码库 > 图片上传预览

2024-08-22 15:08:12 223人阅读

例1：

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.checkloaduri”
双击下面列出来的一行文字，把它的值由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 = http://www.mamicode.com/‘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>

例2：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body><div align="center" style="width:50%; height:300px; font-size:13px">
<h3>上传图片预览</h3>
<form name="frm" method="post" enctype="multipart/form-data">
<font style="letter-spacing:1px" color="#FF0000">*只允许上传jpg|png|bmp|pjpeg|gif格式的图片</font><br/><br/>
请选择图片：
 <input name=‘upfile‘ type=‘file‘/>
 <input name="btn" type="submit" value="http://www.mamicode.com/上传" /><br />
</form>
<?php
//全局变量
$arrType=array(‘image/jpg‘,‘image/gif‘,‘image/png‘,‘image/bmp‘,‘image/pjpeg‘);
$max_size=‘500000‘;      // 最大文件限制（单位：byte）
$upfile=‘../yhmgc/img/‘; //图片目录路径
$file=$_FILES[‘upfile‘];
 
   if($_SERVER[‘REQUEST_METHOD‘]==‘POST‘){ //判断提交方式是否为POST
     if(!is_uploaded_file($file[‘tmp_name‘])){ //判断上传文件是否存在
    echo "<font color=‘#FF0000‘>文件不存在！</font>";
    exit;
    }
  
  if($file[‘size‘]>$max_size){  //判断文件大小是否大于500000字节
    echo "<font color=‘#FF0000‘>上传文件太大！</font>";
    exit;
   }
  if(!in_array($file[‘type‘],$arrType)){  //判断图片文件的格式
     echo "<font color=‘#FF0000‘>上传文件格式不对！</font>";
     exit;
   }
  if(!file_exists($upfile)){  // 判断存放文件目录是否存在
   mkdir($upfile,0777,true);
   } 
      $imageSize=getimagesize($file[‘tmp_name‘]);
   $img=$imageSize[0].‘*‘.$imageSize[1];
   $fname=$file[‘name‘];
   $ftype=explode(‘.‘,$fname);
   $picName=$upfile."/cloudy".$fname;
  
   if(file_exists($picName)){
    echo "<font color=‘#FF0000‘>同文件名已存在！</font>";
    exit;
     }
   if(!move_uploaded_file($file[‘tmp_name‘],$picName)){ 
    echo "<font color=‘#FF0000‘>移动文件出错！</font>";
    exit;
    }
   else{
    echo "<font color=‘#FF0000‘>图片文件上传成功！</font><br/>";
    echo "<font color=‘#0000FF‘>图片大小：$img</font><br/>";
    echo "图片预览：<br><div style=‘border:#F00 1px solid; width:200px;height:200px‘>
    <img src=http://www.mamicode.com/"".$picName."\" width=200px height=200px>".$fname."</div>";
    }
      }
?>

</div>
</body>
</html>

例3：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<form id="sc" action="shangchuan.php" target="hidden_frame" method="post" enctype="multipart/form-data">
    <div id="yl" style="margin-left:0px; width:144px; height:170px; background-size:144px 170px; background-image:url(../chexiangqing/images/22.jpg)">
        <input type="file" name="file" style="width:144px; height:170px; float:left; opacity:0;" width="146" onchange="document.getElementById(‘sc‘).submit()"/>
       
    </div>
    <input type="button" value="http://www.mamicode.com/保存"/>
</form>
<iframe style="display:none;" name="hidden_frame" id="hidden_frame">
</iframe>

</body>
<script type="text/javascript">
//回调函数
function showimg(aa)
{
    var l = document.getElementById("yl");
    l.style.backgroundImage = "url("+aa+")";
}
</script>
</html>

<?php
   //上传文件限制
   if ((($_FILES["file"]["type"] == "image/gif")|| ($_FILES["file"]["type"] == "image/jpeg")|| ($_FILES["file"]["type"] == "image/png"))&& ($_FILES["file"]["size"] < 10000000))
  {
      //文件上传是否出错
      if ($_FILES["file"]["error"] > 0)
    {
        echo "上传出错: " . $_FILES["file"]["error"] . "<br />";
    }
      else
    {
        
    
    //判断文件是否已存在
    $filename = "images/".$_FILES["file"]["name"];
    $filename = iconv("UTF-8","gb2312",$filename);
     
    if (file_exists($filename))
      {
          echo "<script language=‘javascript‘>alert(‘文件已经存在！‘)</script>";
           
      }
    else
      {
          //移动图片至保存路径，解决中文乱码问题
            move_uploaded_file($_FILES["file"]["tmp_name"],$filename);

          echo "<script language=‘javascript‘>parent.showimg(‘".$filename."‘)</script>";
      }
    }
  }
  else
  {
      echo "上传失败";
  }

?>

图片上传预览

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 图片上传预览

图片上传预览

看完仍有疑问？有类似问题直接问程序猿