標籤：transform style art multipart head sep UI tin eth
看了別人寫的 自己照著寫了一下
<%@ 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]) { //Firefox下，直接設img屬性 imgObjPreview.style.display = ‘block‘; imgObjPreview.style.width = ‘150px‘; imgObjPreview.style.height = ‘180px‘; //imgObjPreview.src = docObj.files[0].getAsDataURL(); //Firefox7以上版本不能用上面的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>頁面
上傳圖片在頁面上顯示
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
