Bootstrap框架---Uploadify插件----多张图片上传交互方式一
我们在前一章已经实现了Bootstrap框架---Uploadify插件----单张图片上传。
Bootstrap框架----单张图片上传实现---Uploadify插件
本章实现Bootstrap框架---Uploadify插件----多张图片上传交互方式一 。
本章主要关注多张图片上传在Bootstrap框架中的布局和实现。
我们在之前的文章中已经在SpringMVC基础框架的基础上应用了BootStrap的后台框架,在此基础上记录 多张图片上传在Bootstrap框架中的布局方式一和实现。
应用bootstrap模板
基础项目源码下载地址为:
SpringMVC+Shiro+MongoDB+BootStrap基础框架
我们在基础项目中已经做好了首页index的访问。
现在就在index.jsp页面和index的路由Controller上做修改,实现 多张图片上传在Bootstrap框架中的布局和实现。
效果图
实现思路是平行的初始化Uploadify,比如要上传2张,就初始化出2个上传组件。
这里的话只支持少量固定多张图片上传,比如一个实体中有2到3个图片字段时。
Uploadify插件介绍
Uploadify是jQuery的一个上传插件,主要功能是批量上传文件,实现的效果非常不错,带进度显示。而且是Ajax的,省去了自己写Ajax上传功能的麻烦。不过官方提供的实例是PHP版本的,本文将详细介绍Uploadify在J2EE中的使用。
Uploadify的官网链接:http://www.uploadify.com/
里面可以看到PHP的示例,属性说明,以及控件下载地址。
分flash版(免费)和HTML5版(收费)。
官网上可以看到效果演示。
需要注意的是flash版在Safari不支持。
会报错:
Uploadify Flash Safari wrong JSESSIONID
uploadifyHtml5
JSP页面
<%@ include file="./include/header.jsp"%>
<style>
/*uploadfive上传插件背景按钮图样式*/
.upload-image {height: 200px;width: 200px;background-image: url(/res/assets/img/demoUpload.jpg);background-color: white;background-repeat: no-repeat;background-size: contain;background-origin: content-box;background-position: center;background-size: contain;background-origin: content-box;
}
</style><div id="page-wrapper"><div id="page-inner"><div class="row"><div class="col-md-12"><h1 class="page-header">多(两)张图片上传 <small>Uploadify</small></h1></div></div><!-- /. ROW --><form class="form-horizontal" id="test"><input type="text" value="${pic.id}" id="id" name="id" hidden/><div class="form-group"><label for="name" class="col-sm-2 control-label">名称:</label><div class="col-sm-10"><input type="text" class="form-control" id="name" name="name" value="${pic.name}"placeholder="路线名称,例如:A-F"></div></div><div class="form-group"><label class="col-sm-2 control-label">描述:</label><div class="col-sm-10"><textarea id="description" name="description" class="form-control"rows="8">${pic.description}</textarea></div></div><div class="form-group"><label for="icon" class="col-sm-2 control-label">树图片</label><div class="col-sm-10"><input type="text" class="form-control" id="img_upload_filePath"value="${pic.img}" name="img" placeholder="图片地址" readonlyref-selector=".ref-icon"/></div></div><c:if test="${pic.img!=null&&pic.img!=''}"><div class="form-group"><div class="col-sm-6 col-sm-offset-2"><button type="button" class="btn btn-danger delete"data-loading-text="删除中..." id="img_upload_delete" id="img-del">删除树图片</button></div></div></c:if><div class="form-group"><div class="col-sm-6 col-sm-offset-2"><imgsrc="${pic.img!=null&&pic.img!=''?pic.img:'/res/assets/img/demoUpload.jpg'}"id="img_upload_uploader" class="img-thumbnail img_upload_uploader"style="width:300px; height:300px;"></div></div><div class="form-group"><label for="icon" class="col-sm-2 control-label">全路线图片</label><div class="col-sm-10"><input type="text" class="form-control" id="lineImg_upload_filePath"value="${pic.lineImg}" name="lineImg" placeholder="图片地址" readonlyref-selector=".ref-icon"/></div></div><c:if test="${pic.lineImg!=null&&pic.lineImg!=''}"><div class="form-group"><div class="col-sm-6 col-sm-offset-2"><button type="button" class="btn btn-danger delete"data-loading-text="删除中..." id="lineImg_upload_delete" id="img-del">删除路线图片</button></div></div></c:if><div class="form-group"><div class="col-sm-6 col-sm-offset-2"><imgsrc="${pic.lineImg!=null&&pic.lineImg!=''?pic.lineImg:'/res/assets/img/demoUpload.jpg'}"id="lineImg_upload_uploader" class="img-thumbnail lineImg_upload_uploader"style="width:300px; height:300px;"></div></div><div class="form-group"><div class="col-sm-6 col-sm-offset-2"><button type="button" class="btn btn-default cancel"data-dismiss="modal">取消</button><button type="button" class="btn btn-primary save"data-loading-text="Saving...">确认</button></div></div></form> <!-- /. ROW --></div><!-- /. PAGE INNER --></div><!-- /. PAGE WRAPPER --><%@ include file="./include/footer.jsp"%>
<script type="text/javascript" src="/plugins/uploadify/jquery.uploadifive.js"></script>
<script type="text/javascript">$(document).ready(function () { //图片容器的显示图片切换var updateUploadButtonBackground = function (id, path) {path ? $('#uploadifive-' + id).css('background-image', 'url(' + path + ')') : $('#' + id + '-button').css('background-image', 'url(/res/assets/img/demoUpload.jpg)');};//初始化图片上传容器var initImageUploader = function () {$('.img_upload_uploader, .lineImg_upload_uploader').each(function () {var selfId = this.id;var $input = $('#' + selfId.replace('_uploader', '_filePath'));console.log($input);$(this).uploadifive({'height': 300,'width': 300,'uploadScript': '/upload;_sid=${pageContext.session.id}','fileSizeLimit': '1200KB','buttonClass': 'upload-image img-thumbnail','buttonText': '','multi': false,'onInit': function (instance) {updateUploadButtonBackground(selfId, $input.val());},'removeCompleted': true,'onUploadComplete': function (file, data, response) {data = JSON.parse(data);if (data.code) {var url = '${hostname}' + data.result;$input.val(url);updateUploadButtonBackground(selfId, url);}}});});};initImageUploader();//删除图片$('button.delete').on('click',function () {if (confirm('是否删除图片?')) {var selfId = this.id;var $input = $('#' + selfId.replace('_delete', '_filePath'));var uploaderId = selfId.replace('_delete', '_uploader');updateUploadButtonBackground(uploaderId, '/res/assets/img/demoUpload.jpg');$input.val('');}});$('button.save').on('click', function () {debugger;var data = $('#test').formGet();if (!data.name || (data.name.trim()).length == 0) {alert("名称不能为空.");return false;}$.ajax({type: "POST",url: "/pic/save",contentType: "application/json",data: JSON.stringify(data),success: function (result) {console.log(result);if (!result.code) {$('#test').formSet(data);alert(result.msg);} else {alert(result.msg);}},error: function (result) {alert("出错了,请稍后重试");}});});});</script></body></html>
返回信息辅助实体类
AjaxResult.java
package com.test.util;import org.springframework.data.annotation.Transient;/*** AjaxResult* * 标准化的ajax响应, 取代之前直接返回结果的方式。* */
public class AjaxResult {@Transientpublic static final int CODE_SUCCESS = 1;@Transientpublic static final int CODE_FAILURE = 0;@Transientpublic static final AjaxResult RESULT_ERROR = new AjaxResult(CODE_FAILURE, "执行出错了", null);@Transientpublic static final AjaxResult RESULT_SUCCESS = new AjaxResult(CODE_SUCCESS, null, null);@Transientpublic static final AjaxResult RESULT_INVAILD_PARAMETER = new AjaxResult(CODE_FAILURE, "参数格式不正确", null);private int code = CODE_FAILURE;private String error;private Object result;public static AjaxResult resultError(String error) {return new AjaxResult(CODE_FAILURE, error, null);}public static AjaxResult resultSuccess(Object result) {return new AjaxResult(CODE_SUCCESS, null, result);}/*** @param code* @param error* @param result*/public AjaxResult(int code, String error, Object result) {super();this.code = code;this.error = error;this.result = result;}/*** @return the code*/public int getCode() {return code;}/*** @param code* the code to set*/public void setCode(int code) {this.code = code;}/*** @return the error*/public String getError() {return error;}/*** @param error* the error to set*/public void setError(String error) {this.error = error;}/*** @return the result*/public Object getResult() {return result;}/*** @param result* the result to set*/public void setResult(Object result) {this.result = result;}
}
JSONResult.java
package com.test.util;/*** JSONResult* 标准化的JSON响应* * <pre>* {@link JSONResult#success(Object)}* {@link JSONResult#error(String)}* </pre>* * */
public class JSONResult {/*** 成功的代码*/public static final int CODE_SUCCESS = 0;/*** 错误的代码,可根据错误类型进行详细分类*/public static final int CODE_ERROR = -1;/*** 空白的成功响应*/public static final JSONResult RESULT_SUCCESS_NO_DATA = new JSONResult(CODE_SUCCESS, null, null);private int code;private String msg;private Object data;/*** 创建一个成功的响应* * @param data* @return*/public static JSONResult success(Object data) {return new JSONResult(CODE_SUCCESS, null, data);}/*** 创建一个错误的响应* * @param msg* @return*/public static JSONResult error(String msg) {return new JSONResult(CODE_ERROR, msg, null);}/*** @param code* @param msg* @param data*/public JSONResult(int code, String msg, Object data) {this.code = code;this.setMsg(msg);this.data = data;}public int getCode() {return code;}public JSONResult setCode(int code) {this.code = code;return this;}public Object getData() {return data;}public JSONResult setData(Object data) {this.data = data;return this;}public String getMsg() {return msg;}public JSONResult setMsg(String msg) {this.msg = msg;return this;}}
Pic.java
package com.test.domain.entity;public class Pic {private String id;private String name;private String description;private String img;private String lineImg;public String getId() {return id;}public void setId(String id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getDescription() {return description;}public void setDescription(String description) {this.description = description;}public String getImg() {return img;}public void setImg(String img) {this.img = img;}public String getLineImg() {return lineImg;}public void setLineImg(String lineImg) {this.lineImg = lineImg;}}
页面路由控制器
IndexController.java
package com.test.web.controller;import java.io.IOException;import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;import com.test.domain.entity.Pic;
import com.test.util.JSONResult;/*** IndexController* * */
@Controller
public class IndexController {@RequestMapping("/")public String index(Model model) throws IOException {model.addAttribute("hostname", "http://127.0.0.1:8080/");return "/index";}@RequestMapping("/pic/save")@ResponseBodypublic JSONResult saveMigrateLine(@RequestBody Pic pic) {//保存pic记录//int result = save(pic);int result =1;return result > 0 ? JSONResult.success(pic):JSONResult.error("保存失败!");}
}
文件上传接收控制器
UploadController.java
package com.test.web.controller;import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;import com.test.util.AjaxResult;/*** 通用的上传(保存到本地服务器)* */
@Controller
public class UploadController {private final Logger logger = LoggerFactory.getLogger(getClass().getName());/*** 上传到服务器,文件名称随机生成(基本可以保证不重复)* * @param request* @param response* @return AjaxResult 存储的文件的相对路径* @throws IOException */@RequestMapping("/upload")@ResponseBodypublic AjaxResult upload(HttpServletRequest request, HttpServletResponse response) throws IOException {try {String filePath="/uploadfile";//获取文件存储路径 (虚拟目录映射为本机服务器的实际目录)String path = request.getSession().getServletContext().getRealPath(filePath); //如果保存在ROOT里,重新发包后静态资源会丢失,所以保存在ROOT包的上级路径webapp中path=path.replace("ROOT\\", "");String fileNameResult ="";// 判断enctype属性是否为multipart/form-data boolean isMultipart = ServletFileUpload.isMultipartContent(request); if (!isMultipart) throw new IllegalArgumentException( "上传内容不是有效的multipart/form-data类型."); // Create a factory for disk-based file items DiskFileItemFactory factory = new DiskFileItemFactory(); // Create a new file upload handler ServletFileUpload upload = new ServletFileUpload(factory); // Parse the request List<?> items = upload.parseRequest(request); Iterator iter = items.iterator(); while (iter.hasNext()) { FileItem item = (FileItem) iter.next(); if (item.isFormField()) { // 如果是普通表单字段 String name = item.getFieldName(); String value = item.getString(); // ... } else { // 如果是文件字段 String fieldName = item.getFieldName(); String fileName = item.getName(); String contentType = item.getContentType(); boolean isInMemory = item.isInMemory(); long sizeInBytes = item.getSize(); String fileExt = fileName.substring(fileName.lastIndexOf('.'));String fileNameNew =getFileNameNew()+fileExt;fileNameResult=fileNameNew;//保存到本地InputStream uploadedStream = item.getInputStream(); savePic(path,uploadedStream,fileNameNew);uploadedStream.close(); } } return AjaxResult.resultSuccess(filePath+"/"+fileNameResult);} catch (FileUploadException e) {logger.warn(e.getMessage(), e);return AjaxResult.resultError(e.getMessage());}}private void savePic(String path,InputStream inputStream, String fileName) {OutputStream os = null;try {// 2、保存到临时文件// 1K的数据缓冲byte[] bs = new byte[1024];// 读取到的数据长度int len;// 输出的文件流保存到本地文件File tempFile = new File(path);if (!tempFile.exists()) {tempFile.mkdirs();//如果图片是保存在ROOT项目外,首次创建目录,tomcat加载需要时间,所以需要延迟10秒Thread.sleep(10000);}os = new FileOutputStream(tempFile.getPath() + File.separator + fileName);// 开始读取while ((len = inputStream.read(bs)) != -1) {os.write(bs, 0, len);}} catch (IOException e) {e.printStackTrace();} catch (Exception e) {e.printStackTrace();} finally {// 完毕,关闭所有链接try {os.close();inputStream.close();} catch (IOException e) {e.printStackTrace();}}}private String getFileNameNew() {SimpleDateFormat fmt = new SimpleDateFormat("yyyyMMddHHmmssSSS");return fmt.format(new Date());}}
目前上传的文件是接收后保存到本地服务器中,如果要上传到远程服务器或者七牛云等,只需要修改UploadController.java即可。
这里只给出了 uploadify 上传图片的案例。 但其实 这个DEMO也可以用于上传 zip等文件。 只需要稍微调整jsp页面把图片显示去掉即可。
Bootstrap框架---Uploadify插件----多张图片上传交互方式一相关推荐
- asp.net中使用Uploadify插件实现多张图片上传,上传后可显示缩略图、删除图片
本文为原创文章,欢迎转载!转载时请注明出处:http://blog.csdn.net/c_yang13 一.准备工具 1.jquery,我使用的是jquery-1.11.3.min.js 2.uplo ...
- java多图片上传插件,Bootstrap中的fileinput 多图片上传及编辑功能
Bootstrap中的fileinput 多图片上传及编辑功能 2019-01-01 编程之家收集整理的这篇文章主要介绍了Bootstrap中的fileinput 多图片上传及编辑功能,编程之家小编觉 ...
- 如何实现上传多个图片并依次展示_Html5实现单张、多张图片上传功能
前言 今天我们聊一聊图片上传,单张Or多张 ,如今,各大图片上传插件数不胜数,例如:Jquery的 verupload.js,jQuery File Upload.Uploadify.jQuery.f ...
- 利用策略模式结合alibaba/alpha框架优化你的图片上传功能
图片上传作为一个App经常用到的功能,项目中可以使用各种成熟的框架去完成,但往往实际的情况比想象的复杂.假设我们的上传功能需要满足下面的情况: 支持上传一张图 支持上传多张图 上传多张图时能获取到每张 ...
- js插件---IUpload文件上传插件(包括图片)
js插件---IUpload文件上传插件(包括图片) 一.总结 一句话总结:上传插件找到真正上传位置的代码,这样就可以知道整个上传插件的逻辑了, 找资料还是github+官方 1.如何在js中找到真正 ...
- Django 用 uploadify 实现图片批量上传
分享一下在Django中使用uploadify--一个jQuery批量上传插件--的方法.github上的django-uploadify使用的是2.1.4版本,上传button只能使用图片,不能很方 ...
- php mysql上传多张图片_PHP实现一次性多张图片上传功能
原标题:PHP实现一次性多张图片上传功能 最近遇到一个需求,就是多张图片上传,按住Ctrl键能选择多张图片一次性上传,上传成功后数据库保存图片的路径及图片原来的文件名.该功能一般在比较成熟的内容编辑器 ...
- django文件——django + jquery-file-upload上传篇(二)-- 插件实现文件上传+进度条显示 +拖入文件上传...
django + jquery-file-upload 插件实现文件上传+进度条显示 1.model.py class Fujian(models.Model):name = models.CharF ...
- 调用android的拍照或本地相册选取再实现相片上传服务器,Android调用系统相机、本地相册上传图片(头像上传(裁剪)、多张图片上传)...
开发中基本上都会有头像上传的功能,有的app还需要多张图片同时上传,下面简单将头像上传以及多张图片上传功能整理一下.图片选择仿照微信选择图片的界面.[参考] 多图片选择器 !!!推荐一个动态权限请求的 ...
- Linux使用445端口,利用enum4linux 445端口+wordpress插件任意文件上传的一次渗透
探测内网80端口发现目标IP 目标使用Apache 2.4.7web服务中间件 使用linux Ubuntu系统 使用御剑扫描了目录 目录扫描到了 对192.168.31.236/wordpr ...
最新文章
- 山寨上网本溃败的两点教训
- 2 关于数据仓库维度数据处理的方法探究系列——无变化维度处理
- r8169驱动下载linux,CentOS自带R8169驱动与R8168网卡之间的烦恼
- 爬虫 - 豆瓣网《小王子》热评
- 到底是谁发明了物联网?
- linux显示mem进行排序,Linux查看系统负载(CPU和MEM考虑)
- oracle近三个月内,在oracle中的前三个月SQL
- 计算机应用基础离线考核,东师2016年秋季《计算机应用基础》期末考核离线作业...
- VMware15.0安装CentOS7
- 0903 - Firebase Analytics PK Google Analytics
- 一个合理的生产环境的 Web 应用程序应该是什么样子的
- 聊天三个小时后发生的故事
- office2010安装出现错误1935的解决方法
- 2022网鼎杯白虎组misc830题解
- FTPClient上传文件storeFile失败,没有异常,切换目录操作可以成功
- showModalDialog打开窗口时不跳入新页面设置
- 创建一个非循环单链表并对其进行操作
- 引擎之旅 Chapter.3 文件系统
- 1384Piggy-Bank
- SGM58031的IIC接口调试过程