java多圖片上傳

2017-09-16

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
function imgChange(obj1, obj2) {
            var z_photo = $('.z_photo')[0];
            var z_photo_length = z_photo.children.length - 1;
            
            if (z_photo_length >= 3){
                alert('預覽圖片不能大於3張！！！')
                return;
            } 
            //z_photo.style.width = z_photo_length * 50 + 288 + 'px';
            
            //獲取點擊的文本框
            var file = document.getElementById("file");
            //存放圖片的父級元素
            var imgContainer = document.getElementsByClassName(obj1)[0];
            //獲取的圖片文件
            var fileList = file.files;
            //文本框的父級元素
            var input = document.getElementsByClassName(obj2)[0];
            var imgArr = [];
            var img;
            //遍歷獲取到得圖片文件
            
            if (fileList.length > 3){
                alert('預覽圖片不能大於3張！！！')
                return;
            } 
            for (let i = 0; i < fileList.length; i++) {
                // var imgUrl = window.URL.createObjectURL(file.files[i]);

               let reader = new FileReader();
               var imgUrl = reader.readAsDataURL( file.files[i] )
               reader.onload = (e)=>{
                     //base64加密發送到后台
                    let result = e.target.result.replace(/data\:image\/\w.+;base64,/, '')

                     $.ajax({
                    type: 'post',
                    url: '<%=basePath%>BACKEND/uploadtest1_upload',//發送到后台的請求路徑
                    dataType: 'json',
                    data: {
                        suju: result
                    },
                    success: (res) => {
                          //獲取后台傳來的刪除預覽圖的地址
                          var deletePath = res.files[0].delete_url;
                           //獲取后台預覽的圖片
                          var srcUrl = res.files[0].url.replace(/\\/g, '/');
                          console.log(srcUrl);
                          let len = i;
                          if( len === 0 ){
                              len = z_photo_length;
                          }
                          //把數據寫入文本款  便於提交頁面發送到后端
                          var saveImgPath = document.createElement("input");
                          saveImgPath.value = imgPath1;
                          saveImgPath.type = 'hidden';
                          saveImgPath.name = 'imgPojoList['+ len +'].t_itemUrl';
                          
                          var teq = document.createElement("input");
                          teq.value = z_photo_length;
                          teq.type = 'hidden';
                          teq.name = 'imgPojoList['+ len +'].t_seq';
                          
                          var t_itemType = document.createElement("input");
                          t_itemType.value = "2";
                          t_itemType.type = 'hidden';
                          t_itemType.name = 'imgPojoList['+ len +'].t_itemType';
                          //添加預覽圖
                          var img = document.createElement("img");
                          img.setAttribute("data-delePath", deletePath );
                          img.setAttribute("src", imgPath );
                          //添加刪除預覽圖圖表
                          var clearIco = document.createElement("span");
                          clearIco.setAttribute("class", "delete_parent");
                          clearIco.innerHTML = 'X';
                          
                          
                          var imgAdd = document.createElement("div");
                          imgAdd.setAttribute("class", "z_addImg");
                          imgAdd.appendChild(clearIco);
                          imgAdd.appendChild(saveImgPath);
                          imgAdd.appendChild(teq);
                          imgAdd.appendChild(t_itemType);
                          imgAdd.appendChild(img);
             $('.z_photo')[0].insertBefore(imgAdd, $('.z_file')[0] );
                    
                        imgRemove();
                    },
                    error: (err) =>{
                        console.log( err.status )
                    }
                })
               } 
            };

            
        };
          //刪除預覽圖
        function imgRemove() {
            var imgList = document.getElementsByClassName("z_addImg");
            var mask    = document.getElementsByClassName("z_mask")[0];
            var cancel  = document.getElementsByClassName("z_cancel")[0];
            var sure    = document.getElementsByClassName("z_sure")[0];

            $( imgList ).on('click','.delete_parent',function(e){
                  var _self = $(this);    
                   _self.parent().animate({
                       'margin-top': '40px',
                       'opacity': 0
                   },function(){
                       $(this).remove();
                   })
              
               var delPath = _self.siblings('img').data('delepath');
               $.ajax({
                    type: 'post',
                    url: '<%=basePath%>BACKEND/delUploadtest1_upload',
                    dataType: 'json',
                    data: {
                        delSuju: delPath
                    },
                    success: (res) => {
                         
                    },
                    error: (err) =>{
                        console.log( err.status );
                    }
                })

            })
        };
// ]]></script>

第一次發 不知道js要這樣發

 

 

 由於公司需求，一些商品的評論圖片 ，需要多上傳，接到任務 直接干 呵呵！

本人是純小白，自己研究了幾天  終於寫出一個滿足要求的功能，哈哈，不哆嗦！

下面記錄一下自己所寫的

 

<div class="container"><!--    照片添加    -->
<div class="z_photo">
<div class="z_file"><label class="addImgLabel" for="file"></label> <input id="file" style="display: none;" type="file" name="file" value="" onchange="imgChange('z_photo','z_file');" accept="image/gif,image/jpeg,image/png" /></div>
</div>
</div>

 

接下來是后台java代碼：純小白寫的，不足請大神指教！

//后台接收圖片的action

ps(這里寫入自己接收前端發送數據的方法就ok)

package com.law.ybwsc.action.backend;

import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletContext;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import org.apache.struts2.ServletActionContext;
import org.hibernate.sql.Update;
import sun.misc.BASE64Decoder;
import com.law.ybwsc.action.BaseAction;
import com.law.ybwsc.util.JsonUtil;
import com.law.ybwsc.util.wx.Base64Util;

public class UploadAction extends BaseAction {


    private String pageType;

    private String shuju;
   

