jfinal + dropzonejs上传图片

    xiaoxiao2022-06-29  54

    JFinal处理文件上传,只需两件事:一是将cos-26Dec2008.jar包引入,二是在Controller中调用getFile或getFiles方法.

    JFinal Controller中提供了 getFile(...)与getFiles(...)系列方法,其中参数最全的两个方法如下:

    public UploadFile getFile(String parameterName, String saveDirectory, Integer maxPostSize, String encoding)   public List<UploadFile> getFiles(String saveDirectory, Integer maxPostSize, String encoding)

    除了以上两个方法以外,其它方法全是使用默认参数对这两个方法的转调,所以会用这两个方法足以。

        parameterName是指在表单中file表单域的名称,saveDirectory是指文件保有存路径,maxPostSize是指文件最大长度,encoding是指文件编码。

        getFile(...)系列方法获取单个文件上传,getFiles(...)获取多文件上传。

        如果需要使用getPara(..)系列方法,则需要先调用getFile或getFiles系列方法之一,因为multipart request的解析是在调用本系列方法时解析的。

        文件上传支持需要cos-26Dec2008.jar这个包,此包在JFinal发行包中有提供。另外还需要在上传表单中设置enctype="multipart/form-data"。

        JFinal文件上传与struts有不同之处,struts是将上传的文件先缓存到临时目录中,然后让开发者处理,通常是将文件移动或copy,而JFinal采用更加高效的方式,可以在上传后直接保存到目标目录下。

    这一段话原文:http://www.oschina.net/question/67067_47226?fromerr=sXc6qmvC

    dropzonejs:使用

    方式一:引入dropzonejs ,写如下代码,插件会自动初始化完成。

    html:----------------------

    <form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>

    js:--------------------------

             此时可以通过如下配置控制插件

                Dropzone.options.myAwesomeDropzone = {                 autoProcessQueue: false,                 uploadMultiple: true,                 parallelUploads: 100,                 maxFiles: 100,                 // Dropzone settings                 init: function() {                     var myDropzone = this;                     this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {                         e.preventDefault();                         e.stopPropagation();                         myDropzone.processQueue();                     });                     this.on("sendingmultiple", function() {                     });                     this.on("successmultiple", function(files, response) {                     });                     this.on("errormultiple", function(files, response) {                     });                 }             }

    方式二:手动初始化

    html:----------------

    <div id="my-awesome-dropzone" class="dropzone"> <div class="dropzone-previews"></div> <button type="submit" id="submit_file" class="btn btn-primary pull-right">上传</button> </div>

    js:---------------

    Dropzone.options.myAwesomeDropzone = false; Dropzone.autoDiscover = false; $(".dropzone").dropzone({ url : "/resource/upload", dictDefaultMessage : '<span >拖动文件至该处</span><span >(或点击此处)</span> ', dictRemoveFile : "移除文件", dictInvalidFileType : "文件类型不正确", dictFileTooBig : "文件太大({{filesize}}MB). 最大文件大小: {{maxFilesize}}MB.", dictResponseError: "服务器响应代码 {{statusCode}}.", paramName : "file", autoProcessQueue : false,// 自动上传关闭 addRemoveLinks : true, dictRemoveLinks : "x", dictCancelUpload : "x", maxFiles : 500, maxFilesize : 5, parallelUploads : 500, acceptedFiles : ".doc,.docx,.pdf,.txt", init : function() { this.on("success", function(file, result) { if (result == "ok") { location.href = "/resource"; } else { alert("出现未知错误,请重试!"); } }); this.on("removedfile", function(file) { console.log("File " + file.name + "removed"); }); var submitButton = $("#submit_file"); myDropzone = this; // closure submitButton.on("click", function() { myDropzone.processQueue(); // 这里提交文件 }); this.on("addedfile", function() { }); } });

    转载请注明原文地址: https://ju.6miu.com/read-1125370.html

    最新回复(0)