WebUploader怎么实现图片上传功能
这篇文章将为大家详细讲解有关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页面选择图片