JavaScript实现单张图片上传功能

前台jsp代码

  1 <%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=utf-8"%>
  2 <!DOCTYPE html>
  3 <html>
  4 <head>
  5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6     <meta http-equiv=Content-Type content="text/html; charset=utf-8" />
  7     <title>单张图片上传</title>
  8     <link rel="stylesheet" type="text/css" href="/css/upload/uploadImg.css">
  9     <script type="text/javascript" src="/js/jquery-2.0.0.min.js"></script>
 10     <script type="text/javascript" src="/js/layer/layer.js"></script>
 11     <style type="text/css">
 12     </style>
 13 </head>
 14 <body>
 15     <div style="height: 500px;">
 16         <div class="img-box">
 17             <img src="" id="yushow"/>
 18             <button class="btn-uploading" onclick="uploadBtn();"><i class="icon-uploading"></i>上传图片</button>
 19             <a class="shan" onclick="deleteImg();"><img src="/images/upload/shanI.gif"></a>
 20         </div>
 21         <input type="file" name="file" style="display:none;" onchange="previewImg(this);" id="upload" accept="image/*"/>
 22     </div>
 23 </body>
 24 <script type="text/javascript">
 25 
 26 function uploadBtn(){
 27     $("#upload").click();
 28 }
 29 
 30 //图片预览
 31 function previewImg(imgFile){
 32     console.log(imgFile);//这里打印出是整个input标签
 33     var extension = imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);//扩展名
 34     extension = extension.toLowerCase();//把文件扩展名转换为小写
 35     if ((extension!='.jpg')&&(extension!='.gif')&&(extension!='.jpeg')&&(extension!='.png')&&(extension!='.bmp')){
 36         layer.msg("对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢 !");
 37         $(".btn-uploading").focus();//将焦点定位在文件上传的按钮上，可以直接按确定键再次触发
 38     }else{
 39         var path;//预览地址
 40         if(document.all){//IE
 41             imgFile.select();
 42                 path = document.selection.createRange().text;
 43         }else{//火狐，谷歌
 44             path = window.URL.createObjectURL(imgFile.files[0]);
 45         }
 46         $("#yushow").attr("src",path);//设置预览地址
 47         uploadImg(imgFile);
 48     }
 49 }
 50 
 51 //开始上传
 52 function uploadImg(imgFile){
 53     //获取图片文件
 54     var file = imgFile.files[0];//文件对象
 55     var name = file.name;//图片名
 56     //var size = file.size;//图片大小
 57     //var type = file.type;//文件类型
 58     
 59     //检测浏览器对FileReader的支持
 60     if(window.FileReader) {
 61         var reader = new FileReader();
 62         reader.onload = function(){//异步方法,文件读取成功完成时触发
 63             var dataImg = reader.result;//文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，否则即是读取的结果
 64             syncUpload(name,dataImg);
 65         };
 66         reader.readAsDataURL(file);//将文件读取为 DataURL
 67     }else {
 68         layer.msg("浏览器不支持H5的FileReader!");
 69     }
 70 }
 71 
 72 function syncUpload(name,dataImg){
 73     var imgFile = dataImg.replace(/+/g,"#wb#");//将所有“+”号替换为“#wb#”
 74     imgFile = imgFile.substring(imgFile.indexOf(",")+1);//截取只保留图片的base64部分,去掉了data:image/jpeg;base64,这段内容
 75     imgFile = encodeURIComponent(imgFile);//把字符串作为 URI 组件进行编码。后台容器会自动解码一次
 76     name = encodeURIComponent(encodeURIComponent(name));//这里对中文参数进行了两次URI编码，后台容器自动解码了一次，获取到参数后还需要解码一次才能得到正确的参数内容
 77     var mydata = "method=uploadImg&imgFile="+imgFile+"&imgName="+name;
 78     $.ajax({
 79           url: "/UploadServlet",
 80           data: mydata,
 81           type: "post",
 82           dataType: "json",
 83           success: function(data){
 84                   if(data.state == 'ok'){
 85                       document.getElementById("upload").value = "";//重置文件域
 86                       layer.msg(data.msg);
 87                 }else if(data.state == 'error'){
 88                     layer.msg(data.msg);
 89                 }
 90           }
 91     });
 92 }
 93 
 94 //删除图片
 95 function deleteImg(){
 96     $.ajax({
 97           url: "/UploadServlet",
 98           data: "method=deleteImg",
 99           type:"post",
100           dataType: "json",
101           success: function(data){
102                   if(data.state == 'ok'){
103                       layer.msg(data.msg);
104                 }else if(data.state == 'error'){
105                     layer.msg(data.msg);
106                 }
107           }
108     });
109 }
110 </script>
111 </html>