  /**
   * delUploadtest1 刪除上傳圖片   
   * ds：前端上傳的圖片路勁
   */
    public void  delUploadtest1(){
        String ds = getRequest().getParameter("delSuju");
        
                File file = new File(ds);
                // 如果文件路徑所對應的文件存在，並且是一個文件，則直接刪除
                if (file.exists() && file.isFile()) {
                    if (file.delete()) {
                        System.out.println("刪除單個文件" + ds + "成功！");
    
                    } else {
                        System.out.println("刪除單個文件" + ds + "失敗！");
                        
                    }
                } else {
                    System.out.println("刪除單個文件失敗：" + ds + "不存在！");
                    
                }
          

    }
    /*
     * 上傳圖片
     * 圖片存目錄：/ybwsc/WebContent/FRONTEND/images/testImg下
     */
    public void uploadtest1() throws IOException  {
        String projectName = getRequest().getContextPath();
        String basePath = getRequest().getScheme() + "://" + getRequest().getServerName()
                + ((getRequest().getServerPort() == 80) ? "" : (":" + String.valueOf(getRequest().getServerPort()))) + projectName + "/";
          
        String ds = getRequest().getParameter("shuju");
       String type=getRequest().getParameter("nameType");
        type="."+type;

   //ds接收前端上傳的 base64字符串  type，圖片的后綴
        String path=  Base64Util.GenerateImage(ds,type);
        
         String[] re = path.split("項目名字");//用split()函數直接分割
           System.out.println(re[1]);
           String url=re[1];
           url=   url.substring(1,url.length());
          url= url.replace("\\", "/");
         //url用於返回前端顯示或者存到數據庫的圖片路徑

          //用於刪除預覽圖的路勁
          System.out.println(url);
        Map map=new HashMap<String,String>();
        List<Map<String,String>> list=new ArrayList<Map<String,String>>();
        Map map1=new HashMap<String,String>();
        map1.put("url", url);
        map1.put("delete_url", path);
        list.add(map1);
        map.put("files", list);
        String json=JsonUtil.objectToJson(map);
         try {
            ServletActionContext.getResponse().getWriter().write(json);
               }catch (IOException e) {
              e.printStackTrace();
              }
    }  
       
   
 
    
     public String getPageType() {
            return pageType;
        }
        public void setPageType(String pageType) {
            this.pageType = pageType;
        }
    public String getShuju() {
        return shuju;
    }
  public void setShuju()(String shuju) {
            this.shuju= shuju;
        }
}
}

 

//生成圖片的工具類

package com.law.ybwsc.util.wx;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;  
import java.io.IOException;  
import java.io.InputStream;  
import java.io.OutputStream;  
import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Date;
import java.util.Properties;

import javax.xml.crypto.Data;

import sun.misc.BASE64Decoder;  
import sun.misc.BASE64Encoder;
/**
 * @GetImageStr() 圖片轉化成base64字符串
 * @author Administrator
 * @GenerateImage() base64字符串轉化成圖片  
 */
public class Base64Util {

    //base64字符串轉化成圖片  
    public static String GenerateImage(String imgStr,String type) throws IOException  {   //對字節數組字符串進行Base64解碼並生成圖片
    
 
        
        if (imgStr == null) //圖像數據為空  
            return "null";  
        BASE64Decoder decoder = new BASE64Decoder();  
        try   
        {  
            //Base64解碼  
            byte[] b = decoder.decodeBuffer(imgStr);  
            for(int i=0;i<b.length;++i)  
            {  
                if(b[i]<0)  
                {//調整異常數據  
                    b[i]+=256;  
                }  
            }  
            Date time=new Date();
           long times = time.getTime();   
         //獲取正在項目運行的類路徑 ，這里如果不這樣寫直接寫入項目的文件夾里 ，需要刷項目才能顯示 ps(小白的思想)
           String path=Thread.currentThread().getContextClassLoader().getResource("/").getPath().replace("WEB-INF/classes","upload");
        // 這里是根據公司的需求寫存圖片的臨時文件夾
           path= path.replace("/", "\\");
           path+="/";
          path=path.substring(1, path.length()-1);
          Calendar now = Calendar.getInstance();  
          String y =  ""+ now.get(Calendar.YEAR);  
          String m =  "\\"+(now.get(Calendar.MONTH) + 1) ;  
          String d =  "\\"+ now.get(Calendar.DAY_OF_MONTH);
              
             String dateString = y+m+d;
             path+=dateString;
             path+="\\FRONTEND\\userFace\\";
           String imgFilePath =path+times+type;//新生成的圖片  
           String filepath=path;
           File file1=new File(filepath);
           file1.mkdirs();

  //umgstr:是前端傳來的base64字符串，type是圖片的類型 也是前端傳來的
          System.out.println(imgFilePath);
            //生成圖片圖片文件
           File file=new File(imgFilePath);
          
          
         
         if(!file.exists())    
           {    
               try {    
                   file.createNewFile();    
               } catch (IOException e) {    
                   // TODO Auto-generated catch block    
                   e.printStackTrace();    
               }    
           }  
 
                
           //寫入圖片
           OutputStream out = new FileOutputStream(imgFilePath);      
           out.write(b);  
           out.flush();  
           out.close();  
          
            return imgFilePath;  
        }   
        catch (Exception e)   
        {  
            return "保存失敗";  
        }  
    }  

    
}
就是頁面有點丑逼 哈哈！后面改進了 一下頁面 

大致的思路就是 前端發送異步請求 （base64字符串 ，圖片后綴名）-》后台接收處理后 儲藏到項目的臨時文件夾 -》返回文件的路徑給前端 前端處理

后面處理了 一下前端頁面

大致就是這樣了  純小白  qq 1297890157 ps（第一次記錄自己所寫的 不足請多多指教）

 

Bootstrap FileInput (java ssm 案列)