正文
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 案列)
照片添加
