自媒体操作

本文介绍了一个基于Dropzone.js的图片上传组件实现方案,包括前端页面展示、图片预览及替换功能,以及后端图片处理逻辑。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

后台获取要迭代的数据
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("上传失败:上传文件不能为空!");
}

}



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值