jquery上传组件的使用经验介绍

功能描述

组件使用

下面介绍一个上传附件的例子。

1.引入组件包，如图：

2.引入页面依赖的js、样式等

<script type="text/javascript" src="jquery.js"></script>   <script type="text/javascript" src="plugs/jqupload/jquery.uploadify-3.1.js"></script> <link rel="stylesheet" href="plugs/jqupload/uploadify.css"/>

3.js调用上传脚本

<script type="text/javascript"> jQuery(document).ready(function() {   initAffixUpload(); }); var uploadfiles = null; var affixInfoList = new Array();//已有附件的数组值 //初始化需求附件上传 function initAffixUpload(){ $("#upload_affix").uploadify({ auto  : false,         height        : 20,         swf           : 'plugs/jquery/jqupload/uploadify.swf',         uploader      : 'plugs/jquery/jqupload/upload.jsp',         width         : 80, buttonText  : "选择上传文件", fileTypeDesc  : "附件文件", fileTypeExts  : "*.txt;*.doc;*.docx;*.xls;*.xlsx", fileObjName  : "file", queueSizeLimit: 5, removeCompleted: true, fileSizeLimit : 500, onDialogOpen: function(){ uploadfiles = {}; }, onSelect: function(file){ uploadfiles[file.name.toLowerCase()] = true; }, onUploadStart: function(){ if(typeof affixInfoList !='undefined' && affixInfoList.length>0){ for(var name in uploadfiles){ for(var affixname in affixInfoList){ if(name == affixInfoList[affixname]){ $("#upload_affix").uploadify("stop"); alert("文件["+name+"]已经被上传过，请重新选择！"); //$(".uploadify-queue-item").remove(); $(".uploadify-queue-item").each(function(index){ var fname = $(this).children(".fileName").html(); var fid = $(this).attr("id"); if(fname.indexOf(name) != "-1"){ $('#upload_affix').uploadify('cancel', fid); } }); uploadfiles = null; break; } } }  } }, onQueueComplete: function(){ if(uploadfiles && uploadfiles!=null){ alert("上传成功!"); } }     }); //上传文件 $("#submit_affix").click(function(){ $("#upload_affix").uploadify("upload","*"); }); } </script>

4.页面表单定义元素

<p><div id="upload_affix"></div></p>   <p><input type="button" id="submit_affix" value="上传" /></p>

运行效果