Dropzone JS 使用指南（文件拖拽上传）
DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库 http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/
JavaScript 文件拖拽上传插件 dropzone.js 介绍 https://www.renfei.org/blog/dropzone-js-introduction.html
DropzoneJS 使用指南（文件拖拽上传） http://www.open-open.com/lib/view/open1448610841329.html
带文件上传的form表单提交 http://m.blog.csdn.net/article/details?id=50221945后台资料：
基于Spring MVC的Web应用开发(4) – FileUpload http://stephansun.iteye.com/blog/1458980
DropzoneJS 使用指南（文件拖拽上传） http://www.open-open.com/lib/view/open1448610841329.html
带文件上传的form表单提交 http://m.blog.csdn.net/article/details?id=50221945后台资料：
基于Spring MVC的Web应用开发(4) – FileUpload http://stephansun.iteye.com/blog/1458980
使用例子
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
Js代码 $("#dropzone2 .dropzone").dropzone({ headers: {}, paramName: "file", // The name that will be used to transfer the file maxFiles: 1, maxFilesize: 10.5, // MB addRemoveLinks: true, //acceptedFiles: ".jpg,.png,.gif,.mp3", acceptedFiles: ".jpg,.png,.gif", dictRemoveFile: "删除", dictMaxFilesExceeded: "只能上传{{maxFiles}}个", dictInvalidFileType:"无效文件", dictCancelUpload:"取消上传", dictDefaultMessage: '<span class="bigger-150 bolder"><i class="icon-caret-right red"></i> Drop files</span> to plupload \ <span class="smaller-80 grey">(or click)</span> <br /> \ <i class="plupload-icon icon-cloud-plupload blue icon-3x"></i>' , dictResponseError: '上传出现错误', previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n <div class=\"dz-details\">\n <div class=\"dz-filename\"><span data-dz-name></span></div>\n <div class=\"dz-size\" data-dz-size></div>\n <img data-dz-thumbnail />\n </div>\n <div class=\"progress progress-small progress-striped active\"><div class=\"progress-bar progress-bar-success\" data-dz-uploadprogress></div></div>\n <div class=\"dz-success-mark\"><span></span></div>\n <div class=\"dz-error-mark\"><span></span></div>\n <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>", success: function (q, context, htx) { console.log($.toJSON(context)); DropzoneUploadFiles2 = context; return q.previewElement.classList.add("dz-success") }, removedfile: function (file) { console.log("File " + file.name + "被删除"); var r; if ((r = file.previewElement) != null) { r.parentNode.removeChild(file.previewElement) } return this._updateMaxFilesReachedClass() }, init: function () { var myDropZone = this; $("#btnRemoveAll2").unbind("click").removeAttr("onclick").click(function () { console.log("removeAllFiles"); myDropZone.removeAllFiles(); }); //最好在这里做这些事情 this.on("addedfile", function(file) { alert("Added file."); }); this.on("complete", function(file) { alert("complete file."); }); } }); |
如何清除所有文件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
Js代码 $(function() { Dropzone.options.myAwesomeDropzone = { init: function () { var myDropZone = this; //自定义一个隐藏按钮给私下调用 $("#btnRemoveAll").click(function () { myDropZone.removeAllFiles(); } ); } }; }); |
