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

缺乏、安全感 2022-08-25 02:20 256阅读 0赞

## 功能描述 ##

## 组件使用 ##

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

1.引入组件包，如图：

![Center][] ![Center 1][]

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

<table> 
 <tbody> 
 <tr> 
 <td>&lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt; &nbsp; &lt;script type="text/javascript" src="plugs/jqupload/jquery.uploadify-3.1.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" href="plugs/jqupload/uploadify.css"/&gt;</td> 
 </tr> 
 </tbody> 
</table>

3.js调用上传脚本

<table> 
 <tbody> 
 <tr> 
 <td>&lt;script type="text/javascript"&gt; jQuery(document).ready(function() { &nbsp; initAffixUpload(); }); var uploadfiles = null; var affixInfoList = new Array();//已有附件的数组值 //初始化需求附件上传 function initAffixUpload(){ $("#upload_affix").uploadify({ auto &nbsp;: false, &nbsp; &nbsp; &nbsp; &nbsp; height &nbsp; &nbsp; &nbsp; &nbsp;: 20, &nbsp; &nbsp; &nbsp; &nbsp; swf &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : 'plugs/jquery/jqupload/uploadify.swf', &nbsp; &nbsp; &nbsp; &nbsp; uploader &nbsp; &nbsp; &nbsp;: 'plugs/jquery/jqupload/upload.jsp', &nbsp; &nbsp; &nbsp; &nbsp; width &nbsp; &nbsp; &nbsp; &nbsp; : 80, buttonText &nbsp;: "选择上传文件", fileTypeDesc &nbsp;: "附件文件", fileTypeExts &nbsp;: "*.txt;*.doc;*.docx;*.xls;*.xlsx", fileObjName &nbsp;: "file", queueSizeLimit: 5, removeCompleted: true, fileSizeLimit : 500, onDialogOpen: function(){ uploadfiles = {}; }, onSelect: function(file){ uploadfiles[file.name.toLowerCase()] = true; }, onUploadStart: function(){ if(typeof affixInfoList !='undefined' &amp;&amp; affixInfoList.length&gt;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; } } }&nbsp; } }, onQueueComplete: function(){ if(uploadfiles &amp;&amp; uploadfiles!=null){ alert("上传成功!"); } } &nbsp; &nbsp; }); //上传文件 $("#submit_affix").click(function(){ $("#upload_affix").uploadify("upload","*"); }); } &lt;/script&gt;</td> 
 </tr> 
 </tbody> 
</table>

4.页面表单定义元素

<table> 
 <tbody> 
 <tr> 
 <td>&nbsp;&lt;p&gt;&lt;div id="upload_affix"&gt;&lt;/div&gt;&lt;/p&gt; &nbsp; &lt;p&gt;&lt;input type="button" id="submit_affix" value="上传" /&gt;&lt;/p&gt;</td> 
 </tr> 
 </tbody> 
</table>

## 运行效果 ##

![Center 2][]

[Center]: https://img-blog.csdn.net/20140216184615031?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWFuX2Rr/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: /images/20220824/714f6f1084574025b9f7d5f45d4e7c53.png
[Center 2]: /images/20220824/2b373ba57e754ed3b070e1217dbd08f9.png