JavaWeb上传头像

最近工作中遇到需要维护个人信息，包括头像信息，再次记录，方便以后使用

前端：

<img id="expert_img" alt="100x100" src="img/profile.png" width="200" height="200"><div class="caption"><a href="#" data-type="text" data-pk="1"class="editable editable-click inputText"style="margin-bottom: 10px;"> </a></div><div class="span12" style="margin-top: 10px; text-align: center; font-size: 18px;"><input type="file" class="hide" id="uploadfile" name="upfile"class="" />
<a class="span12"href="javascript:openSelectFile();">添加附件</a></div>

js:

//上传文件function openSelectFile(){$("#uploadfile").trigger("click");//出发shi'jian}$('#uploadfile').fileupload({dataType: 'json',url:'admin/uploadImage',formData:{businessType:"expert"},autoUpload:true,add: function (e, data) {var fileType = data.files[0].name.split('.').pop();var   acceptFileTypes = /jpg|jpeg|png$/i;if (!acceptFileTypes.test(fileType)) {toastr.warning("不支持的文件类型");return ;}var size = data.files[0].size;size = (size/1024).toFixed(2);//文件大小单位kbvar maxFileSize = 10*1024;//最大允许文件大小单位kbif(size>maxFileSize){toastr.warning("文件大小："+size+"KB,超过最大限制："+maxFileSize+"KB");return ;}                   data.submit(); },fail:function (e, data) {toastr.warning("附件上传失败，请重试或者联系管理员！");},done: function (e, data) {//上传成功，把保存路径返回$('#expert_img').attr('src','admin/images/'+data._response.result.url);$('#expert_img_id').val(data._response.result.url);}});

后端：

/*** 图片上传* @param request* @param response* @return*/@RequestMapping(value="/admin/uploadImage",method=RequestMethod.POST)@ResponseBodypublic String uploadImage(@RequestParam("upfile") MultipartFile file,HttpServletRequest request){JSONObject ret = new JSONObject();JSONObject result = new JSONObject();if (request.getSession().getAttribute("ADMIN-USER-INFO") == null) {ret.put("code", "-2");ret.put("msg", "你尚未登陆，请先登录！");return ret.toJSONString();}try {if(!file.isEmpty()){int typeIndex = file.getOriginalFilename().lastIndexOf(".");String name = file.getOriginalFilename();String type = "" ;if(typeIndex>0){name = file.getOriginalFilename().substring(0,typeIndex);type = file.getOriginalFilename().substring(typeIndex+1);}String dateDir = sf2.format(new Date());String id = UUID.randomUUID().toString().replaceAll("-", "").toLowerCase();File dir = new File(uploadFileDir);if (!dir.exists()) {dir.mkdirs();}File destFile = new File(uploadFileDir + File.separator +request.getParameter("businessType")+ File.separator + dateDir + File.separator + id);FileUtils.copyInputStreamToFile(file.getInputStream(), destFile);result.put("id", id);result.put("code", "1");result.put("state", "SUCCESS");result.put("url", request.getParameter("businessType")+"/"+dateDir+"/"+ id+"/"+type);result.put("msg", "文件上传成功！");}else{result.put("code", "-1");result.put("msg", "请选择需要上传的文件！");}} catch (Exception e) {result.put("code", "-1");result.put("msg", "上传文件异常，请重试或者联系管理员！");}return result.toJSONString();}@RequestMapping("/admin/images/{buinessType}/{dateDir}/{id}/{type}")public ResponseEntity<byte[]> fileDownLoad(HttpServletRequest request,@PathVariable String buinessType, @PathVariable String dateDir, @PathVariable String id, @PathVariable String type) throws Exception {File file = new File(uploadFileDir + File.separator + buinessType + File.separator+ dateDir  + File.separator + id);InputStream in=new FileInputStream(file);HttpHeaders headers=new HttpHeaders();//设置响应头headers.add("Content-type","image/"+type);
//       headers.add("Content-Disposition", "attachment;filename="+id);HttpStatus statusCode = HttpStatus.OK;byte[] body=null;body=new byte[in.available()];// 返回下一次对此输入流调用的方法可以不受阻塞地从此输入流读取（或跳过）的估计剩余字节数in.read(body);in.close();ResponseEntity<byte[]> response=new ResponseEntity<byte[]>(body, headers, statusCode);return response;}

说明： $('#expert_img').attr('src','admin/images/'+data._response.result.url);

@RequestMapping("/admin/images/{buinessType}/{dateDir}/{id}/{type}")

data._response.result.url 存储的时相对路径，data._response.result.url 的内容={buinessType}/{dateDir}/{id}/{type} 图片将以流的方式正常显示

JavaWeb上传头像相关推荐

js 上传头像img
<label><div class="myusercenter-image-none"><img src="" class=&qu ...
php上传头像的代码,php头像上传预览实例代码
说道上传图片,大家并不陌生,不过,在以后开发的项目中,可能并不会让你使用提交刷新页面式的上传图片,比如上传头像,按照常理,肯定是在相册选择照片之后,确认上传,而肯定不会通过form表单,点击submi ...
上传头像，layui上传图片
layui上传与bootstrap上传相似,只是不需要下插件, layui自带的已够用先看一下前台界面,这里是用到的上传头像先点击开始上传,头像上传至服务器中, 返回json添加至form表单中, ...
ASP.NET MVC3 上传头像图片并截图
关于上传头像并且截图网上应该有很多资料,大多都是JQuery插件,用起来不是很方便本文所介绍的方法将快速完成一个"上传头像图片并截图",只需要修改少量的代码我们先来看看完成后的 ...
php拍视频上传,php视频拍照上传头像功能实现代码分享
现在手机拍照很火,那么如何使用手机拍照并上传头像呢?原因很简单,就是数据传递,首先手机传递照片信息,既不是post传递也不是get函数传递,这个另外一种数据如果要在php中实现视频拍照我们需要借助于 ...
Django搭建个人博客：上传头像图片
到目前为止我们的博客处理的都是文字.现代互联网早就进入了"读图"时代,图片的维护.展示也就相当重要. 上一章中预留了avatar字段,用来保存用户上传的头像,现在我们来实现这个功能 ...
axios获取图片显示_vue中使用axios post上传头像/图片并实时显示到页面的方法
在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮完成图片的上传成功代码部分有参考他人的写法. html代码: 请上传图片 js代码: //实时显示该图片在页面 g ...
如何给Docker hub用户上传头像
我第一次使用Docker hub时,觉得很奇怪,这个网站上面没有允许用户上传头像的地方. 后来经过研究才发现,需要用在Docker hub上注册用户的同一个邮箱到Gravatar这个网站上再注册一个账 ...
koa --- 使用koa-multer和element-ui组件上传头像
文件上传前端代码 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> ...

JavaWeb上传头像

JavaWeb上传头像

JavaWeb上传头像相关推荐

最新文章

热门文章