上传图片在页面上显示
生活随笔
收集整理的這篇文章主要介紹了
上传图片在页面上显示
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
看了別人寫的 自己照著寫了一下
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><base href="<%=basePath%>"><title>My JSP 'sc.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!----><script src="<%=basePath%>js/jquery-1.7.2.min.js" type="text/javascript"></script> <script>function showPicture(value){ // var docObj=document.getElementById("file"); var docObj=$("#file").get(0); // var imgObjPreview=document.getElementById("myPic"); var imgObjPreview= $("#myPic").get(0);if(docObj.files &&docObj.files[0]) { //火狐下，直接設(shè)img屬性 imgObjPreview.style.display = 'block'; imgObjPreview.style.width = '150px'; imgObjPreview.style.height = '180px'; //imgObjPreview.src = docObj.files[0].getAsDataURL(); //火狐7以上版本不能用上面的getAsDataURL()方式獲取，需要一下方式 imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]); } else { //IE下，使用濾鏡 docObj.select(); var imgSrc = document.selection.createRange().text; // var localImagId = document.getElementById("localImg"); var localImagId = $("#localImg").get(0); //必須設(shè)置初始大小 localImagId.style.width = "150px"; localImagId.style.height = "180px"; //圖片異常的捕捉，防止用戶修改后綴來偽造圖片 try{ localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc; } catch(e) { alert("您上傳的圖片格式不正確，請(qǐng)重新選擇!"); return false; } imgObjPreview.style.display = 'none'; document.selection.empty(); } return true; } </script></head><body><div id="localImg"> <img src="" id="myPic" /> </div> <form id="form" action="#" method="post" enctype="multipart/form-data"> <input type="file" id="file" name="file" onchange="showPicture(this.value)"> </form> </body> </html> 頁面?
轉(zhuǎn)載于:https://www.cnblogs.com/yang1018/p/7365711.html
總結(jié)
以上是生活随笔為你收集整理的上传图片在页面上显示的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 梦到狐狸咬我意味着什么
- 下一篇： 中介者模式分析、结构图及基本代码