后台获取要迭代的数据
protected void getDetectionUnitFormList(Model model) {
// 获取token
String token = sessionMessage.findLoginUser().getToken();
List<DetectionUnitForm> listForm = detectionUnitService.findNameAndIdBySQL(token);
model.addAttribute("listForm", listForm);
}
<div class="form-group">
<label for="suggestId" class="col-sm-3 control-label">
机构名称:
</label>
<div class="col-sm-9">
<select id="unitId" class="form-control" >
<c:forEach items="${listForm}" var="detectionUnitForm">
<option value="${detectionUnitForm.id}">${detectionUnitForm.name}</option>
</c:forEach>
</select>
</div>
</div>
<script type="text/javascript">
//var unitId = ${detectionForm.unitId};
//alert('${detectionForm.unitId}');
//赋值给初始的值
$('#unitId').val('${detectionForm.unitId}');
</script>
dropzone获取上传图片的步骤
http://www.renfei.org/blog/dropzone-js-introduction.html
1.
<script src="<c:url value="/resources/components/zclip/jquery.zclip.min.js"/>"></script>
2.
<script type="text/javascript" charset="utf-8" src="<c:url value="/resources/kingtheme/assets/js/plugins/dropzone/dropzone.js"/>"></script>
Dropzone.options.myDropzone = getDropzoneObject("#my-dropzone","${mp.headImg}");
Dropzone.options.myDropzoneB = getDropzoneObject("#my-dropzone-b","${mp.qrCode}");
//创建图片上传的方法
//id = 需要使用框体的ID 需要和对象名称对应如果对象名称有大写需要在该ID前加 '-' 如 对象名称myDropzone id要写成 my-dropzone
//imgName = 服务器返回的图片名称
function getDropzoneObject(id,imgName){
Dropzone.options.drop = {
//配置Dropzone的基本属性
url: "${pageContext.request.getContextPath()}/cus/upload.do",
maxFiles:1,
maxFilesize: 5,
addRemoveLinks: true,
method: "post",
paramName: "image",
thumbnailWidth: '200',
thumbnailHeight: '200',
dictDefaultMessage: '点击上传图片',
addRemoveLinks:true,
dictRemoveFile:"删除图片",
dictResponseError: '无法连接服务器',
dictCancelUpload: "取消上传",
dictCancelUploadConfirmation: "你确定要取消上传么?",
acceptedFiles: ".png,.jpg,.jpeg",
dictFileTooBig: "文件太大超出了限制:({{filesize}}MiB). 文件最大限制为: {{maxFilesize}}MiB.",
dictInvalidFileType: "你不能上传该类型的文件",
//初始化配置
init: function() {
var self = this;
//缓存文件
var oldfile = null;
//初始化图片读取
//读取用户已经上传的图片
//这个可以获取json对象来拿数据
if(imgName!=null && imgName != ""){
var file = {};
//模拟添加一张图片
self.emit("addedfile", file);
//创建图片的缩略图
var imgUrl = "${pageContext.request.getContextPath()}/resources/attached/"+"${mp.token}"+"/"+imgName;
self.files.push(file);
self.createThumbnailFromUrl(file,imgUrl);
//将图片状态改为完成
self.emit("complete", file);
oldfile = file;
}
//新文件添加事件
self.on("addedfile", function(file) {
var fileName = file.name;
if(typeof(fileName) !='undefined'){
var index = fileName.lastIndexOf(".");
var fileType = fileName.substring(index+1);
//校验类型
if(fileType!='png'&&fileType!='jpg'&&fileType!='jpeg'){
$.MyToolTip.popupMessage('只支持png、jpg、jpeg格式!','danger');
//如果文件不对,移除新添加的文件
self.removeFile(file);
return;
}
}
//文件上传不能大于1M
if(file.size>(1*1024*1024)){
$.MyToolTip.popupMessage('图片上传大小不能大于1M','danger');
self.removeFile(file);
return;
}
//如果缓存文件已存在,删除缓存中的图片
if(oldfile!=null){
self.removeFile(oldfile);
}
//新添加文件替换缓存文件
oldfile=file;
});//添加事件结束
//移除文件的同时清空缓存
self.on("removedfile",function(file){
//当删除的文件就是缓存文件时,清空缓存文件
if(file==oldfile){
oldfile=null;
}
});//移除事件结束
},//初始化结束
success:function(file,data){
var self = this;
if(data.success=="true"){
$(id).closest('.form-group').find(".wrongMsg").addClass("hide");
var input = '<input type="hidden" value="' + data.picName + '" name="' + id + '">';
if ($(id).find('input[name="' + id + '"]').attr('value') != null) {
$(id).find('input[name="' + id + '"]').attr('value', data.picName);
} else {
$(id).append(input);
}
return file.previewElement.classList.add("dz-success");
}else{
return this.emit("error", file, data.msg);
}
}
};//创建对象结束
return Dropzone.options.drop;
}
json controller
@ResponseBody
@RequestMapping(value={"/cus/upload.do"})
public UploadMsg saveFile(@RequestParam(value = "image", required = false) MultipartFile file,HttpServletRequest request, ModelMap model){
UploadMsg um = new UploadMsg();
String uploadResult = UploadImgUtil.uplaodImg(request,file, sessionMessage.findLoginUser().getToken());
if(uploadResult == null || uploadResult.contains("error"))
{
um.setSuccess("false");
um.setMsg("上传失败");
}
else
{
um.setSuccess("true");
um.setPicName(uploadResult);
}
return um;
}
UploadImgUtil
/**
* @author XingXinglvcha
* 2016年1月12日 下午5:44:36
*/
public class UploadImgUtil {
public static String uplaodImg(HttpServletRequest request,MultipartFile file,String token) {
String savePath = request.getSession().getServletContext()
.getRealPath("\\")
+ "resources\\attached\\";
if (file == null) {
return getError("请选择文件。");
}
if (file.getSize() > 10000000) {
return getError("上传失败:文件大小不能超过10M");
}
String realname = file.getOriginalFilename();
String imgType = realname.substring(realname.lastIndexOf(".") + 1)
.toLowerCase();
String filename = "";
// 创建文件夹
savePath += token + "/";
File saveDirFile = new File(savePath);
if (!saveDirFile.exists()) {
saveDirFile.mkdirs();
}
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmsss");
String ymd = sdf.format(new Date());
filename = ymd;
if (file.getSize() > 0) {
try {
SaveFileFromInputStream(file.getInputStream(), savePath,
filename + "." + imgType);
return filename + "." + imgType;
} catch (IOException e) {
System.out.println(e.getMessage());
return null;
}
} else {
return getError("上传失败:上传文件不能为空!");
}
}
protected void getDetectionUnitFormList(Model model) {
// 获取token
String token = sessionMessage.findLoginUser().getToken();
List<DetectionUnitForm> listForm = detectionUnitService.findNameAndIdBySQL(token);
model.addAttribute("listForm", listForm);
}
<div class="form-group">
<label for="suggestId" class="col-sm-3 control-label">
机构名称:
</label>
<div class="col-sm-9">
<select id="unitId" class="form-control" >
<c:forEach items="${listForm}" var="detectionUnitForm">
<option value="${detectionUnitForm.id}">${detectionUnitForm.name}</option>
</c:forEach>
</select>
</div>
</div>
<script type="text/javascript">
//var unitId = ${detectionForm.unitId};
//alert('${detectionForm.unitId}');
//赋值给初始的值
$('#unitId').val('${detectionForm.unitId}');
</script>
dropzone获取上传图片的步骤
http://www.renfei.org/blog/dropzone-js-introduction.html
1.
<script src="<c:url value="/resources/components/zclip/jquery.zclip.min.js"/>"></script>
2.
<script type="text/javascript" charset="utf-8" src="<c:url value="/resources/kingtheme/assets/js/plugins/dropzone/dropzone.js"/>"></script>
Dropzone.options.myDropzone = getDropzoneObject("#my-dropzone","${mp.headImg}");
Dropzone.options.myDropzoneB = getDropzoneObject("#my-dropzone-b","${mp.qrCode}");
//创建图片上传的方法
//id = 需要使用框体的ID 需要和对象名称对应如果对象名称有大写需要在该ID前加 '-' 如 对象名称myDropzone id要写成 my-dropzone
//imgName = 服务器返回的图片名称
function getDropzoneObject(id,imgName){
Dropzone.options.drop = {
//配置Dropzone的基本属性
url: "${pageContext.request.getContextPath()}/cus/upload.do",
maxFiles:1,
maxFilesize: 5,
addRemoveLinks: true,
method: "post",
paramName: "image",
thumbnailWidth: '200',
thumbnailHeight: '200',
dictDefaultMessage: '点击上传图片',
addRemoveLinks:true,
dictRemoveFile:"删除图片",
dictResponseError: '无法连接服务器',
dictCancelUpload: "取消上传",
dictCancelUploadConfirmation: "你确定要取消上传么?",
acceptedFiles: ".png,.jpg,.jpeg",
dictFileTooBig: "文件太大超出了限制:({{filesize}}MiB). 文件最大限制为: {{maxFilesize}}MiB.",
dictInvalidFileType: "你不能上传该类型的文件",
//初始化配置
init: function() {
var self = this;
//缓存文件
var oldfile = null;
//初始化图片读取
//读取用户已经上传的图片
//这个可以获取json对象来拿数据
if(imgName!=null && imgName != ""){
var file = {};
//模拟添加一张图片
self.emit("addedfile", file);
//创建图片的缩略图
var imgUrl = "${pageContext.request.getContextPath()}/resources/attached/"+"${mp.token}"+"/"+imgName;
self.files.push(file);
self.createThumbnailFromUrl(file,imgUrl);
//将图片状态改为完成
self.emit("complete", file);
oldfile = file;
}
//新文件添加事件
self.on("addedfile", function(file) {
var fileName = file.name;
if(typeof(fileName) !='undefined'){
var index = fileName.lastIndexOf(".");
var fileType = fileName.substring(index+1);
//校验类型
if(fileType!='png'&&fileType!='jpg'&&fileType!='jpeg'){
$.MyToolTip.popupMessage('只支持png、jpg、jpeg格式!','danger');
//如果文件不对,移除新添加的文件
self.removeFile(file);
return;
}
}
//文件上传不能大于1M
if(file.size>(1*1024*1024)){
$.MyToolTip.popupMessage('图片上传大小不能大于1M','danger');
self.removeFile(file);
return;
}
//如果缓存文件已存在,删除缓存中的图片
if(oldfile!=null){
self.removeFile(oldfile);
}
//新添加文件替换缓存文件
oldfile=file;
});//添加事件结束
//移除文件的同时清空缓存
self.on("removedfile",function(file){
//当删除的文件就是缓存文件时,清空缓存文件
if(file==oldfile){
oldfile=null;
}
});//移除事件结束
},//初始化结束
success:function(file,data){
var self = this;
if(data.success=="true"){
$(id).closest('.form-group').find(".wrongMsg").addClass("hide");
var input = '<input type="hidden" value="' + data.picName + '" name="' + id + '">';
if ($(id).find('input[name="' + id + '"]').attr('value') != null) {
$(id).find('input[name="' + id + '"]').attr('value', data.picName);
} else {
$(id).append(input);
}
return file.previewElement.classList.add("dz-success");
}else{
return this.emit("error", file, data.msg);
}
}
};//创建对象结束
return Dropzone.options.drop;
}
json controller
@ResponseBody
@RequestMapping(value={"/cus/upload.do"})
public UploadMsg saveFile(@RequestParam(value = "image", required = false) MultipartFile file,HttpServletRequest request, ModelMap model){
UploadMsg um = new UploadMsg();
String uploadResult = UploadImgUtil.uplaodImg(request,file, sessionMessage.findLoginUser().getToken());
if(uploadResult == null || uploadResult.contains("error"))
{
um.setSuccess("false");
um.setMsg("上传失败");
}
else
{
um.setSuccess("true");
um.setPicName(uploadResult);
}
return um;
}
UploadImgUtil
/**
* @author XingXinglvcha
* 2016年1月12日 下午5:44:36
*/
public class UploadImgUtil {
public static String uplaodImg(HttpServletRequest request,MultipartFile file,String token) {
String savePath = request.getSession().getServletContext()
.getRealPath("\\")
+ "resources\\attached\\";
if (file == null) {
return getError("请选择文件。");
}
if (file.getSize() > 10000000) {
return getError("上传失败:文件大小不能超过10M");
}
String realname = file.getOriginalFilename();
String imgType = realname.substring(realname.lastIndexOf(".") + 1)
.toLowerCase();
String filename = "";
// 创建文件夹
savePath += token + "/";
File saveDirFile = new File(savePath);
if (!saveDirFile.exists()) {
saveDirFile.mkdirs();
}
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmsss");
String ymd = sdf.format(new Date());
filename = ymd;
if (file.getSize() > 0) {
try {
SaveFileFromInputStream(file.getInputStream(), savePath,
filename + "." + imgType);
return filename + "." + imgType;
} catch (IOException e) {
System.out.println(e.getMessage());
return null;
}
} else {
return getError("上传失败:上传文件不能为空!");
}
}