码迷,mamicode.com
首页 > Web开发 > 详细

上传图片在页面上显示

时间:2017-08-15 16:29:08      阅读:167      评论:0      收藏:0      [点我收藏+]

标签: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])  
    {  
        //火狐下,直接设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>
页面

 

上传图片在页面上显示

标签:transform   style   art   multipart   head   sep   UI   tin   eth   

原文地址:http://www.cnblogs.com/yang1018/p/7365711.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!