使用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


使用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方法

 

 

 

posted @ 2017-09-28 17:59  LoveLife-Everyday  阅读(4550)  评论(0)  编辑  收藏  举报