java 上传图片，图片预览，2种方法

1. 方法一：将图片上传到特定磁盘

html页面，form表单内容：

<div class="layui-form-item"><label class="layui-form-label">头像</label><div class="layui-input-inline"><input th:if="${bean!=null}" type="text" id="imagePath" name="photo" th:value="${bean.photo}" lay-verify="required" placeholder="请上传图片" autocomplete="off" class="layui-input dragImg" ></div><button style="float: left;" type="button" class="layui-btn dragImg" id="layuiadmin-upload-useradmin">上传图片</button>
</div>
<div th:if="${bean==null}" class="layui-form-item" style="display: none" id="demo2"><div class="layui-inline"><label class="layui-form-label">预览效果：</label><img class="layui-upload-img" id="image" style="width: 9em;height: 9em"></div>
</div>
<div class="layui-form-item layui-hide"><input type="button" lay-submit lay-filter="LAY-user-back-submit" id="LAY-user-back-submit" value="确认">
</div>

layui -js代码：

layui.use(['index', 'form', 'user'], function(){var $ = layui.$,form = layui.form,upload = layui.upload ;// 上传头像upload.render({elem: '.dragImg'  // 拖拽上传,url: "/user/uploadPhoto",accept: 'images',method: 'post',acceptMime: 'image/*'  // 图片类型// ,ext: 'jpg|png|gif|bmp|jpeg', before: function (obj) {//预读本地文件示例，不支持ie8obj.preview(function (index, file, result) {$('#image').attr('src', result); //图片链接（base64）$('#demo2').show();});},done: function(res){if(res.code==200){let src = res.src;  //把图片路径返回过来$("#image").attr("src",src);  //图片在预览上显示$("#imagePath").attr("value",src); //给图片路径隐藏域赋值}// $(this.item).prev("div").children("input").val(res.src)}});
})

表单提交：

,yes: function(index, layero){var iframeWindow = window['layui-layer-iframe'+ index],submitID = 'LAY-user-back-submit',submit = layero.find('iframe').contents().find('#'+ submitID);//监听提交iframeWindow.layui.form.on('submit('+ submitID +')', function(data){var field = data.field; //获取提交的字段console.log(field.isUse)//data.field里面的值为form要提交的数据$.post("/user/admin/adminAdd",field,function(result){if(result.code == 200){layer.alert(result.msg,{icon:1,time: 1000});//提交 Ajax 成功后，静态更新表格中的数据table.reload('LAY-user-back-manage'); //数据刷新layer.close(index); //关闭弹层}else{layer.alert(result.msg,{icon:2,time: 1000});}},"json");});submit.trigger('click');
}

control业务层：

/*** 上传头像*/
@Value("${file.uploadPath}")
private String basepath;@RequestMapping(value = "/uploadPhoto", method = {RequestMethod.POST, RequestMethod.GET}, produces = "application/json;charset=utf-8")
@ResponseBody
public Map<String, Object> uploadPhoto(@RequestParam("file") MultipartFile file, HttpServletRequest request) throws Exception {Map<String, Object> map = new HashMap<String, Object>();String uploadPath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/images/";// UploadUtil是一个工具类，返回的是图片的存储路径String imagePath = UploadUtil.upload(file, basepath, uploadPath);System.out.println(imagePath);if (imagePath != null) {map.put("code", 200);map.put("msg", "上传成功");map.put("src", imagePath);} else {map.put("code", 400);map.put("msg", "上传失败");}return map;
}

添加UploadUtil工具类：

