WebUploader实现图片上传功能
更新时间:2021年3月14日 15:00 点击:2081
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
上一篇: java实现抽奖功能解析
相关文章
- PHP代码如下:复制代码 代码如下:if (isset($_FILES["Filedata"]) || !is_uploaded_file($_FILES["Filedata"]["tmp_name"]) || $_FILES["Filedata"]["error"] != 0) { $upload_file = $_FILES['Filedata']; $fil...2013-10-04
- 本案例非通用,仅作笔记以备用 修改后的结果是 百度编辑器里上传的图片路径为/d/file/upload1...2014-07-03
- 这篇文章主要介绍了Java实现将图片上传到webapp路径下 路径获取方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-11-12
- upload.php复制代码 代码如下:<?phpif(isset($_FILES["myfile"])){$ret = array();$uploadDir = 'images'.DIRECTORY_SEPARATOR.date("Ymd").DIRECTORY_SEPARATOR;$dir = dirname(__FILE__).DIRECTORY_SEPARATOR.$upl...2014-06-07
ASP.NET百度Ueditor编辑器实现上传图片添加水印效果
这篇文章主要给大家介绍了ASP.NET百度Ueditor编辑器1.4.3这个版本实现上传图片添加水印效果的相关资料,文中通过图文及示例代码介绍的非常详细,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。...2021-09-22- 这篇文章主要介绍了Yii框架实现图片上传的方法,结合实例形式较为详细的分析了Yii框架实现图片上传功能的具体步骤与相关操作技巧,需要的朋友可以参考下 本文实例...2017-07-06
- 这款文件上传实用代码,可以方便的上传你指定的文件或图片,同时也可以快速的限制上传图片文件类或大小。 /* * created on 2010-6-21 * * the class for image...2016-11-25
- 多文件上传其实就包括了图片及各种文件了,下面介绍的是一款PHP多文件上传类,一共两个文件,upp.php 和 uploadFile.php,upp.php,这是前台所显示的表单文件了,默认的是四个...2016-11-25
- 这款图片上传源代码是一款可以上传图片并且还具有给上传的图片生成缩略图与增加水印功能哦,可以说是一款完美的图片上传类哦。 代码如下 复制代码 ...2016-11-25
- 分享一个网友写的php图片上传类,支持加水印,生成略缩图功能哦,面是配置和可以获取的一些信息(每一个配置信息都有默认值,如无特殊需要,可以不配置): 代码如下 ...2016-11-25
- php实现多图片上传方法非常的简单只要遍历数组然后使用上传函数就可以搞定了,可以说几句代码就可以实现,但对于新手来讲还是有点,下面一起来看看。 在做图片上传时用...2016-11-25
- 下面来为你免费提供一款php 图片上传代码哦,如果你正在找文件上传的图片代码就进来看看吧,这是一款只支持jpg,gif,png,swf文件上传的php实例代码 <?php 代...2016-11-25
- 这是一款完美的php文件上传代码,图片上传成功后并自动给图片增加上水印,这样很好的快速的提高的了要手工一张张增加水印效果。 代码如下 复制代码 ...2016-11-25
php discuz chhome 图片上传swfupload功能
php discuz chhome 图片上传swfupload功能 这上传与discuz来比, 还相差太远. 功能也欠缺. 除了部分内置的url引向,我们改不了之外, 其它的数据都是可以修改的. <?...2016-11-25- php图片上传并生成水印 <?php header('Content-Type:text/html;charset=gb2312'); $animation = new Imagick(); $animation->setFormat(...2016-11-25
- 从标题来看我们知道Ckeditor不支持图片上传功能,它是需要一个组件Ckfinder才可以支持上传图片, 本文章就来详细的介绍了如何配置Ckeditor+Ckfinder实现图片上传的功能...2016-11-25
- 网站后台都需要有上传图片的功能,下面的例子就是实现有关图片上传。缺点:图片上传到本服务器上,不适合大量图片上传...2021-09-22
- 小编推荐的这篇文章介绍了php实现base64图片上传方式实例代码,非常实用,有兴趣的同学快看看吧 本例子中没有采用File Post上传文件方式!原理一样,为了更加的理解base6...2017-07-06
- 无意之中发现特殊的图片上传可以绕过php gd库对图片处理,然后实现php执行,太危险了,下面来看看我是怎么实现的,然后你如何也存在这样的情况,赶快把漏洞补起吧。 我使用...2016-11-25
Symfony2使用第三方库Upload制作图片上传实例详解
这篇文章主要介绍了Symfony2使用第三方库Upload制作图片上传的方法,结合实例形式较为详细的分析了Symfony2使用第三方库Upload的具体步骤与相关使用技巧,需要的朋友可以参考下...2016-02-09