这篇文章将为大家详细讲解有关WebUploader怎么实现图片上传功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
为奉贤等地区用户提供了全套网页设计制作服务，及奉贤网站建设行业解决方案。主营业务为网站设计制作、成都做网站、奉贤网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！
本文实例为大家分享了WebUploader实现图片上传的具体代码，供大家参考，具体内容如下
描述：springmvc 在jsp页面实现 WebUploader插件上传图片, 上传到 oss阿里云存储上。
预览：
理解： 前端 WebUploader插件（这个得去看官网）调起后台,后台 request 接收文件参数， 重新拼装图片url，oss创建连接上传图片提交图片,最后返回图片绝对url和相对url给前端。
先实现前端：1.定义js 2.定义页面
//导入 WebUploader插件js、css 样式
js定义
//使用WebUploader插件做图片上传
function InfoWebUploaderImg(id, folder, image, imageHidden, queueID, filename){
// 初始化Web Uploader
var uploader = WebUploader.create({
// 选完文件后，是否自动上传。
auto: true,
// swf文件路径 下载js 里面有.swf文件
swf: '/js/plugins/webuploader/Uploader.swf',
// 文件接收服务端。后台控制层
server: '/common/upload',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: id,
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png',
},
});
/**
* 验证文件格式、数量以及文件大小
*/
uploader.on("error", function(type) {
if (type == "Q_TYPE_DENIED") {
alert("请上传图片格式文件");
} else if (type == "F_EXCEED_SIZE") {
alert("文件大小不能超过8M");
}
});
// 文件上传失败，显示上传出错。
uploader.on( 'uploadError', function( file ) {
alert("上传失败,请重试!");
});
// 文件上传成功，给item添加成功class, 用样式标记上传成功。data回调的js
uploader.on('uploadSuccess', function(file,data) {
$(imageHidden).val('/' + data.nname);
$(image).attr("src", data.src);
$(image).css("margin-top", "10px");
$(image).show();
$(image).removeClass("hide");
});
}//jsp页面
选择图片
