预览待上传的本地图片
时间:2007-02-17 来源:PHP爱好者
上传文件是一种很普通的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> 试下效果: function preview2(){ var x = document.getElementById("file2"); if(!x || !x.value) return; if(x.value.indexOf(".jpg")
php爱好者站 http://www.phpfans.net Linux|Apache|IIS.
php爱好者站 http://www.phpfans.net Linux|Apache|IIS.
相关阅读 更多 +