上傳圖片在頁面上顯示
阿新 • • 發佈：2017-08-15
doc this o-c post ring asc sof ros 顯示 
看了別人寫的 自己照著寫了一下
<%@ 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> functionshowPicture(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]) { //火狐下，直接設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); //必須設置初始大小 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("您上傳的圖片格式不正確，請重新選擇!"); 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>
上傳圖片在頁面上顯示