JAVA图片批量上传JS-带预览功能
这篇文章就简单的介绍一个很好用的文件上传工具，批量带预览功能。直接贴代码吧，都有注释，很好理解。
HTML页面
<!DOCTYPE html>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<c:set var="BASE" value="${pageContext.request.contextPath}"/>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>新增照片</title>
<script type="text/javascript">
var BASE = "${BASE}";
</script>
<!-- 引用控制层插件样式 -->
<link rel="stylesheet" href="${BASE}/www/css/upload/zyupload-1.0.0.min.css " type="text/css">
<script type="text/javascript" src="${BASE}/www/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="${BASE}/www/js/upload/zyupload-1.0.0.min.js"></script>
</head>
<body>
<input type="hidden" id="boxId" value="${boxId}"/>
<div id="zyupload" class="zyupload"></div> <script type="text/javascript">
$(function(){
var boxId = $("#boxId").val();
// 初始化插件
$("#zyupload").zyUpload({
width : "650px", // 宽度
height : "400px", // 宽度
itemWidth : "140px", // 文件项的宽度
itemHeight : "115px", // 文件项的高度
url : BASE+"/photo/add/"+boxId, // 上传文件的路径
fileType : ["jpg","png","txt","js","exe","gif"],// 上传文件的类型
fileSize : 51200000, // 上传文件的大小
multiple : true, // 是否可以多个文件上传
dragDrop : true, // 是否可以拖动上传文件
tailor : true, // 是否可以裁剪图片
del : true, // 是否可以删除文件
finishDel : false, // 是否在上传文件完成后删除预览
/* 外部获得的回调接口 */
onSelect: function(selectFiles, allFiles){ // 选择文件的回调方法 selectFile:当前选中的文件 allFiles:还没上传的全部文件
console.info("当前选择了以下文件：");
console.info(selectFiles);
},
onDelete: function(file, files){ // 删除一个文件的回调方法 file:当前删除的文件 files:删除之后的文件
console.info("当前删除了此文件：");
console.info(file.name);
},
onSuccess: function(file, response){ // 文件上传成功的回调方法
console.info("此文件上传成功：");
console.info(file.name);
console.info("此文件上传到服务器地址：");
console.info(response);
$("#uploadInf").append("<p>上传成功，文件地址是：" + response + "</p>");
},
onFailure: function(file, response){ // 文件上传失败的回调方法
console.info("此文件上传失败：");
console.info(file.name);
},
onComplete: function(response){ // 上传完成的回调方法
console.info("文件上传完成");
console.info(response);
}
}); }); </script>
</body>
</body>
</html>
JS和CSS、IMAGES文件下载地址https://page69.ctfile.com/fs/3775069-203728262，自己根据html中的导入，找不到的在eclipse全局搜索
action代码：根据需求改地址
@RequestMapping(value="/add/{boxId}", method={RequestMethod.POST})
public void addPhotospost(@PathVariable(value="boxId") String boxId, HttpServletRequest request,HttpServletResponse response ) throws IOException {
ServletContext servletContext=request.getSession().getServletContext();
String newFileName="";
PrintWriter out = response.getWriter();
//文件保存目录路径
String savePath = "E:/";
//String savePath = this.getServletContext().getRealPath("/") + configPath;
// 临时文件目录
String tempPath = servletContext.getRealPath("/") + Constant.dirTemp;
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMM");
String ymd = sdf.format(new Date());
savePath += "/" + ymd + "/";
//创建文件夹
File dirFile = new File(savePath);
if (!dirFile.exists()) {
dirFile.mkdirs();
}
tempPath += "/" + ymd + "/";
//创建临时文件夹
File dirTempFile = new File(tempPath);
if (!dirTempFile.exists()) {
dirTempFile.mkdirs();
}
DiskFileItemFactory factory = new DiskFileItemFactory();
factory.setSizeThreshold(20 * 1024 * 1024); //设定使用内存超过5M时，将产生临时文件并存储于临时目录中。
factory.setRepository(new File(tempPath)); //设定存储临时文件的目录。
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setHeaderEncoding("UTF-8");
try {
List items = upload.parseRequest(request);
System.out.println("items = " + items);
Iterator itr = items.iterator();
while (itr.hasNext())
{
FileItem item = (FileItem) itr.next();
String fileName = item.getName();
long fileSize = item.getSize();
if (!item.isFormField()) {
String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;
try{
File uploadedFile = new File(savePath, newFileName);
OutputStream os = new FileOutputStream(uploadedFile);
InputStream is = item.getInputStream();
byte buf[] = new byte[1024];//可以修改 1024 以提高读取速度
int length = 0;
while( (length = is.read(buf)) > 0 ){
os.write(buf, 0, length);
}
//关闭流
os.flush();
os.close();
is.close();
System.out.println("上传成功！路径："+savePath+"/"+newFileName);
out.print(savePath+"/"+newFileName);
}catch(Exception e){
e.printStackTrace();
}
}else {
String filedName = item.getFieldName();
System.out.println("===============");
System.out.println(new String(item.getString().getBytes("iso-8859-1"),
"utf-8"));
System.out.println("FieldName："+filedName);
// 获得裁剪部分的坐标和宽高
System.out.println("String："+item.getString());
}
}
} catch (FileUploadException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
out.flush();
out.close();
}
效果图：
JAVA图片批量上传JS-带预览功能的更多相关文章
- 通过修改ajaxFileUpload.js实现多图片动态上传并实现预览
参考:http://smotive.iteye.com/blog/1903606 大部分我也是根据他的方法修改的,我也要根据name实现动态的多文件上传功能,但是有个问题使我一直无法实现多文件上传. ...
- 分离与继承的思想实现图片上传后的预览功能：ImageUploadView
本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路,考虑到该功能有一定的适用性,于是把相关的逻辑封装成了一个ImageUploadView组件,实际使用效果可查看下一段的git效果图 ...
- Asp.net中FileUpload控件实现图片上传并带预览显示
单一图片上传——“选择”+“上传”,.NET默认模式: 1.实现原理: 采用FileUpload控件默认的使用方式,先由“选择”按钮选择图片,然后单击“上传”按钮完成上传,并可在“上传”按钮的 ...
- Java Spring Boot 上传文件和预览文件地址解析
@RequestMapping(value ="/upload",method = RequestMethod.POST) @Permission(isAjax=false) pu ...
- asp.net无刷新上传（带预览）
1.有个图片 <img id="Image1" title="用于广告栏及图文框缩略图" width="150" height=&qu ...
- jquery实现图片上传前本地预览功能
HTML <img id="pic" src="" > <input id="upload" name="fil ...
- Nodejs实现图片的上传、压缩预览、定时删除
前言 我们程序员日常都会用到图片压缩,面对这么常用的功能,肯定要尝试实现一番.第一步,node基本配置 这里我们用到的是koa框架,它可是继express框架之后又一个更富有表现力.更健壮的web框架 ...
- javascript实现文件上传之前的预览功能
1.首先要给上传文件表单控件和图片控件设置name属性 <div class="form-group"> <label fo ...
- jsp+springmvc实现文件上传、图片上传和及时预览图片
1.多文件上传:http://blog.csdn.net/a1314517love/article/details/24183273 2.单文件上传的简单示例:http://blog.csdn.net ...
随机推荐
- azure备份虚拟机
备份 azure虚拟机 提前创建了一个linux虚拟机,位置是chinaeast. 如果我们需要备份的虚拟机分别在中国东部和北部,那么需要在两个位置都创建备份库. 创建库 登录经典门户,新建-> ...
- 你绝不能错过的效率神器 —— Alfred
文章首发于[博客园-陈树义],点击跳转到原文<你绝不能错过的效率神器 -- Alfred> Alfred 是 Mac 系统上一款专注于效率提升的著名应用,它能帮你快速打开网页.快速进行自定 ...
- gitup问题的处理
在使用本地建立git仓库后,准备使用 因为之前已经登录了,所以没有给登录的命令行 1.git init 命令初始化仓库 2.git add . 命令将所有的文件传输到git仓库 ...
- POJ3624--01背包
Charm Bracelet Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 34013 Accepted: 15087 ...
- 用echartsjs 实现动态绘制折线、柱状等图形，并实现多图联动效果
echarts对于大数据处理后绘制折线图,柱形图等等的效果和速度都很好.下面我们介绍 怎么把封装的数据列表解析出来,动态绘图,并且实现鼠标联动效果引入js文件: <script type=&qu ...
- c# textbox的滚动条总是指向最底端
当我第一次添加滚动条时候,我发现滚动条总是跑向上方,经过研究 解决方案如下: this.textBox1.Focus(); 获取焦点 this.textBox1.Select(this.textBox ...
- Python中创建ndarrary的20中方法
本文完整示例:完整示例代码 本文介绍了基础的.常用的创建ndarrary的多种方法,附带示例代码. 一.通过ndarray创建 import numpy as np 1.1 一维数组 a = np.a ...
- Protocol Buffer序列化对比Java序列化.
初识 Protocol Buff是谷歌推出的一种序列化协议. 而Java序列化协议也是一种协议. 两者的目的是, 将对象序列化成字节数组, 或者说是二进制数据, 那么他们之间有什么差异呢. proto ...
- Android注解方式实现表单校验
在开发中总会遇到输入框的输入规则限制 比如 电话输入框电话号码的校验,密码规则的校验等 ,我们通常做法是提交操作时对每个输入框的输入内容进行校验,很多的if else ,代码看起来很乱,其实我们可以用 ...
- Linux多线程编程——线程的同步
POSIX信号量 posix信号量不同于IPC中的信号量 常用的posix信号量函数 #include <semaphore.h> int sem_init(sem_t* sem,i ...