使用Huploadify上传文件并动态传递参数到后台
生活随笔
收集整理的這篇文章主要介紹了
使用Huploadify上传文件并动态传递参数到后台
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
項(xiàng)目需要?jiǎng)討B(tài)傳遞參數(shù)到后臺(tái)，查看了一下Huploadify的源碼，可以在option中進(jìn)行設(shè)置，但是js中reach不到該變量，于是將option變量設(shè)為全局，在onUploadStart參數(shù)中進(jìn)行動(dòng)態(tài)設(shè)置參數(shù)，OK，成功！
注：uploadify(flash version)實(shí)現(xiàn)圖片上傳功能，依賴于flash的上傳插件瀏覽器兼容性不夠，于是找了Huploadify替代uploadify，原因如下：
使用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>批量導(dǎo)入</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()}, //導(dǎo)入管理數(shù)據(jù)fileSizeLimit:999999,showUploadedPercent:true,//是否實(shí)時(shí)顯示上傳的百分比，如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> 請(qǐng)選擇方式：<input name="style" type="radio" value="1" checked="checked"/>追加數(shù)量 <input name="style" type="radio" value="0" />覆蓋<br/> <input id="style" type="hidden" value="1"/> </div> <div id="upload"> <span>請(qǐng)選擇*.xls或*.xlsx文件</span> </div> <div > </div> </body> </html>
后臺(tái)處理的Controller方法
注：uploadify(flash version)實(shí)現(xiàn)圖片上傳功能，依賴于flash的上傳插件瀏覽器兼容性不夠，于是找了Huploadify替代uploadify，原因如下：
1、不依賴于flash。
2、庫(kù)文件大小是uploadify的三分之一。
3、瀏覽器兼容性測(cè)試，支持ie11、firefox(版本 33.1.1)、chrome(版本 38.0.2125),移動(dòng)端支持安卓，iPhone圖片上傳（其他瀏覽器沒(méi)測(cè)）。
4、不用改服務(wù)端。
?
git下載地址：https://github.com/Double-Lv/Huploadify
下載后如下css和js文件在head中引入（jquery.Huploadify.js要在jquery庫(kù)文件后引入）：
Huploadify.css
jquery.Huploadify.js
使用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>批量導(dǎo)入</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()}, //導(dǎo)入管理數(shù)據(jù)fileSizeLimit:999999,showUploadedPercent:true,//是否實(shí)時(shí)顯示上傳的百分比，如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> 請(qǐng)選擇方式：<input name="style" type="radio" value="1" checked="checked"/>追加數(shù)量 <input name="style" type="radio" value="0" />覆蓋<br/> <input id="style" type="hidden" value="1"/> </div> <div id="upload"> <span>請(qǐng)選擇*.xls或*.xlsx文件</span> </div> <div > </div> </body> </html>
后臺(tái)處理的Controller方法
?
??
轉(zhuǎn)載于:https://www.cnblogs.com/ff-lovelife/p/7607861.html
新人創(chuàng)作打卡挑戰(zhàn)賽發(fā)博客就能抽獎(jiǎng)！定制產(chǎn)品紅包拿不停！總結(jié)
以上是生活随笔為你收集整理的使用Huploadify上传文件并动态传递参数到后台的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： RobotStudio Smart组
- 下一篇： 编程题--进制转换