java中上传本地图片
如果你想上传多张图片:http://blog.csdn.net/xuanzhangran/article/details/54929988
如果是上传单张如下:
点击上传图片按钮,上传本地
效果如图:
1:原始图框:
2:点击预览,弹出本地弹框:
3:选中图片点击打开/确认:
实现的代码如下:
前台代码:
<div class="row"><span class="personattr">身份证正面照片:</span><input type="hidden" name="img" id="thumbUrl"/><input type="file" name="logoFile" id="logoFile" onchange="setImg(this);"><span><img id="thumburlShow" src="" width="120" height="120"/></span></div>
js代码
function setImg(obj){//用于进行图片上传,返回地址var f=$(obj).val();if(f == null || f ==undefined || f == ''){return false;}if(!/\.(?:png|jpg|bmp|gif|PNG|JPG|BMP|GIF)$/.test(f)){alertLayel("类型必须是图片(.png|jpg|bmp|gif|PNG|JPG|BMP|GIF)");$(obj).val('');return false;}var data = new FormData();$.each($(obj)[0].files,function(i,file){data.append('file', file);});$.ajax({type: "POST",url: "/business/uploadImg.html",data: data,cache: false,contentType: false, //不可缺processData: false, //不可缺dataType:"json",success: function(suc) {if(suc.code==0){$("#thumbUrl").val(suc.message);//将地址存储好$("#thumburlShow").attr("src",suc.message);//显示图片 }else{alertLayel("上传失败");$("#url").val("");$(obj).val('');}},error: function(XMLHttpRequest, textStatus, errorThrown) {alertLayel("上传失败,请检查网络后重试");$("#url").val("");$(obj).val('');}});}
后台代码:
package com.test.business;
import com.idorabox.manage.web.util.TimeUtil;
import com.idorabox.core.utils.DateUtil;
import org.springframework.web.multipart.MultipartFile;
import org.apache.commons.io.FileUtils;
import javax.servlet.ServletContext;
import java.util.Random;
import java.io.File;@RequestMapping("/business")
public class BusinessAction {@ResponseBody@RequestMapping("/uploadImg.html")public String uploadPicture(@RequestParam(value="file",required=false)MultipartFile file,HttpServletRequest request){File targetFile=null;String msg="";//返回存储路径int code=1;String fileName=file.getOriginalFilename();//获取文件名加后缀if(fileName!=null&&fileName!=""){ String returnUrl = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() +"/upload/imgs/";//存储路径String path = request.getSession().getServletContext().getRealPath("upload/imgs"); //文件存储位置String fileF = fileName.substring(fileName.lastIndexOf("."), fileName.length());//文件后缀fileName=new Date().getTime()+"_"+new Random().nextInt(1000)+fileF;//新的文件名//先判断文件是否存在String fileAdd = DateUtil.format(new Date(),"yyyyMMdd");File file1 =new File(path+"/"+fileAdd); //如果文件夹不存在则创建 if(!file1 .exists() && !file1 .isDirectory()){ file1 .mkdir(); }targetFile = new File(file1, fileName);
// targetFile = new File(path, fileName);try {file.transferTo(targetFile);
// msg=returnUrl+fileName;msg=returnUrl+fileAdd+"/"+fileName;code=0;} catch (Exception e) {e.printStackTrace();}}return JSON.toJSONString(ResponseResult.result(code, msg));}
}ResponseResult 实体类如下:
import java.util.Map;public class ResponseResult {private Integer code;private String message;private Map<String, Object> result;public Integer getCode() {return this.code;}public void setCode(Integer code) {this.code = code;}public String getMessage() {return this.message;}public void setMessage(String message) {this.message = message;}public Map<String, Object> getResult() {return this.result;}public void setResult(Map<String, Object> result) {this.result = result;}private static ResponseResult responseResult;/*** 返回结果* @param code* @param message* @param token* @param map* @return*/public static ResponseResult result(int code, String message, Map<String, Object> map){responseResult = new ResponseResult();responseResult.setCode(code);responseResult.setMessage(message);responseResult.setResult(map);return responseResult;}public static ResponseResult result(int code, String message){responseResult = new ResponseResult();responseResult.setCode(code);responseResult.setMessage(message);return responseResult;}public ResponseResult() {}}注意:后台代码第15行:文件的位置:你需要在你的项目的webapp下创建upload文件,upload下创建imgs文件,否则存储不成功。也就会上传失败。
java中上传本地图片相关推荐
- 关于富文本kindeditor中上传本地图片成功后获取到的图片路径是相对路径修改为绝对路径...
找到kindeditor插件kindeditor-all.js,找到urltype的设置, K.options = {designMode : true,fullscreenMode : false, ...
- thymeleaf 使用图片url或者上传本地图片
配置文件: # 声明图片的绝对路径和相对路径 file.upload.path=F://images/ file.upload.path.relative=/images/** 配置类: import ...
- MinIo 安装及其集成到java中上传下载图片信息
MinIo 安装及其集成到java中上传下载图片信息 win 下安装 下载链接:https://min.io/download#/windows 下载好后cmd打开控制台 输入:minio.exe s ...
- tinymce4.x 上传本地图片(自己写个插件)
tinymce是一款挺不错的html文本编辑器.但是添加图片是直接添加链接,不能直接选择本地图片. 下面我写了一个插件用于直接上传本地图片. 在tinymce的plugins目录下新建一个upload ...
- 富文本框TinyMCE4.8上传本地图片基本配置(前端篇)
最近使用了一下TinyMCE富文本框,感觉是非常不错的一款,配置简单,界面优美,完全免费...推荐大家使用. 官方文档也比较容易阅读,大家有兴趣的可以自己去看看https://www.tiny.clo ...
- 解决MarkDown上传本地图片无法显示
解决MarkDown上传本地图片无法显示 前言 提示:什么牛头马面写的代码,今天写个技术博客想插入一张图片发现无法显示,接着按流程在博客一顿找,发现我开头第一句,不知道怎么形容垃圾场里面找垃圾的心情. ...
- 有道云笔记markdown上传本地图片的方法
有道云笔记markdown上传本地图片的方法 有道云笔记markdown模式非会员发现不能直接截屏粘贴图片了.后来网上搜集了下方法,发现了好几种解决办法. 当然,如果你一年,不差那两百块钱,直 ...
- JAVA上传文件图片到服务器保存
这里我记录一个比较简单方便操作的JAVA上传文件图片到服务器并且保存! 首先是页面 html的 我这是提交一个文件和类型 <div style="border: 1px solid ...
- kindeditor上传本地图片的问题
终于给我发现kindeditor上传本地图片时,为什么出现服务器错误 原来demo.jsp里的: KE.show({ id : 'content1', imageUploadJson : '../.. ...
最新文章
- JAV A获取项目路径
- 超牛逼的异步协程爬虫
- OceanBase开源,11张图带你了解分布式数据库的核心知识
- Sybase用户登录以后的自动运行脚本
- jsp页面路径问题(404)
- 珍爱生命,远离大厂政治斗争
- Linux安装SonarQube和sonar-scanner详细安装及配置
- fastxml 大于符号不转换_JQuery框架及Ajax技术练习
- ArrayDeque 双端队列
- S32K116使用记录
- 使用mapReduce分析简单天气数据
- 一个exfat U盘引起的systen crash
- 织梦首页header实现会员的登录及会员状态显示
- C++算法之化繁为简的分治法
- 2020中国公关公司30强排行榜(记录)
- 无涯教程: Laravel 8 - Excel和CSV介绍
- 不安装DBC2000安装架设传奇服务端的方法
- python把中文文档变为拼音
- Druid连接池的实用配置详解
- 四旋翼无人机学习第4节--STM32、MPU9250等器件的绘制