记录问题:webuploader上传插件,上传按钮没反应,引入文件都正常

上传按钮在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


猜你喜欢

转载自blog.csdn.net/qq_22656233/article/details/80046408