webupload 上传文件
来源:互联网 发布:时时彩遗漏数据软件 编辑:程序博客网 时间:2024/05/22 04:44
var id="filelist_burowse";var uploader= WebUploader.create({ pick: { id: '#filelist_burowse', label: '点击选择文件' }, accept: { title: 'myself', extensions: 'jpg', mimeTypes: 'image/*,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document' }, // swf文件路径 swf: '../js/webuploader-0.1.5/Uploader.swf', fileNumLimit:1, server: 'upload.do', duplicate: true, auto:true, fileVal:"file"});$("#"+id).append('<ul id="'+id+'_filelist" class="plupload_filelist"></ul>');//添加文件事件 uploader.on("fileQueued",function(file){ var inputHTML=""; inputHTML+='<li id="' + file.id + '" style=" overflow: hidden; margin-top: 10px; background-color: rgba(66, 139, 202, 0.11);">\<div class="plupload_file_name plupload_delete"><span>' + file.name + '</span><a href="javascript:;" style=" float: right;top: 5px;right: 5px;" class="glyphicon glyphicon-remove" ></a></div>\<div class="plupload_file_action"><a href="#"></a></div>\<div class="head" style="width:100%">\ <div id="progress" class="uploadify-progress" style="float:left;width:90%; background-color: darkgray;">\ <div class="uploadify-progress-bar" style="width: 0%;"></div>\ </div>\ <div id="view" style="float:left;width:10%;padding-left: 10px;" class="uploadify-progress-cuess">0%</div>\ <div style="float:right;width:5%;text-align:right;"></div>\</div>\<div class="plupload_file_status">正在上传</div>\</li>'; $("#"+id+"_filelist").append(inputHTML); }); /** 上传成功事件*/ uploader.on( 'uploadSuccess', function( file,response ) { var json = JSON.parse(response);file["serviceData"]=json;var inputHTML="";inputHTML += '<div class="content" style="width:100%; clear:both; margin-top:5px;"><span style="display: block;"></span></div>';$("#"+file.id,$dialog).find("div.plupload_file_status").html("上传成功");$("#"+file.id,$dialog).append(inputHTML);}); /** 进度条事件*/ uploader.on("uploadProgress",function(file,progress){ console.log(progress); $("ul li#"+file.id).find(".uploadify-progress-bar").css("width",(progress*100)+"%"); $("ul li#"+file.id).find(".uploadify-progress-cuess").html((progress*100).toFixed(2)+"%"); }); /** 队列文件全部上传成功后触发 */ uploader.on("uploadFinished",function(){ $(".dialog-footer", $dialog).find("button:eq(0)").attr("disabled",false); }); /** 删除事件绑定 */ $("#"+id).on("click","div.plupload_delete a",function(e) { //uploader.getFiles("complete"); 获取上传成功的文件(不包括取消的文件)var li = $(this).parent().parent();var file = uploader.getFile(li.attr("id"));uploader.stop(file);uploader.removeFile(file,true);li.remove();e.preventDefault();});
阅读全文