Uploadif稍做扩展使用文章出自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事件，将类型加入到条目的指定位置