后台Servlet代码

  1 package com.demo.servlet;
  2 
  3 import java.io.BufferedReader;
  4 import java.io.ByteArrayInputStream;
  5 import java.io.File;
  6 import java.io.FileOutputStream;
  7 import java.io.IOException;
  8 import java.io.InputStream;
  9 import java.net.URLDecoder;
 10 
 11 import javax.servlet.ServletException;
 12 import javax.servlet.annotation.WebServlet;
 13 import javax.servlet.http.HttpServlet;
 14 import javax.servlet.http.HttpServletRequest;
 15 import javax.servlet.http.HttpServletResponse;
 16 
 17 import net.sf.json.JSONObject;
 18 import sun.misc.BASE64Decoder;
 19 
 20 /**
 21  * 文件上传Servlet
 22  */
 23 @WebServlet("/UploadServlet")
 24 public class UploadServlet extends HttpServlet {
 25     private static final long serialVersionUID = 1L;
 26     public UploadServlet() {
 27         super();
 28     }
 29     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 30         this.doPost(request, response);
 31     }
 32     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 33         try {
 34             String method = request.getParameter("method");
 35             if (method != null) {
 36                 if (method.equals("uploadImg")) {
 37                     this.uploadImg(request,response);
 38                 }else if (method.equals("deleteImg")) {
 39                     this.deleteImg(request, response);
 40                 }
 41             }else {//当不能从request中直接获取到数据的时候需要从流中读取
 42                 try {
 43                     BufferedReader br = request.getReader();
 44                     String line = null;
 45                     StringBuffer sb = new StringBuffer();
 46                     while((line = br.readLine())!=null){
 47                         sb.append(line);
 48                     }
 49                     String params = sb.toString();
 50                     if(params.contains("method")){                
 51                         request.setAttribute("params", params);
 52                         if (params.contains("uploadImg")){                            
 53                             this.uploadImg(request,response);
 54                         } else if (params.contains("deleteImg")){
 55                             this.deleteImg(request, response);
 56                         } 
 57                         return;
 58                     } else {
 59                         response.getWriter().print("missing parameter 'method'!");
 60                     }
 61                 } catch (Exception e) {
 62                     e.printStackTrace();
 63                 } finally {
 64                     try {
 65                         response.getWriter().close();
 66                     } catch (Exception e) {}
 67                 }
 68             }
 69         } catch (Exception e) {
 70             e.printStackTrace();
 71         }
 72     }
 73     /**
 74      * 上传图片
 75      * @param request
 76      * @param response
 77      */
 78     private void uploadImg(HttpServletRequest request,HttpServletResponse response) {
 79         try {
 80             System.out.println("=================《《图片开始上传》》===================");
 81             response.setContentType("text/html;charset=utf-8");
 82             String imgFile = request.getParameter("imgFile");
 83             String imgName = request.getParameter("imgName");
 84             
 85             //request中没获取到参数时的处理
 86             if (imgFile == null  || imgName == null ) {
 87                 String params = (String)request.getAttribute("params");
 88                 if (params != null && imgFile == null && params.indexOf("imgFile=") != -1){
 89                     imgFile = params.substring(params.indexOf("imgFile=") + "imgFile=".length(), params.indexOf("&imgName="));                   
 90                 }else {
 91                     System.out.println("imgFile参数错误");
 92                     response.getWriter().print(JSONObject.fromObject("{'state':'error','msg':'imgFile参数错误'}").toString());
 93                     return;
 94                 }
 95                 if (params != null && imgName == null && params.indexOf("imgName=") != -1) {
 96                     imgName = params.substring(params.indexOf("imgName=") + "imgName=".length());
 97                 }else {
 98                     System.out.println("imgName参数错误");
 99                     response.getWriter().print(JSONObject.fromObject("{'state':'error','msg':'imgName参数错误'}").toString());
100                     return;
101                 }
102             }
103             //对参数为空进行判断
104             if ("".endsWith(imgFile.trim()) || "".endsWith(imgName.trim())) {
105                 System.out.println("参数为空");
106                 response.getWriter().print(JSONObject.fromObject("{'state':'error','msg':'参数为空'}").toString());
107                 return;
108             }
109             
110             imgName = URLDecoder.decode(imgName,"utf-8");//前面进行了两次编码，这里需要用解码器解码一次
111             //String path = "/site/images"+File.separator+imgName;//Linux文件保存路径
112             String path = "F:\site\images"+File.separator+imgName;//Windows文件保存路径
113             
114             //File file = new File("/site/images");
115             File file = new File("F:\site\images");
116             if(!file.exists() && !file.isDirectory()){//如果文件夹不存在则创建 
117                 System.out.println("文件目录不存在，开始创建");
118                 //file.mkdirs();//生成所有目录
119                 //file.mkdir();//生成最后一层目录
120                 if (!file.mkdirs()) {
121                     System.out.println("文件目录创建失败");
122                     response.getWriter().print(JSONObject.fromObject("{'state':'error','msg':'文件目录创建失败'}").toString());
123                     return;
124                 }
125             }
126             
127             FileOutputStream os = new FileOutputStream(path);
128             imgFile = imgFile.replaceAll("#wb#", "+");
129             BASE64Decoder decoder = new BASE64Decoder();
130             byte[] b = decoder.decodeBuffer(imgFile);
131             for(int i=0;i< b.length;++i){
132                 if(b[i]< 0){//调整异常数据
133                     b[i]+=256;
134                 }
135             }
136             InputStream is = new ByteArrayInputStream(b);
137             int len = 0;
138             while((len=is.read(b))!=-1){
139                 os.write(b,0,len);
140             }
141             os.close();
142             is.close();
143             System.out.println("上传成功,文件保存在："+path);
144             response.getWriter().print(JSONObject.fromObject("{'state':'ok','msg':'上传成功'}").toString());
145         } catch (Exception e) {
146             e.printStackTrace();
147             try {
148                 response.getWriter().print(JSONObject.fromObject("{'state':'error','msg':'"+e.getMessage()+"'}").toString());
149             } catch (IOException e1) {
150                 e1.printStackTrace();
151             }
152         }
153         
154     }
155     /**
156      * 删除图片
157      * @param request
158      * @param response
159      */
160     private void deleteImg(HttpServletRequest request,HttpServletResponse response) {
161         try {
162             System.out.println("=================《《图片开始删除》》===================");
163             String path = request.getParameter("path");
164             if (path == null || "".endsWith(path.trim())) {
165                 System.out.println("path参数错误");
166                 response.getWriter().print(JSONObject.fromObject("{'state':'error','msg':'path参数错误'}").toString());
167                 return;
168             }
169             //删除文件
170             File file = new File(path);
171             //路径存在并且为文件则进行删除  
172             if (file.exists() && file.isFile()) {  
173                 file.delete();
174                 System.out.println("删除成功,文件路径："+path);
175                 response.getWriter().print(JSONObject.fromObject("{'state':'ok','msg':'删除成功'}").toString());
176             }
177         } catch (Exception e) {
178             e.printStackTrace();
179             try {
180                 response.getWriter().print(JSONObject.fromObject("{'state':'error','msg':'"+e.getMessage()+"'}").toString());
181             } catch (IOException e1) {
182                 e1.printStackTrace();
183             }
184         }
185     }
186 
187 }

