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