使用Huploadify上传文件并动态传递参数到后台
项目需要动态传递参数到后台,查看了一下Huploadify的源码,可以在option中进行设置,但是js中reach不到该变量,于是将option变量设为全局,在onUploadStart参数中进行动态设置参数,OK,成功!
注:uploadify(flash version)实现图片上传功能,依赖于flash的上传插件浏览器兼容性不够,于是找了Huploadify替代uploadify,原因如下:
1、不依赖于flash。
2、库文件大小是uploadify的三分之一。
3、浏览器兼容性测试,支持ie11、firefox(版本 33.1.1)、chrome(版本 38.0.2125),移动端支持安卓,iPhone图片上传(其他浏览器没测)。
4、不用改服务端。
git下载地址:https://github.com/Double-Lv/Huploadify
下载后如下css和js文件在head中引入(jquery.Huploadify.js要在jquery库文件后引入):
Huploadify.css
jquery.Huploadify.js
![](https://images2017.cnblogs.com/blog/1163005/201709/1163005-20170928175023450-725362160.png)
使用Huplodify的demo
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>批量导入</title> <link rel="stylesheet" type="text/css" href="plug-in/Huploadify/Huploadify.css"/> <script type="text/javascript" src="plug-in/jquery/jquery-1.8.3.js"></script> <script type="text/javascript" src="plug-in/Huploadify/jquery.Huploadify.js"></script> <style type="text/css"> </style> <script type="text/javascript"> $(function(){ $('#upload').Huploadify({ auto:false, fileTypeExts:'*.xls;*.xlsx', multi:true, //formData:{type:'0',style:$("#style").val()}, //导入管理数据 fileSizeLimit:999999, showUploadedPercent:true,//是否实时显示上传的百分比,如20% showUploadedSize:true, removeTimeout:9999999, uploader:'excelTempletController.do?uploadExcel&tableName=${tableName}&requestId=${requestId };jsessionid=${pageContext.session.id}', successTimeout:120000, onUploadStart:function(){ option.formData={type:'0',style:$("#style").val()}; }, onInit:function(){ //alert('初始化'); }, onUploadComplete:function(){ }, onDelete:function(file){ console.log('删除的文件:'+file); console.log(file); }, onUploadSuccess:function(file,data,response){ var dt = $.parseJSON(data); $('div.uploadify-queue-item :contains("'+ file.name +'")').after("<span class='up_filename' style='color:red;'>"+ dt.msg + "</span>"); } }); $("input[name='style']").click(function(){ $("#style").val($(this).val()); }); }); </script> </head> <body> <div> 请选择方式:<input name="style" type="radio" value="1" checked="checked"/>追加数量 <input name="style" type="radio" value="0" />覆盖<br/> <input id="style" type="hidden" value="1"/> </div> <div id="upload"> <span>请选择*.xls或*.xlsx文件</span> </div> <div > </div> </body> </html>
后台处理的Controller方法