WebUploader上传文件
2016-07-15 09:40
267 查看
引入资源文件2个,css文件和js文件。
function initUploader() { uploader = WebUploader.create({ swf : '/resources/plugin/webuploader-0.1.5/Uploader.swf',// swf文件路径 server : '${urlApkUpload}',// 文件接收服务端 pick : '#btnPicker',// 选择文件的按钮,内部根据当前运行是创建,可能是input元素,也可能是flash. dnd: '.page-body',// 指定Drag And Drop拖拽的容器 compress : false,// 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传! auto : true,// 设置为 true 后,不需要手动调用上传,有文件选择即开始上传 prepareNextFile: true, fileSingleSizeLimit: 100 * 1024 * 1024,// 100M 验证单个文件大小是否超出限制, 超出则不允许加入队列 timeout: 25 * 60 * 1000,// 25分钟 accept : { title : '选择 APK 文件', extensions : 'apk', mimeTypes : 'application/vnd.android.package-archive' } }); // 当有文件被添加进队列的时候 uploader.on('fileQueued', function(file) { if (!file.name.endWith(".apk")) return false; if (!uploadModal) { uploadModal = layer.open({ type: 1, title: '文件上传', area : ['800px' , '320px'], shade: false, maxmin: false, moveType: 1, offset: 'rb', shift: 2, end: function() { uploadModal = null; uploader.reset(); } }); } $(".layui-layer-content").append('<div id="' + file.id + '" class="item_file">' + '<div class="file-mask"></div>' + '<i class="fa fa-android file_icon"></i>' + '<span class="file_content file_name ellipsis" title="' + file.name + '">' + file.name + '</span>' + '<span class="file_content file_size">' + WebUploader.formatSize(file.size) + '</span>' + '<span class="file_content file_state ellipsis" title="">等待上传...</span>' + '<a href="javascript:void(0);" class="btn btn-primary file_btn btnRemoveFile">删除</a>' + '</div>'); $(".btnRemoveFile").bind("click", function() { var fileItem = $(this).parent(); uploader.removeFile($(fileItem).attr("id"), true); $(fileItem).fadeOut(function() { $(fileItem).remove(); }); }); }); // 文件上传过程中创建进度条实时显示。 uploader.on('uploadProgress', function(file, percentage) { var $li = $('#' + file.id); var txtState = (percentage * 100).toFixed(0) + '%'; /*if (percentage >= 0.99) { txtState = "正在处理文件..."; $li.find('.file_btn').hide(); }*/ $li.find('.file_state').text(txtState); $li.find('.file_state').attr("title", txtState); $li.find('.file-mask').css('width', percentage * 100 + '%'); $(".layui-layer-close").hide(); }); // 当文件上传成功时触发 uploader.on('uploadSuccess', function(file, data) { var $li = $('#' + file.id); if (data.result) { uploadSuccess($li, "正在处理文件..."); $li.find('.file_btn').hide(); $.ajax({ type : "POST", url : "${urlApkHandle}?fileName=" + $li.children(".file_name").html() + "&filePath=" + data.obj, success : function(data) { refreshTableList(); if (data.result) { uploadSuccess($li, "上传成功"); } else { uploadFail($li, data.msg); } } }); } else { uploadFail($li, data.msg); // refreshTableList(); } }); // 当文件上传出错时触发 uploader.on('uploadError', function(file) { uploadFail($('#' + file.id), "上传出错"); }); // 不管成功或者失败,文件上传完成时触发 uploader.on('uploadComplete', function(file) { if (uploader.getFiles("progress").length <= 0) { $(".layui-layer-close").show(); } }); } function uploadSuccess(item, msg) { item.find('.file_state').text(msg); item.find('.file_state').attr("title", msg); } function uploadFail(item, msg) { item.css('color', 'white'); item.find('.file_icon').css('color', 'white'); item.find('.file-mask').css('background', '#d9534f'); item.find('.file_state').text(msg); item.find('.file_state').attr("title", msg); item.find('.file_btn').show(); }
相关文章推荐
- POJ 3276 Face The Right Way 模拟
- 启动嵌入式Tomcat
- POJ Roadblocks 次短路
- POJ 3253 Fence Repair 贪心
- 极限验证
- Redis与Spring整合
- Memcached与Spring整合
- Ubuntu安装QQ2012
- Ubuntu安装Sublime Text3
- 个人Wordpress美化
- js NaN
- 根据填写的出生日期自动带出年龄
- MyEclipse 10.x中拓展自动提示功能
- 操作系统思考 第六章 内存管理
- jetty的配置
- Collection接口源码解析
- MIT License
- eclipse中debug
- Android应用内存泄露分析、改善经验总结
- java程序发布之jre篇 java程序打包成exe可执行安装包以便安装程序