Image Upload Preview 上传文件是一种很普通的Web应用,尤其以上传图片更为常见。今天我们就在Web标准的范围内谈谈与这个 表单先创建一个file表单域,我们需要用它来浏览本地文件。
试下效果: 判断文件类型 当用户选择了一个图片文件时,我们希望他能马上看到这张图片的缩略图,以便他能确认没有把自己的光屁 在预览之前我们还得先判断一下用户选择的是不是一个图像文件,如果他想用一个.rar文件做头像的话我们
Javascript函数实现,注意我们使用DOM方法
试下效果: 这里有一个问题,如果用户选择了名为“fake.jpg.txt”的文件,这段脚本仍旧会认为这是一个合法的图像文
看看效果(可以自己创建一个“fake.jpg.txt”文件试试): 如果从来没有接触过正则表达式,那这段脚本对你可能会有些晦涩,不妨Google一把,看看是否可以先学 回到这段脚本上来,即使你还看不懂正则表达式那两行,但整段脚本的美感还是很明显的:简洁、直接、 jjww一大段之后,我们转入重点—— 预览图片 预览功能的基本设计思路是很清晰的:创建一个
试下效果: 如果你用的是Firefox(或Opera),可能会发现什么也没有发生。是的,很不幸Firefox的安全策略不允许 让Firefox显示本地文件的唯一办法就是修改它的默认安全策略:
然后你可以再试试上面预览,everything works well!可惜的是我们并不能要求所有的用户都去修改这个 用DOM来创建对象 在上面的XHTML代码中,我们为了预览图片,事先加入了一个没有设置
试下效果: 这样就相对比较完美了。我也不解释上面这些DOM方法的具体意义,Google一下什么都有了。DOM和正则 |
预览上传的本地图片
最新推荐文章于 2022-10-25 13:32:33 发布
<script>function StorePage(){d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://www.365key.com/storeit.aspx?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t),'keyit','scrollbars=no,width=475,height=575,left=75,top=20,status=no,resizable=yes'));keyit.focus();}</script>