WebUploader实现图片上传功能
程序员文章站
2022-03-02 23:39:44
本文实例为大家分享了webuploader实现图片上传的具体代码,供大家参考,具体内容如下描述:springmvc 在jsp页面实现 webuploader插件上传图片, 上传到 oss阿里云存储上。...
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: jQuery实现影院选座订座效果
下一篇: 小程序实现商品属性选择或规格选择