预览待上传的本地图片

上传文件是一种很普通的Web应用，尤其以上传图片更为常见。今天我们就在Web标准的范围内谈谈与这个主题相关的内容（只限前端部分，上传的实现当然就不在此列了），关键词是：Javascript、DOM和Firefox。

表单

　　先创建一个file表单域，我们需要用它来浏览本地文件。

<form name="form1" id="form1" method="post" action="upload.php">
 <input type="file" name="file1" id="file1" />
</form>

 

 

　　试下效果：

<form id="form1" action="#" accept-charset="UNKNOWN" enctype="multipart/form-data" method="post">　　 <input id="filed1" maxlength="2147483647" name="file1" size="20" type="file"> </form>

 

判断文件类型

　　当用户选择了一个图片文件时，我们希望他能马上看到这张图片的缩略图，以便他能确认没有把自己的光屁股照片当作头像传到我们的服务器上^_^。

　　在预览之前我们还得先判断一下用户选择的是不是一个图像文件，如果他想用一个.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>
 

　　试下效果(这里无法显示，可粘贴到你的程序中)：

 

<form id="form2" action="#" accept-charset="UNKNOWN" enctype="multipart/form-data" method="post">　　 <input id="file2" maxlength="2147483647" name="file2" size="20" type="file"> </form> 

<noscript type="text/javascript"></noscript> 

 

 

　　这里有一个问题，如果用户选择了名为“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>

　　看看效果（可以自己创建一个“fake.jpg.txt”文件试试）：

<form id="form3" action="#" accept-charset="UNKNOWN" enctype="multipart/form-data" method="post">　　 <input id="file3" maxlength="2147483647" name="file3" size="20" type="file"> </form>

<noscript type="text/javascript"></noscript>

　　如果从来没有接触过正则表达式，那这段脚本对你可能会有些晦涩，不妨Google一把，看看是否可以先学习学习这方面的知识。我可以向你保证花四五个小时学点正则表达式会是你最近三个月内作出的最明智选择^_^。

　　回到这段脚本上来，即使你还看不懂正则表达式那两行，但整段脚本的美感还是很明显的：简洁、直接、语义流畅，这与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="" 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>

　　试下效果：

 

<form id="form4" action="#" accept-charset="UNKNOWN" enctype="multipart/form-data" method="post">　　 <input id="file4" maxlength="2147483647" name="file4" size="20" type="file"> </form>

<noscript type="text/javascript"></noscript>

 

　　如果你用的是Firefox（或Opera），可能会发现什么也没有发生。是的，很不幸Firefox的安全策略不允许我们显示一个用户的本地图像文件。不知道他们为什么要这么做，我个人觉得图像文件并不会造成严重的安全性问题。即使是不久前比较热门的那个会引起Windows崩溃的jpeg文件，要显示它的前提条件是用户自己选择了这个文件或者你知道这个文件在用户硬盘上的准确路径。所以我想这种策略很可能来自于一个“懒惰”的开发人员，他并不想多写一些程序来区分这个本地文件是一个图像文件还是一个恶意文件，Firefox对安全性的要求让他们有些过于敏感了。

　　让Firefox显示本地文件的唯一办法就是修改它的默认安全策略：

1. 在Firefox的地址栏中输入“about:config”
2. 继续输入“security.checkloaduri”
3. 双击下面列出来的一行文字，把它的值由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>

　　试下效果：

 

<form id="form5" action="#" accept-charset="UNKNOWN" enctype="multipart/form-data" method="post">　　 <input id="file5" maxlength="2147483647" name="file5" size="20" type="file"> </form>

<noscript type="text/javascript"></noscript>

 

　　这样就相对比较完美了。我也不解释上面这些DOM方法的具体意义，Google一下什么都有了。DOM和正则表达式一样，都是“包你不悔”的实用技术，如果你希望更多了解、深入学习、或者顺利实践Web标准，DOM是不可或缺的。从我本人最近的体会来说，Javascript+DOM+CSS蕴藏着强大的能量，就看你怎么释放它了。