ssm dropzone文件上传

配置 pox.xml

<!-- 文件上传与下载 -->
<dependency>
   <groupId>commons-fileupload</groupId>
   <artifactId>commons-fileupload</artifactId>
   <version>1.3.3</version>
</dependency>
<dependency>
   <groupId>commons-io</groupId>
   <artifactId>commons-io</artifactId>
   <version>2.4</version>
</dependency>

springmvc配置

<!--配置文件上传处理着-->
<bean name="multipartResolver"
      class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="maxUploadSize" value="10485760"/>
    <property name="defaultEncoding" value="UTF-8"/>
</bean>

FileUploadController.class

@RestController
@RequestMapping("/file")
public class FileUploadController {

@RequestMapping("/fileUpload")
public Object fileUpload(@RequestParam("dropFile") CommonsMultipartFile file) throws IOException {
    Map<String,Object> map = new HashMap<String, Object>();
    String fileName = System.currentTimeMillis() + file.getOriginalFilename();
    File newFile = new File("D:\\upload\\project\\" + fileName);
    file.transferTo(newFile);
    map.put("status",200);
    map.put("url",newFile.getAbsolutePath());
    return map;
	}
}

html

<link rel="stylesheet" href="dropzone/basic.min.css"/>
<link rel="stylesheet" href="dropzone/dropzone.min.css"/>
<script src="dropzone/dropzone.min.js"></script>

<div class="form-group has-success has-feedback">
       <div id="dropzoneDiv" class="dropzone"></div>
      <input type="hidden" id="imgUrl">
</div>

js

<script>
    Dropzone.options.dropzoneDiv = {
        url: "file/fileUpload", // 文件提交地址
        method: "post",  // 也可用put
        paramName: "dropFile", // 默认为file
        maxFiles: 1,// 一次性上传的文件数量上限
        maxFilesize: 4, // 文件大小,单位:MB
        acceptedFiles: ".jpg,.gif,.png,.jpeg,.txt,.doc,.docx", // 上传的类型
        addRemoveLinks: true,
        parallelUploads: 1,// 一次上传的文件数量
        //previewsContainer:"#preview", // 上传图片的预览窗口
        dictDefaultMessage: '拖动文件至此或者点击上传',
        dictMaxFilesExceeded: "您最多只能上传1个文件!",
        dictResponseError: '文件上传失败!',
        dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg,.txt,.doc,.docx。",
        dictFallbackMessage: "浏览器不受支持",
        dictFileTooBig: "文件过大上传文件最大支持.",
        dictRemoveLinks: "删除",
        dictCancelUpload: "取消",
        init: function () {
            this.on("addedfile", function (file) {
                // 上传文件时触发的事件
            });
            this.on("success", function (file, result) {
                // 上传成功触发的事件
                console.log(result);
                $("#imgUrl").val(result.url);
            });
            this.on("error", function (file, data) {
                // 上传失败触发的事件
            });
            this.on("removedfile", function (file) {
                // 删除文件时触发的方法
            });
        }
    }
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值