现在的位置: 网页制作教程网站制作经验 >正文
代码插件

WebUploader中选择文件点击无弹出窗口的解决办法

发表于2017/5/20 网站制作经验 0条评论 ⁄ 热度 8,064℃

WebUploader中点击选择文件后无弹出窗口的解决办法:

方法一

在上传按钮上监听一个点击事件,如create(),在该函数中重新生成上传按钮。

function create(){
  uploader.addButton({
   id: '#filePicker',
   innerHTML: '上传'
  });
}

通过该函数,每次点击上传时重新生成上传按钮,这种方式的弊端是,第一次点击上传按钮总是没反应的,之后再次点击才能弹出文件选择框。

方法二

在模态框弹出后再初始化webuploader。

var uploader;
//在点击弹出模态框的时候再初始化WebUploader,解决点击上传无反应问题
$("#myModal").on("shown.bs.modal",function(){
uploader = WebUploader.create({
swf : '/web/public/Uploader.swf',
server : $("#jumicontextPath").val()+'/common/file/upload',// 后台路径
pick : '#filePicker', // 选择文件的按钮。可选。内部根据当前运行是创建,可能是input元素,也可能是flash.
resize : false,// 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
chunked : true, // 是否分片
duplicate:true,//去重, 根据文件名字、文件大小和最后修改时间来生成hash Key.
chunkSize : 52428 * 100, // 分片大小, 5M
/*    fileSingleSizeLimit:100*1024,//文件大小限制*/
auto : true,
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/jpg,image/jpeg,image/png'
}
});

// 文件上传成功,给item添加成功class, 用样式标记上传成功。
uploader.on('uploadSuccess', function (file,response) {
var fileUrl = response.data.fileUrl;
//TODO
$("#responeseText").text("上传成功,文件名:"+response.data.fileName);
});

// 当文件上传出错时触发
uploader.on('uploadError', function (file) {
$("#responeseText").text("上传失败");
});

//当validate不通过时触发
uploader.on('error', function (type) {
if(type=="F_EXCEED_SIZE"){
alert("文件大小不能超过xxx KB!");
}
});
});

单单这样也会有问题,这样每次弹出模态框之后都加载一个边框,使按钮越来越大,所以需要在关闭模态框后销毁webuploader。

//关闭模态框销毁WebUploader,解决再次打开模态框时按钮越变越大问题
$('#myModal').on('hide.bs.modal', function () {
$("#responeseText").text("");
uploader.destroy();
});
  • 暂无评论