本文实例为大家分享了webuploader实现图片上传的具体代码，供大家参考，具体内容如下
描述：springmvc 在jsp页面实现 webuploader插件上传图片, 上传到 oss阿里云存储上。
预览：
理解： 前端 webuploader插件（这个得去看官网）调起后台,后台 request 接收文件参数，
重新拼装图片url，oss创建连接上传图片提交图片,最后返回图片绝对url和相对url给前端。
先实现前端：1.定义js 2.定义页面
//导入 webuploader插件js、css 样式
<link rel="stylesheet" type="text/css" href="${ctx}/css/plugins/webuploader/webuploader.css" />
<script type="text/javascript" src="${ctx}/js/plugins/webuploader/webuploader.js"></script>
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页面
<div class="center-block">
<div class="btn-group col-sm-12">
<div class="fl">
<div id="fileinput">选择图片</div>
<img src=""
class="wd200 mt10"
id="image" width="200"/>
</div>
<span class="help-block m-b-none">图片大小：510x294</span>
<input class="form-control" id="imagehidden" name="cover" type="text"/>
</div>
</div>
//引用 js初始化插件
infowebuploaderimg("#fileinput", "spvideoimg", "#image", "input[name=cover]", "singlediv");
java 后台
//上传图片(阿里云) 控制层
@responsebody
@requestmapping(value = "/upload", method = requestmethod.post)
public string upload(@requestparam(value = "f", required = false, defaultvalue = "") string f,
string folder,
multiparthttpservletrequest request, httpservletresponse response) {
return commonservice.upload(folder, f, request, response);
}
//业务处理
public string upload(string folder, string f, multiparthttpservletrequest request, httpservletresponse response) {
log.info("commonservice上传图片(腾讯云):newfilename11:" + f);
jsonobject jsonobject = new jsonobject();
string result = "";
try {
iterator<string> itr = request.getfilenames();
multipartfile file = null;
string name = "";
while (itr.hasnext()) {
file = request.getfile(itr.next());
name = file.getoriginalfilename();
string newfilenamebase = uuid.randomuuid().tostring().replace("-", "");
string originalfileextension = file.getoriginalfilename().substring(file.getoriginalfilename().lastindexof("."));
string newfilename = newfilenamebase + originalfileextension;
if (!stringutils.isblank(f)) {
if (f.startswith(","))
f.substring(1);
newfilename = (f.contains(".") ? f.substring(0, f.lastindexof(".")) : f) + ".jpg";
}
newfilename = "img/" + newfilename;
aliyunossutils.uploadfile(newfilename,propertyutil.getvalue("folder"),file);
//tentunossutils.uploadimage(file, newfilename);
/*if (propertyutil.getvalue("pic_url").endswith("/")) {
jsonobject.put("src", propertyutil.getvalue("pic_url") + newfilename);
} else {
jsonobject.put("src", propertyutil.getvalue("pic_url") + "/" + newfilename);
}*/
jsonobject.put("src",commonutils.setimagevideourlsign(newfilename));
jsonobject.put("oname", name);
jsonobject.put("nname", newfilename);
//删除暂存在root里的图片
file tempfile = new file(name);
if (tempfile != null && tempfile.exists()) {
tempfile.delete();
}
}
} catch (exception e) {
log.error("上传图片异常", e);
jsonobject.put("e", e.getmessage());
}
result = jsonobject.tostring();
return result;
}
工具类：
/**
* 文件上传
* @param filename
* @param file
*/
public static void uploadfile(string filename,string folder, multipartfile file) {
try {
// endpoint以杭州为例，其它region请按实际情况填写。
string endpoint = upload_host;
// 阿里云主账号accesskey拥有所有api的访问权限，风险很高。强烈建议您创建并使用ram账号进行api访问或日常运维
string accesskeyid = access_key_id;
string accesskeysecret = access_key_secret;
// 创建ossclient实例。
oss ossclient = new ossclientbuilder().build(endpoint, accesskeyid, accesskeysecret);
// 创建putobjectrequest对象。
putobjectrequest putobjectrequest = new putobjectrequest(folder, filename, multipartfiletofile(file));
// 如果需要上传时设置存储类型与访问权限，请参考以下示例代码。
// objectmetadata metadata = new objectmetadata();
// metadata.setheader(ossheaders.oss_storage_class, storageclass.standard.tostring());
// metadata.setobjectacl(cannedaccesscontrollist.private);
// putobjectrequest.setmetadata(metadata);
// 上传文件。
ossclient.putobject(putobjectrequest);
// 关闭ossclient。
ossclient.shutdown();
} catch (exception e) {
e.printstacktrace();
}
}
public static string setimagevideourlsign(string cover) {
if (cover.startswith("/")) cover = cover.substring(1);
string host = propertyutil.getvalue("pic_url");
if (!host.endswith("/")) host = host + "/";
if (cover.startswith("http") && cover.contains(host)) {
cover = host + cover + "?" + tentunossutils.getsigne(cover.replace(host, ""));
} else if (!cover.startswith("http")) {
cover = host + cover + "?" + tentunossutils.getsigne(cover);
}
return cover;
}
public static string getsigne(string key) {
if (!key.startswith("/")) key = "/" + key;
string sign = "";
string secretid = secret_id;
string secretkey = secret_key;
coscredentials cred = new basiccoscredentials(secretid, secretkey);
cossigner signer = new cossigner();
// 设置过期时间为1个小时
date expiredtime = new date(system.currenttimemillis() + 3600l * 1000l);
// 要签名的 key, 生成的签名只能用于对应此 key 的下载
// string key = "/exampleobject";
sign = signer.buildauthorizationstr(httpmethodname.get, key, cred, expiredtime);
return sign;
}
xml包：
<!-- 阿里云oss --> <dependency> <groupid>com.aliyun.oss</groupid> <artifactid>aliyun-sdk-oss</artifactid> <version>3.8.0</version> </dependency>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
