jQuery上传文件控件Uploadify使用

Uploadify是JQuery的一个上传插件，支持ajax无刷新上传，多个文件同时上传，上传进行进度显示，删除已上传文件等。

首先应下载jQuery和uploadify插件

jQuery下载地址：http://www.jq22.com/jquery-info122

Uploadify下载地址：http://www.uploadify.com/，点击Flash Version

jsp页面需要引入：

<script src="<%=basePath%>resources/js/jquery-2.1.4/jquery.min.js"></script>
<script src="<%=basePath%>resources/js/uploadify/jquery.uploadify.min.js"></script>
<link type="text/css" rel="stylesheet" href="<%=basePath%>resources/js/uploadify/uploadify.css">

html代码:

<div><input type="file" name="uploadify" id="uploadFile" /><div id="some_file_queue"></div><div  id="fileName"></div><div style="clear: both;margin-top: 20px;cursor: pointer;"><aclass="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary a-btn"οnclick="javascript:$('#uploadFile').uploadify('upload','*')"><span class="glyphicon glyphicon-play"></span> <spanclass="ui-button-text">开始上传</span></a><aclass="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary a-btn"οnclick="javascript:$('#uploadFile').uploadify('cancel','*')"><span class="glyphicon glyphicon-ban-circle"></span> <spanclass="ui-button-text">取消上传</span></a></div>
</div>

js代码：

