实现图片上传前本地预览功能之二

来源：互联网发布：snmp trap协议端口号编辑：程序博客网时间：2024/06/05 04:36
我这个试用起来比之前那个加载要快
[html] view plain copy
<%@ 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>demo imgage preview</title>  
      
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>  
      
    <script type="text/javascript">  
  
    function preview(file)    
     {  
         var imgSuffix = file.value.substr(file.value.length-4, 4);//得到图片后缀  
         var imgFileName = file.value.split("\\")[2];//得到图片的名称加后缀  
         imgUploadName = imgFileName;//将该图片的后缀赋给imgUploadName这个全局变量  
         debugger  
        if(imgSuffix ==".jpg"  || imgSuffix == ".gif" || imgSuffix == ".png"){  
            var prevDiv = $("#showImg");  
             if (file.files && file.files[0])  
             {  
                 var reader = new FileReader();  
                 reader.onload = function(evt)  
                 {   
                    //id用于修改的时候赋值  
                    prevDiv.prop("src",evt.target.result)  
                 }  
                 reader.readAsDataURL(file.files[0]);  
            }  
        }else{  
            alert("图片的格式不正确");  
            file.value = "";  
        }  
     }  
    </script>  
  
  </head>  
    
  <body>  
    <div></div><input type="file" name="bankImgU" onchange="preview(this)"/><div><a href="javascript:;"></a>  
    <div></div><img id="showImg" height="40px" width="100px"/></div>  
  </body>  
</html>  
阅读全文
0 0