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

java多图片上传的更多相关文章

  1. java多图片上传--前端实现预览--图片压缩 、图片缩放,区域裁剪,水印,旋转,保持比例。

    java多图片上传--前端实现预览 前端代码: https://pan.baidu.com/s/1cqKbmjBSXOhFX4HR1XGkyQ 解压后: java后台: <!--文件上传--&g ...

  2. java web图片上传和文件上传

    图片上传和文件上传本质上是一样的,图片本身也是文件.文件上传就是将图片上传到服务器,方式虽然有很多,但底层的实现都是文件的读写操作. 注意事项 1.form表单一定要写属性enctype=" ...

  3. Java Struts图片上传至指定文件夹并显示图片

    继上一次利用Servlet实现图片上传,这次利用基于MVC的Struts框架,封装了Servlet并简化了JSP页面跳转. JSP上传页面 上传一定要为form加上enctype="mult ...

  4. java实现图片上传功能,并返回图片保存路径

    1.前端html <div class="form-group">     <label for="inputPassword3" class ...

  5. Java Servlet图片上传至指定文件夹并显示图片

    在学习Servlet过程中,针对图片上传做了一个Demo,实现的功能是:在a页面上传图片,点击提交后,将图片保存到服务器指定路径(D:/image):跳转到b页面,b页面读取展示绝对路径(D:/ima ...

  6. java+Word图片上传控件

    这种方法是servlet,编写好在web.xml里配置servlet-class和servlet-mapping即可使用 后台(服务端)java服务代码:(上传至ROOT/lqxcPics文件夹下) ...

  7. java 实现图片上传功能

    1:jsp 页面上传图片按钮在这里我就写相关的代码 <div class="control-group"> <label class="control- ...

  8. java中将图片上传到配置好的ftp服务器上

    测试用例: @Test public void testFtp() throws Exception { //1.连接ftp服务器 FTPClient ftpClient = new FTPClien ...

  9. java后台图片上传预检失败解决方案

    1.首先因为服务器端会先发送一个option请求到后台  在后台返回一个post给页面 页面在处理post请求给接口 2.先写一个过滤器, 我们自己定义一个过滤器 package com.adtime ...

随机推荐

  1. 石川es6课程---3、变量let和常量const

    石川es6课程---3.变量let和常量const 一.总结 一句话总结: let非常好用,尤其是let的块级作用域可以解决之前要(function(){})()立刻执行函数做的块级作用域 1.js中 ...

  2. 解决phpmyadmin出现: Maximum execution time of 300

    在mysql用phpmyadmin导入数据的时候出现: Fatal error: Maximum execution time of 300 seconds exceeded in ... 上网查了很 ...

  3. sql总结-----基本查询

    创建一个测试表,插入一些测试数据: Create Table Cstable (Id Int,Age Int,Name Varchar2(8),Address Varchar2(20)); Inser ...

  4. golang channel关闭后,是否可以读取剩余的数据

    golang channel关闭后,其中剩余的数据,是可以继续读取的. 请看下面的测试例子. 创建一个带有缓冲的channel,向channel中发送数据,然后关闭channel,最后,从channe ...

  5. DVM 和 JVM 的区别?

    a) dvm 执行的是.dex 文件,而 jvm 执行的是.class.Android 工程编译后的所有.class 字节码会被 dex 工具抽取到一个.dex 文件中.b) dvm 是基于寄存器的虚 ...

  6. Go语言基本类型

    1.Go语言fmt包详解 fmt.Println() ###常用打印 fmt.Print() fmt.Printf() ###格式化 fmt.Sprintf() ###字符串拼接 a)普通占位符 占位 ...

  7. gitlab中的CI

    https://blog.csdn.net/chengzi_comm/article/details/78778284

  8. 使用SpringWebFlow

    使用SpringWebFlow 本章主要内容: · 创建会话式的Web应用程序 · 定义流程状态和行为 Spring Web Flow 是Spring MVC 的扩展,它支持开发基于流程的应用程序.它 ...

  9. Dojo入门:初识Dojo

      Dojo的全称是Dojo Toolkit,始创于2004年,是当前各种蓬勃发展的JS工具包中的佼佼者.Dojo 为富互联网应用程序(RIA) 的开发提供了完整的端到端的解决方案,包括核心的 Jav ...

  10. java:Hibernate框架1(环境搭建,Hibernate.cfg.xml中属性含义,Hibernate常用API对象,HibernteUitl,对象生命周期图,数据对象的三种状态,增删查改)

    1.环境搭建: 三个准备+7个步骤 准备1:新建项目并添加hibernate依赖的jar文件  准备2:在classpath下(src目录下)新建hibernate的配置文件:hibernate.cf ...