當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

上传图片在页面上显示

發(fā)布時間：2023/11/29 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了上传图片在页面上显示小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

看了別人寫的自己照著寫了一下

<%@ 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("您上傳的圖片格式不正確，請重新選擇!"); 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é)

以上是生活随笔為你收集整理的上传图片在页面上显示的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。