您的位置：首页 > Web前端 > BootStrap

Bootstrap框架---Uploadify插件----多张图片上传交互方式一

2017-06-15 17:53 489 查看

我们在前一章已经实现了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

处理起来比较麻烦。所以建议使用HTML5版的。
HTML5版是收费的，在网上找到一个直接可用html5版本的JS。
下载地址:

uploadifyHtml5

下载解压后放到项目路径中

这里还需要一张样式图片，我们放在/res/assets/img/demoUpload.jpg路径。

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>


<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="图片地址" readonly
ref-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">
<img
src="${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="图片地址" readonly
ref-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">
<img
src="${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>

</div>

</div>







<%@ 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 {

@Transient
public static final int CODE_SUCCESS = 1;
@Transient
public static final int CODE_FAILURE = 0;
@Transient
public static final AjaxResult RESULT_ERROR = new AjaxResult(
CODE_FAILURE, "执行出错了", null);
@Transient
public static final AjaxResult RESULT_SUCCESS = new AjaxResult(
CODE_SUCCESS, null, null);
@Transient
public 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")
@ResponseBody
public 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")
@ResponseBody
public 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页面把图片显示去掉即可。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航