【关键字】：
【来 源】：http://blog.csdn.net/xuwenwu/archive/2007/02/25/1513795.aspx
预览待上传的本地图片
上传文件是一种很普通的Web应用，尤其以上传图片更为常见。今天我们就在Web标准的范围内谈谈与这个主题相关的内容（只限前端部分，上传的实现当然就不在此列了），关键词是：Javascript、DOM和Firefox。
表单
先创建一个file表单域，我们需要用它来浏览本地文件。
<form name="form1" id="form1" method="post" action="upload.php"> <input type="file" name="file1" id="file1" /></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>回到这段脚本上来，即使你还看不懂正则表达式那两行，但整段脚本的美感还是很明显的：简洁、直接、语义流畅，这与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>让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 = '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> 这样就相对比较完美了。我也不解释上面这些DOM方法的具体意义，Google一下什么都有了。DOM和正则表达式一样，都是“包你不悔”的实用技术，如果你希望更多了解、深入学习、或者顺利实践Web标准，DOM是不可或缺的。从我本人最近的体会来说，Javascript+DOM+CSS蕴藏着强大的能量，就看你怎么释放它了。
没有相关文章
|