$(function() {$("#uploadFile").uploadify({'swf'           : '<%=basePath%>resources/js/uploadify/uploadify.swf','uploader'      : '<%=basePath%>file/uploadFile',  //服务器端方法//'formData'    : {'someKey' : 'someValue', 'someOtherKey' : 1},//传输数据json格式'height'        : 30,  //按钮高度'width'         : 100,  //按钮宽度  'fileObjName'   : 'uploadify',//默认 Filedata, $_FILES控件name名称'multi'         : true,  //设置是否允许一次选择多个文件，true为允许，false不允许'auto'          : false,  //是否自动上传'buttonText'    : '选择文件',//按钮显示文字//'buttonClass' : 'uuid', //按钮辅助class'buttonCursor'  : 'hand', //设置鼠标移到按钮上的开状，接受两个值'hand'和'arrow'(手形和箭头)'debug'         : false, //开启或关闭debug模式'cancelImg'     : '<%=basePath%>resources/js/img/uploadify-cancel.png', //这个没测试出来，默认是放在与uploadify同级的img文件夹下'fileTypeExts'  : '*.jpg;*.jpge;*.gif;*.psd;*.png;*.txt;*.doc;*.docx;*.ppt;*.pptx;*.pdf', //文件后缀限制 默认：'*.*''fileSizeLimit' : '10MB',//接受一个单位（B,KB,MB,GB）。如果是数字则默认单位为KB。设置为0时表示不限制'fileTypeDesc'  : 'All Files',//可选文件的描述。这个值出现在文件浏览窗口中的文件类型下拉选项中。（chrome下不支持，会显示为'自定义文件',ie and firefox下可显示描述）'method'        : 'post', //提交上传文件的方法，接受post或get两个值，默认为post'progressData'  : 'percentage',//设置文件上传时显示数据，有‘percentage’ or ‘speed’两个参数(百分比和速度)'queueID'       : 'some_file_queue',//设置上传队列DOM元素的ID，上传的项目会增加进这个ID的DOM中。设置为false时则会自动生成队列DOM和ID。默认为false'queueSizeLimit'  : 5,//一个队列上传文件数限制'simUploadLimit'  : 5, //一次同步上传的文件数目'removeCompleted' : true, //完成时是否清除队列 默认true  'removeTimeout'   : 1,   //完成时清除队列显示秒数,默认3秒  'requeueErrors'   : false, //设置上传过程中因为出错导致上传失败的文件是否重新加入队列中上传'successTimeout'  : 30,   //设置文件上传后等待服务器响应的秒数，超出这个时间，将会被认为上传成功，默认为30秒'uploadLimit'     : 99,  //允许上传的最多张数 'onUploadSuccess' : function(file, data, response) { //上传成功var jdata = $.parseJSON(data);$("#fileName").append("<p><em name='fileName' onclick = 'downLoadFile(this)' style='color:#555555'>"+jdata.fileName+"</em><em style='color:red' onclick = 'deleteFile(this)'>删除</em><a name='filePath' style='display:none'>"+jdata.filePath+"</a></p>");console.log( 'id: ' + file.id+ ' - 索引: ' + file.index+ ' - 文件名: ' + file.name+ ' - 文件大小: ' + file.size+ ' - 类型: ' + file.type+ ' - 创建日期: ' + file.creationdate+ ' - 修改日期: ' + file.modificationdate+ ' - 文件状态: ' + file.filestatus+ ' - 服务器端消息: ' + data+ ' - 是否上传成功: ' + response);},'onFallback':function(){alert("您未安装FLASH控件，无法一次性上传多个文件！请安装FLASH控件后再试。");},onSelectError:function(file, errorCode, errorMsg){ //选择失败switch(errorCode) {case -100:  alert("上传的文件数量已经超出系统限制的"+$('#uploadFile').uploadify('settings','queueSizeLimit')+"个文件！");   break;  case -110:  alert("文件 ["+file.name+"] 大小超出系统限制的"+$('#uploadFile').uploadify('settings','fileSizeLimit')+"大小！");break;  case -120:  alert("文件 ["+file.name+"] 大小异常！");break;  case -130:  alert("文件 ["+file.name+"] 类型不正确！");break;}},/* //上传汇总'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {  $('#progress').html(totalBytesUploaded + ' bytes uploaded of ' + totalBytesTotal + ' bytes.');  },'onUploadComplete' : function(file) { //上传完成  console.log('The file ' + file.name + ' finished processing.');  },  //修改formData数据 ,每个文件即将上传前触发'onUploadStart' : function(file) {$("#uploadFile").uploadify("settings", "someOtherKey", 2);},//删除时触发  'onCancel' : function(file) {alert('The file ' + file.name + '--' + file.size + ' was cancelled.');  },//清除队列  'onClearQueue' : function(queueItemCount) {alert(queueItemCount + ' file(s) were removed from the queue');  },//调用destroy是触发  'onDestroy' : function() {  alert('我被销毁了');  },  //每次初始化一个队列是触发  'onInit' : function(instance){  alert('The queue ID is ' + instance.settings.queueID);  }, //上传错误  'onUploadError' : function(file, errorCode, errorMsg, errorString) {alert('The file ' + file.name + ' could not be uploaded: ' + errorString);  }, */});
});

页面展示：

后台代码：

上传方法

@RequestMapping("/uploadFile")
public void uploadFile(@RequestParam(value = "uploadify", required = false) MultipartFile file,HttpServletRequest request, HttpServletResponse response) throws IOException {String fileName = file.getOriginalFilename();Map<String, Object> dataMap = new HashMap<String, Object>();//本机测试路径String path = request.getSession().getServletContext().getRealPath("files");String uuid = UUID.randomUUID().toString();String filePath = uuid + fileName.substring(fileName.lastIndexOf("."));File targetFile = new File(path, filePath);if (!targetFile.exists()) {targetFile.mkdirs();}try {file.transferTo(targetFile);dataMap.put("filePath", filePath);dataMap.put("fileName", fileName);logger.info("文件上传成功");} catch (Exception e) {logger.error(e.getMessage());}ObjectMapper mapper = new ObjectMapper();String data =mapper.writeValueAsString(dataMap);response.setContentType("text/html;charset=UTF-8");response.getWriter().print(data);
}

下载方法

@RequestMapping("/downLoadFile")public void downLoadFile(HttpServletRequest req,HttpServletResponse resp,FileDTO fileDTO) throws IOException{logger.info("/file/downLoadFile");PrintWriter pw = null;resp.setContentType("text/html,charset=utf-8");resp.setCharacterEncoding("UTF-8");try {String path = req.getSession().getServletContext().getRealPath("/files")+ File.separator +fileDTO.getFilePath();File dir = new File(path);if (!dir.exists()) {pw=resp.getWriter();pw.print("<script>alert('抱歉,文件不存在');location.href='javascript:history.go(-1)';</script>);");return;}FileInputStream in = new FileInputStream(path);OutputStream fos = resp.getOutputStream();resp.reset();resp.setContentType("application/x-download");resp.setHeader("Content-disposition", "attachment;filename="+getFileName(req,fileDTO.getFileName()));byte[] b = new byte[2048];int read;while ((read = in.read(b)) != -1) {fos.write(b,0,read);}fos.flush();in.close();fos.close();} catch (FileNotFoundException e) {System.out.println(e.getMessage());pw=resp.getWriter();pw.print("<script>alert('抱歉,文件下载失败');location.href='javascript:history.go(-1)';</script>);");}}public String getFileName(HttpServletRequest req,String channelFileName) throws UnsupportedEncodingException{String fileName="";String userAgent = req.getHeader("User-Agent"); //针对IE或者以IE为内核的浏览器,加上win10自带的Edge浏览器if (userAgent.contains("MSIE")||userAgent.contains("Trident")||userAgent.contains("Edge")) {fileName = java.net.URLEncoder.encode(channelFileName, "UTF-8");} else {//非IE浏览器的处理：fileName = new String(channelFileName.getBytes("UTF-8"),"ISO-8859-1");}return fileName;}

package com.cn.entity;import java.io.Serializable;public class FileDTO implements Serializable{/*** */private static final long serialVersionUID = -2487063172455865142L;private int id;private String fileName;private String filePath;public int getId() {return id;}public void setId(int id) {this.id = id;}public String getFileName() {return fileName;}public void setFileName(String fileName) {this.fileName = fileName;}public String getFilePath() {return filePath;}public void setFilePath(String filePath) {this.filePath = filePath;}}

jQuery上传文件控件Uploadify使用相关推荐

基于jQuery的uploadify（flash上传文件)控件v1.6.2 bug修正
最近在http://www.open-open.com/ajax/Upload.htm上找了好多借用flash来选择文件上传的控件,对基于jQuery的uploadify甚是喜欢.于是就拿来应用到项目 ...
用JS怎么判断上传文件控件是否未选择文件
页面代码: <form name="form1" action="uploadPosdetailFile.html" method="post& ...
[共享]一个文件上传的控件，绝对是精品源码
[共享]一个文件上传的控件,绝对是精品源码前段时候在www.codeproject.com上看到一个文件上传的控件,觉得很好,共享给园子里的朋友. 原文链接:http://www.codeproje ...
java 批量上传图片插件_java多文件上传plupload控件实现多图片上传（一）
使用的是plupload-2.1.2 控件.网上资源挺多的,很好下载. plupload 官方地址 : http://www.plupload.com/ plupload 示例: http://www ...
java多文件上传plupload控件实现多图片上传（二）
接上篇 java多文件上传plupload控件实现多图片上传(一) 续写PluploadUtil 和 Plupload PO类,以及后台的action. 至此,可实现多文件上传功能. 上传文件Acti ...
ASP.NET上传文件管理控件
一.引言 v2完成了将数据绑定在dataGrid上的任务,但是dataGrid毕竟是asp.net 1.x的工具,在asp.net 2.0里面,使用是gridveiw.接下来的问题就是将datagri ...
[系列文章]上传文件管理控件v2
一.引言: 开发v1的时候,遇到很多困难(因为我是新手),于是就上网找了一些资料. 其中,这篇<数据绑定的总结 >文章(http://www.cnblogs.com/qingtianyzl ...
uploadify--上传文件控件
简介 Web上传文件是一个很常用的功能,试用过不少上传组件,要么是每次只能选择一个文件,要么是选择了文件后不能取消,直接上传,要么就是对文件.队列等限制支持不佳.面对这么多问题,Uploadify插件 ...
python flask上传文件_Python-Flask-文件上传
一.Python-Flask-文件上传 1.简化版文件上传创建目录: cd 5-4 mkdir -p uploads #必须先创建uploads文件夹. upload.html Title 文件上传 ...
基于jQuery上传文件插件
由于最近项目的需求,需要做一个上传文件的插件,支持上传,下载,删除等功能,该插件主要运用了jQuery与jqgrid以及easyui,先贴出主要代码 /*** 上传附件插件--uploadFile* ...

jQuery上传文件控件Uploadify使用

jQuery上传文件控件Uploadify使用相关推荐

最新文章

热门文章