dropzone(文件上传插件)

1.应用场景:

拖拽上传,可扩展化编程的操作空间较大。

2.导入

<link rel="stylesheet" href="plugins/min/basic.min.css"/>

<link rel="stylesheet" href="plugins/min/dropzone.min.css" />

<script src="plugins/min/dropzone.min.js">script>

3.声明一个容器

4.给容器添加属性与监听

       

商品名:

       

       

商品图片:

       

           

       

           

    Dropzone.options.dropzoneDiv = {

       url:"upload", // 文件提交地址(controller的方法)

        method:"post",  // 也可用put

        paramName:"dropzFile", // 默认为file

        maxFiles:1,// 一次性上传的文件数量上限

        maxFilesize:5, // 文件大小,单位: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, data) {

// 上传成功触发的事件

                console.log(file);

                console.log(data);

                $("#picName").val("static/upload/"+data.fileName);

            });

            this.on("error", function (file, data) {

// 上传失败触发的事件

            });

            this.on("removedfile", function (file) {

// 删除文件时触发的方法

                console.log(file);

            });

        }

}

function showVal() {

        alert($("#picName").val());

        alert($("#productName").val());

    }

5.controller


@Controller

public class UploadController {

@ResponseBody

    @RequestMapping(value ="upload", method = RequestMethod.POST)

public Mapupload(MultipartFile dropzFile, HttpServletRequest request) {

System.out.println("inner upload");

        System.out.println(dropzFile);

        Map result =new HashMap();

        // 获取上传的原始文件名

        String fileName = dropzFile.getOriginalFilename();

        // 设置文件上传路径

        String filePath = request.getSession().getServletContext().getRealPath("/static/upload");

        // 获取文件后缀

        String fileSuffix = fileName.substring(fileName.lastIndexOf("."), fileName.length());

        // 判断并创建上传用的文件夹

        File file =new File(filePath);

        if (!file.exists()) {

file.mkdirs();

        }

// 重新设置文件名为 UUID,以确保唯一

        file =new File(filePath, UUID.randomUUID() + fileSuffix);

        System.out.println(file.getAbsolutePath());

        if(!file.exists()){

try {

file.createNewFile();

            }catch (IOException e) {

e.printStackTrace();

            }

}

try {

// 写入文件

            dropzFile.transferTo(file);

        }catch (IOException e) {

e.printStackTrace();

        }

// 返回 JSON 数据,这里只带入了文件名

        result.put("fileName", file.getName());

        return result;

    }

}




效果图

你可能感兴趣的:(dropzone(文件上传插件))