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>

运行效果