• DropZone图片上传控件的使用


    前台代码:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <title> New Document </title>
      <meta name="Generator" content="EditPlus">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
     </head>
      <script type="text/javascript" src="Dropzone/dropzone.min.js"></script>
      <link rel="stylesheet" type="text/css" href="Dropzone/css/basic.css"><link>
      <link rel="stylesheet" type="text/css" href="Dropzone/css/dropzone.css"><link>
    
      <script>
      
       Dropzone.options.dropzoneForm = {
               //添加上传取消和删除预览图片的链接,默认不添加
            addRemoveLinks: true,
            init : function() {     
                this.on("success", function(file, res){});
                //删除图片的事件,当上传的图片为空时,使上传按钮不可用状态
                this.on("removedfile", function () {
                    if (this.getAcceptedFiles().length === 0) {
                        $("#dropzoneForm").attr("disabled", true);
                    }
                });
            }
        };
      
      </script>
    
     <body>
      
    <form action="<%= request.getContextPath()%>/vehicleBasic/upload.do" method="post" enctype="multipart/form-data" class="dropzone" id="dropzoneForm">
    </form>
    
     </body>
    </html>

    后台代码:

        @RequestMapping("upload")  
        @ResponseBody  
        public String upload(@RequestParam(value = "file", required = false)  MultipartFile file,
                HttpServletRequest request, HttpServletResponse response) throws IOException{  
            response.setHeader("Access-Control-Allow-Origin","*");
             SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSS");
             String res = sdf.format(new Date());
             // uploads文件夹位置
             //String rootPath = request.getSession().getServletContext().getRealPath("vehFile");
             String rootPath = "ehFile/";         
             // 原始名称
             String originalFileName = file.getOriginalFilename();
             // 新文件名
             String newFileName = res + originalFileName.substring(originalFileName.lastIndexOf("."));
             // 新文件
             File newFile = new File(rootPath +File.separator + newFileName);
             // 判断目标文件所在目录是否存在
             if( !newFile.getParentFile().exists()) {
                 // 如果目标文件所在的目录不存在,则创建父目录
                 newFile.getParentFile().mkdirs();
             }
             System.out.println(newFile);
             System.out.println(originalFileName);
             // 将内存中的数据写入磁盘
             file.transferTo(newFile);
             // 完整的url
             String fileUrl =rootPath + newFileName;    
             return  fileUrl;
        } 

    DropZone资源路径:

     http://download.csdn.net/download/s0009527/10198590

  • 相关阅读:
    re | [SWPU2019]ReverseMe
    wp | re | 2020“巅峰极客”网络安全技能挑战赛
    re | [CFI-CTF 2018]IntroToPE
    re | [FlareOn1]Bob Doge
    re | [ACTF新生赛2020]SoulLike
    re | [GKCTF2020]Chelly's identity
    ospf配置与ofps选举DR/BDR
    静态路由的配置
    配置三层交换机实现vlan间通信
    hybrid接口
  • 原文地址:https://www.cnblogs.com/xh_Blog/p/8258822.html
Copyright © 2020-2023  润新知