Java -- webuploader 使用

最新推荐文章于 2024-10-09 11:03:34 发布

@程序员

最新推荐文章于 2024-10-09 11:03:34 发布

阅读量252

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/sky_eyeland/article/details/102668126

版权

html 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、引入文件

<link href="/webuploader/0.1/webuploader.css"  rel="stylesheet" />
<script src="/webuploader/0.1/webuploader.js" type="text/javascript"></script>

2、标签设置

<style>
	.list-img img{
		border: 1px solid #ccc;display: block;width: 140px;height: 140px;
	}
	.list-img .btn{
		width: 140px;margin-top: 10px;
	}
	.pickerBtn{
		width: 140px;
		margin-top: 10px;
	}
	.pickerBtn .webuploader-pick{
		width: 140px;
	}
</style>
<div class="list-img">
	<input type="hidden" name="pickerImgUrl" value=""/>
	<img id="pickerImg" src="" alt=""/>
	<div class="wu-example">
		<div class="btns">
			<div id="pickerImgBtn" class="pickerBtn">选择图片</div>
		</div>
	</div>
</div>

3、初始化

<script type="text/javascript">
var uploader = WebUploader.create({
	swf: '/webuploader/0.1/Uploader.swf',
	pick: '#pickerImgBtn',               //页面标签名称
	server: '/platform/upload/image',    //服务器地址
	fileSizeLimit: 1*1024*1024,          //限制大小为1M
	resize: false,
	accept: {                            //限制类型
		title: 'Images',
		extensions: 'gif,jpg,jpeg,bmp,png',
		mimeTypes: 'image/*'
	}
});

//选择文件之后回调
uploader.on( 'fileQueued', function( file ) {
	uploader.upload();
});

//访问服务接口，上传成功之后
uploader.on( 'uploadSuccess', function( file, response ) {
	if(response.result == "SUCCESS"){
		$("input[name='pickerImgUrl']").val(response.imgUrl);
		$("#pickerImg").attr( 'src', response.imgUrl );
	}
});

//失败回调
uploader.on("error", function (type) {
	if (type == "Q_TYPE_DENIED") {
		js.showMessage("请上传JPG、PNG、GIF、BMP格式文件");
	} else if (type == "Q_EXCEED_SIZE_LIMIT") {
		js.showMessage("文件大小不能超过1M");
	}else {
		js.showMessage("上传出错！请检查后重新上传！错误代码"+type);
	}
});
</script>