JSP本地图片预览

最新推荐文章于 2025-06-05 13:17:29 发布

原创最新推荐文章于 2025-06-05 13:17:29 发布 · 638 阅读

1 ·

CC 4.0 BY-SA版权

jsp 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了两种使用JSP实现的图片上传并实时预览的方法。一种适用于IE和其他浏览器，另一种适用于Firefox等现代浏览器。通过JavaScript和HTML实现，确保用户在上传前可以预览图片，提高用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面是网上查资料整理出来的两种jsp上传时本地预览
第一种index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>预览本地图片</title>
<script type="text/javascript">  
    //获取上传图片的本地路径   
    function getPath(obj){   
        if(obj) {   
            if(navigator.userAgent.indexOf("MSIE")>0) {  
                obj.select();   
                //IE下取得图片的本地路径   
                return document.selection.createRange().text;  
            } else if(isFirefox=navigator.userAgent.indexOf("Firefox")>0) {  
                 if (obj.files) {  // Firefox下取得的是图片的数据   
                    return files.item(0).getAsDataURL();   
                 }   
                 return obj.value;   
             }  
             return obj.value;   
        }   
    }     
          
    function PreviewImg(img) {  
          
        var imgPath = getPath(img);  
          
        //预览图片的div  
        var newPreview = document.getElementById("preview");  
          
        //允许上传的图片格式  
        var regext = /\.jpg$|\.gif$|\.jpeg$|\.png$|\.bmp$/gi;   
          
        if(!regext.test(imgPath)){    
            alert("对不起，系统仅支持标准格式的照片，请您调整格式后重新上传！");      
            document.getElementById("btn_upload").disabled=true;       
        }else{    
            document.getElementById("btn_upload").disabled=false;  
            newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";    
            newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgPath;  
            newPreview.style.width = "300px";    
            newPreview.style.height = "200px";     
        }    
  
    }  
    // -->  
</script>
</head>
<body>
<center>
<input name="fileName" type="file"  class="text1" size="30" maxlength="40" onchange="PreviewImg(this)">  
    <div id="preview"></div>  
    <br />  
    <input type="submit" value="提交" id="btn_upload" disabled="true"/> 
    </center>
</body>
</html>

第二种：index1.jsp
<%@ page contentType="text/html;charset=UTF-8"%>
<html> 
 <head> 
  <title>图片上传预览</title> 
  <script> 
   function PreviewImage(imgFile) 
   { 
    var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/;      
    if(!pattern.test(imgFile.value)) 
    { 
     alert("系统仅支持jpg/jpeg/png/gif/bmp格式的照片！");  
     imgFile.focus(); 
    } 
    else 
    { 
     var path; 
     if(document.all)//IE 
     { 
      imgFile.select(); 
      path = document.selection.createRange().text; 
      document.getElementById("imgPreview").innerHTML=""; 
      document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";//使用滤镜效果 
     } 
     else//FF 
     { 
      path = URL.createObjectURL(imgFile.files[0]);
      document.getElementById("imgPreview").innerHTML = "<img src='"+path+"'/>"; 
     } 
    } 
   } 
  </script> 
 </head> 
 <body> 
  <center>
   <input type="file" onchange='PreviewImage(this)' /> 
   <div id="imgPreview" style='width:300px; height:200px;'> 
    <img src=""/> 
   </div> 
  </center>
 </body> 
</html>