css样式表文件

 1 .img-box{
 2     margin:0 auto;
 3     top:50%;
 4     width: 500px;
 5     height: 250px;
 6     position:relative;
 7     background: rgb(249,249,249);
 8     border: 1px solid rgb(197, 190, 190);
 9 }
10 .img-box img{
11     max-width: 100%;
12     max-height: 100%;
13     position: absolute;/*绝对定位*/
14     top:50%;
15     left: 50%;
16     -webkit-transform: translate(-50%,-50%); /*-webkit-是厂商前缀*/
17         -ms-transform: translate(-50%,-50%); /*-ms-是厂商前缀*/
18             transform: translate(-50%,-50%);/*translate是移动属性，两个-50%代表着像原始位置向左、向上各移动50%*/
19 }
20 
21 .btn-uploading{    
22     width: 112px;
23     background-color: #3598db;
24     font-size: 15px;
25     line-height: 38px;
26     color: #fff;
27     position:absolute;
28     top:50%;
29     margin-top:-16px;
30     left: 50%;
31     margin-left: -62px;
32     text-align: center;
33     border-radius: 3px;
34     z-index: 5;
35     cursor: pointer;
36 }
37 .icon-uploading{
38     width: 27px;
39     height: 27px;
40     display: inline-block;
41     background: url(/images/upload//upload.png) no-repeat;
42     position: relative;
43     top:6px;
44 }
45 
46 .shan{
47     position: absolute;
48     right:2px;
49     bottom:5px;
50     width: 9px;
51     height: 12px;
52     cursor:pointer;
53 }
54 
55 button{
56     outline: none;
57     border:0 none;
58     
59 }

页面效果

如果想了解多张图片的上传：可参考另一篇博客：JavaScript实现多张图片上传功能