public class UploadUtil {/**** @param file* @param basepath 定义一个上传文件的路径* @param savepath 定义文件服务器的访问地址 images 目录要一致* @return*/public static String upload(MultipartFile file,String basepath,String savepath){//获得上传文件的名称String filename = file.getOriginalFilename();//创建UUID，用来保持文件名字的唯一性String uuid = UUID.randomUUID().toString().replace("-","");//进行文件名称的拼接String newFileName = uuid+filename;//创建文件实例对象File uploadFile = new File(basepath,newFileName);// 判断路径是否存在,没有创建if (!uploadFile.getParentFile().exists()) {uploadFile.getParentFile().mkdirs();}//执行文件上传的命令try {//图片存进目录下去file.transferTo(uploadFile);} catch (IOException e) {return null;}//将上传的文件名称返回，注意，这里我们返回一个 服务器地址return savepath+newFileName;}
}

control业务层中的变量

#上传图片路径
file:uploadPath: F:\\study\\javaNews\\src\\main\\resources\\static\\images\\

配置类 WebMvcConfg 定义静态资源映射目录

@Configuration
public class WebMvcConfg implements WebMvcConfigurer {/*** addPathPatterns  要拦截的路径* excludePathPatterns  不拦截的路径*/@Overridepublic void addInterceptors(InterceptorRegistry registry) {registry.addInterceptor(new AdminLoginInterceptor()).addPathPatterns("/user/**").excludePathPatterns("/user/login").excludePathPatterns("/user/logout").excludePathPatterns("/user/password").excludePathPatterns("/user/config/info");}/*** 静态资源（自定义静态资源映射目录）* @param registry*/@Value("${file.uploadPath}")private String basepath;public void addResourceHandlers(ResourceHandlerRegistry registry) {// 前端浏览器访问路径带有/file/**就转到对应磁盘下读取图片【3种方法】// registry.addResourceHandler("/images/**").addResourceLocations("file:F:/study/javaNews/src/main/resources/static/images/");// registry.addResourceHandler("/images/**").addResourceLocations("file:"+basepath);registry.addResourceHandler("/images/**").addResourceLocations("file:"+System.getProperty("user.dir")+"/src/main/resources/static/images/");//将所有/static/** 访问都映射到classpath:/static/ 目录下registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");}
}

2. 方法二：将图片上传到七牛云网站

html页面，form表单内容：

<div class="layui-form-item"><label class="layui-form-label">照片：</label><div class="layui-input-block"><input type="text" name="img" placeholder="请上传照片" lay-verify="required" readonlyid="img" autocomplete="off" class="layui-input" th:value="${bean.img}"></div>
</div>
<div class="layui-form-item" id="demo2"><div class="layui-inline"><label class="layui-form-label">预览效果：</label><img class="layui-upload-img" id="demo1" th:src="${bean.img}" style="width: 9em;height: 9em"></div>
</div>

layui -js代码：

//拖拽上传，普通图片上传
var uploadInst = upload.render({elem: '#img', url: '/uploadMulit?type=goods', before: function (obj) {//预读本地文件示例，不支持ie8obj.preview(function (index, file, result) {$('#demo1').attr('src', result); //图片链接（base64）$('#demo2').show();});}, done: function (res) {//如果上传失败if (res.code != 200) {return layer.msg('上传失败');} else {$('#img').val(res.data);return layer.msg('上传成功');}}, error: function () {}
});

表单提交：

//监听表单提交提交
form.on('submit(submit)', function (data) {$.post("/admin/student/edit", data.field, function (res) {if (res.code == 200) {layer.msg(res.msg, {offset: 't',icon: 1, time: 1500}, function () {location.href = res.data;})} else {layer.msg(res.msg, {offset: 't',icon: 2, time: 1500});}});return false;
});

control业务层：

@ResponseBody
@RequestMapping(value = "/uploadMulit", method = RequestMethod.POST)
public ResultMsg uploadImg(MultipartFile file) throws IOException {if (file.isEmpty()) {return ResultMsg.build(400, "文件为空，请重新上传");}byte[] bytes = file.getBytes();String imageName = UUID.randomUUID().toString();try {//使用base64方式上传到七牛云String url = QiniuCloudUtil.put64image(bytes, imageName);System.out.println(url);return ResultMsg.build(200, "文件上传成功", url);} catch (Exception e) {e.printStackTrace();return ResultMsg.build(500, "文件上传发生异常！");}
}

添加 QiniuCloudUtil 工具类：

public class QiniuCloudUtil {// 设置需要操作的账号的AK和SKprivate static final String ACCESS_KEY = "填你自己的";private static final String SECRET_KEY = "填你自己的";// 设置需要上传图片网址private static final String DOMAIN = "http://upload.test.vip";// 要上传的空间private static final String bucketname = "test01";// 密钥private static final Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY);private static final String style = "你的样式";public static String getUpToken() {return auth.uploadToken(bucketname, null, 3600, new StringMap().put("insertOnly", 1));}//base64方式上传public static String put64image(byte[] base64, String key) throws Exception{String file64 = Base64.encodeToString(base64, 0);Integer len = base64.length;//华北空间使用 upload-z1.qiniu.com，华南空间使用 upload-z2.qiniu.com，北美空间使用 upload-na0.qiniu.comString url = "http://upload-z2.qiniu.com/putb64/" + len + "/key/"+ UrlSafeBase64.encodeToString(key)RequestBody rb = RequestBody.create(null, file64);Request request = new Request.Builder().url(url).addHeader("Content-Type", "application/octet-stream").addHeader("Authorization", "UpToken " + getUpToken()).post(rb).build();//System.out.println(request.headers());OkHttpClient client = new OkHttpClient();okhttp3.Response response = client.newCall(request).execute();//如果不需要添加图片样式，使用以下方式return  DOMAIN+"/"+key;//return DOMAIN + key + "?" + style;}// 普通删除(暂未使用以下方法，未体测)public static void delete(String key) throws IOException {// 实例化一个BucketManager对象BucketManager bucketManager = new BucketManager(auth);// 此处的33是去掉：http://ongsua0j7.bkt.clouddn.com/,剩下的key就是图片在七牛云的名称key = key.substring(33);try {// 调用delete方法移动文件bucketManager.delete(bucketname, key);} catch (QiniuException e) {// 捕获异常信息Response r = e.response;System.out.println(r.toString());}}class Ret {public long fsize;public String key;public String hash;public int width;public int height;}
}

control业务层中的变量

#  七牛云上传
qiniu:AccessKey: 填你自己的SecretKey: 填你自己的Bucket: lxsxcdn:prefix: http://q06ek3ls8.bkt.clouddn.com
#  上传文件的路径
basePath:E:\Video\course

本文为原创作品，转载请注明出处

java 上传图片，图片预览，2种方法相关推荐

uni-app 轮播图视频+图片视频图片全屏预览两种方法
项目场景: 在做商城项目的时候,商品详情的轮播图需要同时显示视频和图片,并且能够全局预览解决方案: 如果项目里有uview这个组件库,可以通过swiper轮播图的指定类型进行解决,点击这里进行跳转 ...
2016/4/19 ①单个文件上传 ②上传图片后预览图片
1,f1.php <!DOCTYPE html> <htmllang="en"> <head><metacharset="UTF ...
java 图片压缩100k_Java 实现图片压缩的两种方法
问题背景. 典型的情景:Nemo社区中,用户上传的图片免不了要在某处给用户做展示. 如用户上传的头像,那么其他用户在浏览该用户信息的时候,就会需要回显头像信息了. 用户上传的原图可能由于清晰度较高而体 ...
python与html交互实现图片上传_python 实现上传图片并预览的3种方法(推荐)
在常见的用户注册页面,需要用户在本地选择一张图片作为头像,并同时预览. 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是,直接在本地内 ...
java批量上传图片预览_SpringMVC批量上传图片，实现上传前图片预览
最近有个功能需要实现批量上传图片,然后实现图片预览,因为项目比较老,同时对界面和用户操作体验也要求不太高,就没去找网上的开源插件,直接写了个简单的功能,这里做个记录备份因为这个是实验性的小代码,就没 ...
java 预览图片_jquery实现图片预览的方法
//jquery实现图片预览的方法实例 function viewimg(index) { var name = 'uploadimg' + index; var imgup = $(name); v ...
firefox js服务器上怎么显示图片的绝对路径,js兼容火狐显示上传图片预览效果的方法...
本文实例讲述了js兼容火狐显示上传图片预览效果的方法.分享给大家供大家参考.具体实现方法如下: Image preview example div {width:100px;height:100px; ...
简单的实现图片预览, 通过原生ajax以及 jQuery两种方法实现图片预览,有更好的办法可以留言喔...................
1.原生写ajax实现图片预览: 结构: <input type="file"> <img src="" alt="&q ...
input file本地图片预览的方法（兼容IE、Chrome和Firefox）
JS兼容各个浏览器的本地图片上传即时预览效果 2014-02-26 我来说两句收藏我要投稿很早以前在杭州银行工作曾经碰到这么一个需求,当时也是纠结了很久,也是go ...

java 上传图片，图片预览，2种方法

java 上传图片，图片预览，2种方法

1. 方法一：将图片上传到特定磁盘

2. 方法二：将图片上传到七牛云网站

java 上传图片，图片预览，2种方法相关推荐

最新文章

热门文章