多文件上传uploadify.v2.1.0使用总结

来源：互联网发布：怎么用网络赚钱编辑：程序博客网时间：2024/06/05 07:46

具体使用和参数网上几乎都有, 比如 http://www.jb51.net/article/23225.htm

这里只讲一些问题的解决

1.如何解决中文字乱码

使用属性buttonImg将flash文件设置为图片,再使用div当背景

 'buttonImg': '../JS_Upload/mutiImport.png',

  <td colspan="5" align="left"><div style="background:url(../JS_Upload/mutiImport.png); width:110px;height:23px;"><input type="file" name="uploadify" id="uploadify" accept="image/jpeg"  /></div></td>

2.界面显示的时候flash加载很慢

解决:

这个使用一个div将div的背景设置为buttonImg一样的图片背景就行了

<div style="background:url(../JS_Upload/mutiImport.png); width:110px;height:23px;">

<input type="file" name="uploadify" id="uploadify" accept="image/jpeg"  /></div>

效果:

3.后台接收中文参数的时候会乱码

解决:

在ashx处理前将编码转换为utf-8

context.Request.ContentEncoding = Encoding.GetEncoding("UTF-8");context.Response.ContentEncoding = Encoding.GetEncoding("UTF-8");

4.一次性上传多个文件但是如果部分成功部分失败想导出成excel应该怎么做?

提供一种思路:

由于此控件每上一次就会自动调用一次后台处理方法,需要在后台先把错误信息拼接到前台隐藏控件里

然后在onAllComplete方法里把错误信息拼到form表单里最后提交form表单到达处理页面,由处理页面将错误信息导出excel

需要注意的是,提交表单的时候最好使用iframe,不然界面条件会被刷新掉

 $("#uploadify").uploadify({                'uploader': '../JS_Upload/uploadify.swf',                'script': 'UploadHandler.ashx?method=UPLOAD_HWC_SFDZ@' + $(HEAD_STR + "HF_E_COMMERCE_CODE").val() + "@" + $(HEAD_STR + "HF_LOGIN_USERNAME").val(),                'cancelImg': '../JS_Upload/cancel.png',                'folder': 'UploadFileTemp',                'queueID': 'fileQueue',                'auto': true,                'multi': true,                'wmode':'transparent',                'height':25,                 'width': 130,                'buttonImg': '../JS_Upload/mutiImport.png',                //'buttonText': '浏览', //按钮上的文字                     'queueSizeLimit': <%=SFDZ_MAX_UPLOADED_COUNT%>, //上传队列的最大长度                // 'sizeLimit': 1024 * 200, //最大200KB                'fileExt': '*.jpg',                'fileDesc': '请选择jpg格式',                'simUploadLimit': '1', //一次同步上传的文件数目                  'onAllComplete': function(event, uploadObj) //多个上传                {                    //alert("上传完成!");                    document.getElementById("uploadForm").submit();                    clearErrorMsg();                    hiddenLoadingDiv();                },                'onQueueFull': function(event, queueSizeLimit) {                    //如果超过上传队列的最大长度 取消上传                    $('#uploadify').uploadifyClearQueue();                },                'onProgress': function(event, ID, fileObj, data) {                    showLoadingDiv(); //锁屏                },                'onComplete': function(event, ID, fileObj, response, data) //单个上传                {                    var obj = eval("(" + response + ")");                    //alert(obj.error_code);                    //错误代码 100文件大小不能为0                      //         102 文件不能超过xx                     //         103文件名不正确                      //         110 文件上传失败                     //         120文件上传成功                    //         105 该订单不属于当前电商                    var hid_error_code_100 = $("#hid_error_code_100").val();                    var hid_error_code_102 = $("#hid_error_code_102").val();                    var hid_error_code_103 = $("#hid_error_code_103").val();                    var hid_error_code_105 = $("#hid_error_code_105").val();                    var hid_error_code_110 = $("#hid_error_code_110").val();                    switch (obj.error_code) {                        case "100":                            //alert(obj.error_msg);                            //alert(hid_error_code_100);                            if (!checkIsNull(obj.error_msg)) {                                $("#hid_error_code_100").val(hid_error_code_100 + obj.error_msg + "、");                            }                            break;                        case "102":                            if (!checkIsNull(obj.error_msg)) {                                $("#hid_error_code_102").val(hid_error_code_102 + obj.error_msg + "、");                            }                            break;                        case "103":                            if (!checkIsNull(obj.error_msg)) {                                $("#hid_error_code_103").val(hid_error_code_103 + obj.error_msg + "、");                            }                            break;                        case "105":                            if (!checkIsNull(obj.error_msg)) {                                $("#hid_error_code_105").val(hid_error_code_105 + obj.error_msg + "、");                            }                            break;                        case "110":                            if (!checkIsNull(obj.error_msg)) {                                $("#hid_error_code_110").val(hid_error_code_110 + obj.error_msg + "、");                            }                            break;                        default:                            break;                    }                }            });        });

    <form action="Frm_Action_SFDZ.aspx?DoType=ExportHWC_SFDZ_ERROR" name="uploadForm" id="uploadForm" method="post" target="Action_frame">            <input id="hid_error_code_100" name="hid_error_code_100" type="hidden" value=""  />            <input id="hid_error_code_102" name="hid_error_code_102" type="hidden" value=""  />            <input id="hid_error_code_103" name="hid_error_code_103" type="hidden" value=""  />            <input id="hid_error_code_110" name="hid_error_code_110" type="hidden" value=""  />            <input id="hid_error_code_105" name="hid_error_code_105" type="hidden" value=""  />  </form>

 <iframe id="Action_frame" name="Action_frame" style="display:none;"></iframe>

5.如果添加一个带滚动条的效果

提供一种思路:

在开始执行上传的时候打开一个层遮住,在onAllComplete执行完毕时关闭层

 'onProgress': function(event, ID, fileObj, data) {                    showLoadingDiv(); //锁屏                },

 'onAllComplete': function(event, uploadObj) //多个上传                {                    //alert("上传完成!");                    document.getElementById("uploadForm").submit();                    clearErrorMsg();                    hiddenLoadingDiv();                },

6.如何在超过一次性上传个数限制的时候取消上传

提供一种思路:

在onQueueFull方法里调用取消方法即可

  'onQueueFull': function(event, queueSizeLimit) {                    //如果超过上传队列的最大长度 取消上传                    $('#uploadify').uploadifyClearQueue();                },

0 0