java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的 Java 程序设计语言和 Java 平台(即 JavaEE(j2ee), JavaME(j2me), JavaSE(j2se))的总称。
本篇文章主要介绍了 Java 实现拖拽文件上传 dropzone.js 的简单使用示例代码,具有一定的参考价值,有兴趣的可以了解一下
Java 实习生一枚,前端知识薄弱,最近因为工作需要,做了一个拖拽文件上传的功能,发现 dropzone.js 挺不错的,特地做个笔记。
dropzonejs 的官网是:http://www.dropzonejs.com/, 中文手册是:http://wxb.github.io/dropzonejs.com.zh-CN/
自己写的拖拽文件至一个按钮上传的功能,前端及 java 代码如下:
jsp 页面:
1. 首先必须引入 dropzone 的 js 和 CSS 文件
- <linkrel="stylesheet"href="dropzone/css/dropzone.css"rel="external nofollow">
- <scriptsrc="dropzone/js/dropzone.js"></script>
2. 自己定义两个 div 区域
- <%--拖拽文件上传--%>
- <divid="div1"class="dropz"style="width:0px; height:0px;">
- uopload
- </div>
- <divid="div2"class="dropz"style=" background: white;border:none;float:left;">
- </div>
这是我的文件上传之后的文件队列区域:
- <divid="fileslist"style="padding:10px;"></div>
3. 对 dropzone.css 进行修改,将文件内的所有 dropzone 替换为 dropz
修改文件拖拽区域的显示样式:
- .dropz {
- /*设置拖拽上传文件按钮的格式*/
- min - height:0px;
- min - width:100px;
- border:1px solid#58AF0C;
- background: white;
- padding:15px20px;
- background - color:#7AC143;
- background - image:-webkit - gradient(linear, left bottom, left top, color - stop(0,#7AC143), color - stop(1, #7AC143));
- background - position: center top;
- background - repeat:no- repeat;
- border - radius:5px;
- min - height:0px;
- min - width:100px;
- padding:15px20px;
- color:#FFF;
- font: bold 12pxArial,
- Helvetica,
- sans - serif;
- text - align: center;
- text - shadow:0-1px0 rgba(0,0,0,0.25);
- }.dropz.dz - clickable {
- cursor: pointer;
- line - height:0px;
- /*按钮中的文字垂直居中*/
- }
4. 在 jsp 对 div 进行 dropzone 参数的自定义
- <scripttype="text/javascript">
- $("#div1").dropzone({
- url:"systemController.action?saveFile",//上传文件的地址,
- maxFiles:1,//最多上传几个文件
- maxFilesize:5,//文件的大小,单位是M
- addRemoveLinks:true,//是否有删除文件的功能
- dictRemoveFile:"",//删除文件
- previewsContainer:"#div2",//文件上传进度显示的区域
- acceptedFiles:".jpg,.jpeg,.png,.gif,.xls,.txt,.sql,.rar,.mkv",//支持的格式
- paramName:'file',//上传的FILE名称,即服务端可以通过此来获取上传的文件,如$_FILES['dropimage']
- init:function(){//初始化时的事件
- //$("#uploadfile").uploadFile({success:function(data){
- this.on("addedfile",function(file){
- // Create the remove button
- var removeButton =Dropzone.createElement("<img src="http://www.h3399.cn/uploads/body/img.phperz.com/data/img/20171107_14/1510065928_1392.png">
更多使用功能请参考 dropzone 的官方文档。
来源: http://www.phperz.com/article/18/0103/356367.html