码迷,mamicode.com
首页 > 其他好文 > 详细

Uploadif稍做扩展使用

时间:2014-12-23 15:21:14      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:

文章出自Uploadify扩展配置使用http://www.wuyinweb.com/doc/52/57.aspx

在做项目中涉及多文件上传,经过筛选,选择了Uploaidify,但还涉及一个问题,就是对于上传的文件能够进行分类,又不想在页面加入多个Uploaidify控件,故稍做改造

效果如

技术分享

具体改造代码主要代码

<div id="UploadBox">
                <div class="ops">
                    <input type="file" name="uploadify" id="uploadify" />
                    <input type="button" id="btnUpload" value="" />
                    <input type="button" id="btnCancel" value="" />
                </div>
                <div id="fileQueue"></div>
            </div>
<!--文件类型框 -->
<select>
 <asp:Repeater runat="server" ID="repTypes">
  <ItemTemplate>
   <option value=‘<%# Eval("id") %>‘><%# Eval("vc_TypeName") %></option>
  </ItemTemplate>
 </asp:Repeater>
 </select>

JS方面

$(document).ready(function () {
            $("#uploadify").uploadify({
                swf: ‘TheUploadify/uploadify.swf‘,
                uploader: ‘TheUploadify/Upload.aspx?ID=‘ +<%=ID %> +‘&DataID=‘ +<%=DataID %> +‘‘,
                cancelImg: ‘TheUploadify/cancel.png‘,
                formData: { ‘folder‘: ‘UploadFile‘ },
                progressData: ‘speed‘,
                fileSizeLimit: ‘10000KB‘,
                queueID: ‘fileQueue‘,
                auto: false,
                multi: true,
                height: 27,
                buttonImage: ‘TheUploadify/selectFile.jpg‘,
                wmode: ‘transparent‘,
                onUploadComplete: function (event, queueID, fileObj, response, data) {
                    // alert(fileObj.name);文件上传成功 
                },
                onError: function (event, queueID, fileObj) {
                    alert("文件:" + fileObj.name + " 上传失败");
                },
                onUploadStart: function (file) {
                   //********根据file.id可以找到每一个条目
                    var attachType = $("#" + file.id).find("select").val();
                    this.addPostParam("attach_type", attachType);
                    this.addPostParam("file_name", encodeURI(file.name)); //在onUploadStart事件中添加文件名参数
                },
                onQueueComplete: function () {
                    //全部上传完成后刷新
                    window.location.href = window.location.href;
                },
                onDialogClose: function () {
                    var attachTypes = $("#attachTypes");
                   
                    //克隆文件类型
                    var items = $(".fileName");
                    if (items.length > 0) {
                        items.each(function () {
                            var nowitem = $(this);
                            if (nowitem.parent().find("select").length < 1) {
                                var cloneTypes = attachTypes.clone();
                                cloneTypes.removeAttr("id");
                                cloneTypes.insertAfter(nowitem);
                            }
                        });
                    }

                }
            });
            //开始上传
            $("#btnUpload").click(function () {
                $("#uploadify").uploadify(‘upload‘, ‘*‘);
            });

            //取消上传
            $("#btnCancel").click(function () {
                $("#uploadify").uploadify(‘cancel‘, ‘*‘);
            });
        });

其主要原理是在选择文本对话框关闭时,触发相应的onDialogClose事件,将类型加入到条目的指定位置

 

Uploadif稍做扩展使用

标签:

原文地址:http://www.cnblogs.com/wuyin/p/4179985.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!