上传图片预览

最新推荐文章于 2025-01-28 16:03:20 发布

原创最新推荐文章于 2025-01-28 16:03:20 发布 · 118 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #ViewUI

Ajax 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的图片预览功能。通过在文件域更改时更新img元素的src属性来实时预览所选图片。文章还讨论了Firefox浏览器的安全限制，并提供了绕过这些限制的方法。

预览功能的基本设计思路：创建一个img元素，再把文件域的value值赋值给img元素的src属性。


<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'index.jsp' starting page</title>

	<script type="text/javascript">
	function showPicture(){
	document.getElementById("img").src=document.form1.picturePath.value;
	}
	</script>
  </head>

  <body>
 <form name="form1" action="PicturServlet" method="post">
 <table>
 <tr>

 <td><img src=""  name="img" id="img" height="200px"/></td>

 </tr>
 <tr>
 <td><input type="file" name="picturePath" onchange="showPicture()"/></td>
 <td><input type="submit" value="上传图片"></td>
 </tr>

 </table>
 </form>
  </body>
</html>

　如果用的是Firefox（或Opera），可能会发现什么也没有发生，Firefox的安全策略不允许我们显示一个用户的本地图像文件。
让Firefox显示本地文件的唯一办法就是修改它的默认安全策略：
在Firefox的地址栏中输入“about:config”
在列表中找到“security.checkloaduri” 双击把它的值由true改为false 。