上传按钮在modal里,modal开始是隐藏的,导致组件获取不到#picker的宽高,没办法初始化。
解决:在按钮出现的时候刷新
$(function(){
var uploader = WebUploader.create({
// swf文件路径
//swf: '/webuploader/Uploader.swf',
auto:false,
// 文件接收服务端。
server: '/upload/file',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: '#picker',
// 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
resize: false,
//只允许上传图片
accept: {
title: 'Images',
extensions: 'apk',
mimeTypes: 'application/vnd.android.package-archive'
}
});
//添加文件
uploader.on( 'fileQueued', function( file ) {
$("#listfile").append( '<div id="' + file.id + '" class="item">' +
'<span class="am-badge">' + file.name + '</span>' +
//'<p class="state">等待上传...</p>' +
'</div>' );
});
//进度
uploader.on( 'uploadProgress', function( file, percentage ) {
var $li = $( '#'+file.id ),
$percent = $li.find('.progress span');
// 避免重复创建
if ( !$percent.length ) {
$percent = $('<p class="progress"><span class="am-progress-bar"></span></p>')
.appendTo( $li )
.find('span');
}
$percent.css( 'width', percentage * 100 + '%' );
$percent.text( percentage * 100 + '%' );
});
//上传成功
uploader.on( 'uploadSuccess', function( file ,response) {
alert(JSON.stringify(response));
$("input[name='serverpath']").val(response.serverpath);
$("input[name='ftppath']").val(response.file);
$("#addappform").submit();
$( '#'+file.id +' .state').text('上传成功!');
});
//error
uploader.on( 'uploadError', function( file ) {
alert('上传失败');
});
//点击上传按钮开始上传
$("#uploadbtn").click(function(){
uploader.upload();
});
//添加模态框控制
$("#addapp_btn").on('click',function(){
layer.open({
title:"添加应用:",
type:1,
anim:5,
offset: '50px',
content:$("#addappmodal"),
area: ['500px', '360px']
});
uploader.refresh();//这里刷新一下即可
});
});
参考博客:
https://www.jianshu.com/p/b59ebac54c43
https://www.cnblogs.com/winteronlyme/p/7008703.html