zoukankan      html  css  js  c++  java
  • 上传图片在页面上显示

    看了别人写的 自己照着写了一下

    <%@ 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>
    页面
  • 相关阅读:
    说说渐进式增强
    Websocket模板
    Echart图表显示单位
    JS配置文件设置,共享变量抽取
    PHP处理字符串的10个简单方法
    C#实现只许一个实例运行(使用mutex类)
    实现PHP基本安全11条
    PHP开发不能违背的安全规则
    Querying a motor position
    log info
  • 原文地址:https://www.cnblogs.com/yang1018/p/7365711.html
Copyright © 2011-2022 走看看