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

sinbadxia

墨衍会员 · AI 创作全网分发码龄18年

关注

原创最新推荐文章于 2026-01-30 16:52:07 发布 2.3k 阅读 AI 写同款· GEO 优化 ›

jquery.uploadify.v2.1.0.js 上传立即下载

具体使用和参数网上几乎都有, 比如 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();
                },