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 案列)