Java实现拖拽文件上传dropzone.js的简单使用示例代码

爪哇实习生一枚，前端知识薄弱，最近因为工作需要，做了一个拖拽文件上传的功能，发现dropzone.js挺不错的，特地做个笔记。

dropzonejs的官网是：http://www.dropzonejs.com/，中文手册是：http://wxb。github。io/dropzonejs。com。zh-CN/

自己写的拖拽文件至一个按钮上传的功能，前端及爪哇岛代码如下：

jsp页面：

1.首先必须引入下降区的射流研究…和钢性铸铁文件

链接rel='样式表href='拖放区/CSS/拖放区。CSS ' rel='外部' nofollow '脚本src=' http :放置区/js/放置区。js /脚本2。自己定义两个差异区域

% - 拖拽文件上传-% div id=' div 1 ' class=' dropz ' style=' width :0 px；'height :0 px ' uopload/div div id=' div 2 ' class=' dropz ' style=' background : white；border : none ' float : left '/div这是我的文件上传之后的文件队列区域：

div id=' filestlist ' style=' padd : 10px；'/div 3 .对dropzone.css进行修改，将文件内的所有下降区替换为dropz

修改文件拖拽区域的显示样式：dropz {/*设置拖拽上传文件按钮的格式*/最小高度：0像素；最小宽度： 100像素；border: 1px固体# 58AF0C背景：白色；padding: 15px 20px背景色-: # 7AC 143；背景-图像：-网络套件-渐变（线性、左下、左上、色停(0，#7AC143)、色停(1，# 7ac 143))；背景-位置：中央顶部；背景-重复：不重复；边界半径： 5px最小高度：0 px最小宽度： 100像素；padd : 15px 20 pxcolor : # FFF；font: bold 12px Arial，Helvetica，无衬线字体；文本对齐：中心；text-shadow: 0 -1px 0 rgba(0，0，0，0.25)；} .dropz。dz-可点击cursor:指针；行高： 0px/*按钮中的文字垂直居中*/} 4.在jsp对差异进行下降区参数的自定义

脚本类型='text/javascript' $('#div1 ').放置区域({ URL : ' systemcontroller。行动？保存文件',//上传文件的地址，maxFiles:1，//最多上传几个文件maxFilesize: 5，//文件的大小，单位是M addRemoveLinks:true，//是否有删除文件的功能dictRemoveFile: ' '，//删除文件预览容器：'#div2 '，//文件上传进度显示的区域接受文件： ' .jpg .jpeg，2000 .巴布亚新几内亚gif .xls .txt .sql，rar ,mkv '，//支持的格式参数名： '文件',//上传的文件名称，即服务端可以通过此来获取上传的文件，如$_FILES['dropimage'] init:函数(){//初始化时的事件//$('#uploadfile ').uploadFile({ success : function(数据){ this。on('添加的文件'，函数(文件){ //创建移除按钮var移除按钮=Dropzone。createElement(' img src='插件/uploadify/img/uploadify-cancel。png ' title='删除'/');//捕获Dropzone实例作为闭包var _ this=this//听点击事件移除按钮。addeventlistener(' click '，函数(e) { //确保按钮点击没有提交表单： e . prevent default()；e . stopperpagation()；警报('您确定要删除吗？');//删除文件预览. this.removeFile(文件);//如果您也想删除服务器上的文件，//您可以在这里执行创建交互式、快速动态网页应用的网页开发技术请求。});//将按钮添加到文件预览元素中文件。预览元素。appendchild(删除按钮)；});this.on('成功'，函数（文件，数据){ if (this.getUploadingFiles().长度===0 this.getQueuedFiles().长度===0) { var d=$ .parseJSON(数据);var file item=' span class=' uploadFile-queue-item ' id=' d . file key ' ' a ' d . name '/aimg border=' 0 ' style=' padd :2 px；光标：指针指针；onclick=Delattachment(' d . delurl ' '，d.fileKey ' '，d.name '') title='删除src=' plug-in/uploadify/img/uploadify-cancel。png ' widht=' 15 '高度=' 15 '/span；$(“#文件列表”).html(文件项目)；$(' #附件').val(d.fileKey '，' d . name '；');} this.removeFile(文件);});} });/脚本爪哇岛后台处理文件上传的代码：

@ request mapping(params=' SaveFile '，方法=RequestMethod .开机自检)公共void SaveFile(httpersvletrequest请求，HttpServletResponse响应，TSDocument文档)引发异常{映射字符串，对象属性=new HashMapString，Object()；TSTypegroup TSTypegroup=系统服务。gettypegroup(' fieltype '，'文档分类');tsTYPe tsTYPe=system ServiCe。GetType(' files '，'附件，tsTypegroup)；字符串文件密钥=oconventurels。getstring(请求。getparameter('文件密钥')；//文件标识字符串文档标题=oconventurels。getstring(请求。getparameter('文档标题'，' uploadfile ')；//文件标题if(stringutil。isnotempty(文件密钥)){ document。setid(文件密钥)；文档=系统服务。getentity(tsdocument。类、文件密钥)；文件。setdocument title(文档标题)；}文档。setbusiness key(请求。getparameter(' business key ')；文件。setsubclass name(我的类加载器。getpackpath(document))；文件。setcreatedate(Dateutils。gettimestamp())；文件。setstype(TSTYPe)；上传文件上传文件=新上传文件（请求、文档);上传文件。setcuspath(' files ')；上传文件。setswf path(' swf path ')；文档=系统服务。上传文件(上传文件);attributes.put('url '，文档。getrealpath())；attributes.put('fileKey '，document)。getid())；if(resourceutil。getsessionsername()！=null){属性。put(' uploadUser '，ResourceUtil.getSessionUserName().getUserName())；} else { attributes。put(' uploadUser '，' null ')；} attributes.put('time '，新的简单日期格式(' yyyy-MM-DD ').格式（新的date())；attributes.put('name '，document.getAttachmenttitle()'。文件。getextend())；attributes.put('downloadurl '，' commonController.action？viewpilefileid=' document。Getid()'子类名称=')；attributes.put('viewhref '，' commonController.action？objfillistfilekey=' document。getid())；attributes.put('delurl '，' commonController.action？delObjFilefileKey='文档。getid())；attributes.put('realPath '，文档。getrealpath())；if(fileutils。ispicture(文档。getextend()){属性。放(' imgUrl '，文档。getrealpath())；} JSONObject js=new JSONObject(属性);response.getWriter().write(js。tostring())；response.getWriter().flush()；} 注意这里的返回值是直接返回的json对象，如果采用

@请求映射(参数=' saveFiles '，方法=RequestMethod .POST) @ResponseBody则会报错：

复制代码代码如下无法找到可接受的表示

最终实现的效果如下：

更多使用功能请参考下降区的官方文档。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。