上传图片在页面上显示

Posted 2020-10-02 石洋

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了上传图片在页面上显示相关的知识，希望对你有一定的参考价值。

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

<%@ 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>

页面

以上是关于上传图片在页面上显示的主要内容，如果未能解决你的问题，请参考以下文章

java实现图片上传至服务器并显示，如何做？希望要具体的代码实现

55bbs论坛上传图片，显示输入图片链接地址，找不到附件功能。

页面图片上传前，让图片在页面显示

PHP上传图片成功后怎么打开这个地址显示在浏览器上？

vue中使用axios post上传头像/图片并实时显示到页面

上传控件显示缩略图