前端Ajax上传文件并发送请求

js

 //上传图片function uplodeFile() {var file=$('#Agreement_file')[0].files[0];console.log(file);var form = new FormData();form.append('img',file);$.ajax({type: 'POST',url: '/hotel/uplodeImg',data: form,processData: false, //告诉jquery要传输data对象contentType: false,   //告诉jquery不需要增加请求头对于contentType的设置success: function (data) {console.log(data);var imageURL=data.data;$('#pImg').attr('src',imageURL);}})}// 选择文件$(document).ready(function(data){$("#btn_choose_file").click(function(){$("#Agreement_file").trigger("click");});});

jsp

<div class="box-tools text-center"><img id="pImg" class="uplodeimg" src="" height="180px"><input id="Agreement_file" type="file" style="display:none" onchange="uplodeFile();" /><button id="btn_choose_file" type="button" class="btn bg-uplode">点击上传</button>
</div>

后端SpringBoot文件静态映射，存储并返回文件路径

controller

@RequestMapping("/uplodeImg")public Object uplodeImg(MultipartFile img){String uplodeImg = iHotelService.uplodeImg(img);return Result.init(200, "success", uplodeImg);}

service

    @Value("${file.rootPath}")String ROOT_PATH;//图片存放根目录下的子目录@Value("${file.sonPath}")String SON_PATH;//访问域名@Value("${file.localPath}")String localPath;@Overridepublic String uplodeImg(MultipartFile file) {if (file.isEmpty()) {throw new NullPointerException("文件为空");}// 设置文件上传后的路径String filePath = ROOT_PATH + SON_PATH;// 获取文件名后缀名String suffix = file.getOriginalFilename();String prefix = suffix.substring(suffix.lastIndexOf(".")+1);//为防止文件重名被覆盖，文件名取名为：当前日期 + 1-1000内随机数String fileName = UUID.randomUUID()+ "." +  prefix;//创建文件路径System.out.println("fileName: "+fileName);File dest = new File(filePath + fileName);// 检测是否存在目录if (!dest.getParentFile().exists()) {//假如文件不存在即重新创建新的文件已防止异常发生dest.getParentFile().mkdirs();}try {//transferTo（dest）方法将上传文件写到服务器上指定的文件file.transferTo(dest);//生成静态文件访问路径String filePathNew = localPath + fileName;System.out.println(filePathNew);return filePathNew;} catch (Exception e) {return dest.toString();}}

application.yml

file:rootPath: "E:"sonPath: "/takeout/img/"localPath: "http://localhost:8080/file/img/

配置静态文件映射

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {public void addResourceHandlers(ResourceHandlerRegistry registry) {String path = "E:\\takeout\\";//映射的本地路径registry.addResourceHandler("/file/**").addResourceLocations("file:" + path);}}

Ajax上传文件，后端返回文件访问路径相关推荐

SpringBoot+El-upload实现上传文件到通用上传接口并返回文件全路径(若依前后端分离版源码分析)
场景 SpringBoot+ElementUI实现通用文件下载请求(全流程图文详细教程): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/deta ...
Ajax 文件上传(前后端完整代码，注意修改文件保存路径\访问路径)
一.前端代码: ① html 代码: 注意:如需要选择多个文件,进行上传,Ⅰ.multiple="multiple" 不能省 Ⅱ.选择时是 Ctrl + 你所要选择的文件,不要分多 ...
ajax传图片以及后台接收,前端ajax上传文件，图片，后端nodejs接收文件；
前端ajax上传文件,图片,后端nodejs接收文件: 学习了nodejs,就想实现一下有进度条的文件上传,html 在作这个功能的时候遇到的问题前端用普通的ajax没法实现文件上传,只能post, ...
阿里云OSS对象存储实现文件的上传，并返回访问路径
话不多说,直接上干货官方文档:https://help.aliyun.com/product/31815.html?spm=a2c4g.11186623.6.540.539d28bca7ZyUR 1 ...
上传html 0字节,HTML ajax 上传文件限制文件的类型和文件大小
html js function getFileType(filePath){ //获取文件的后缀名 var startIndex = filePath.lastIndexOf(".&quo ...
ajax上传文件表单，图片、文件无刷新上传,jquery.form.js的使用
我们在进行一些web开发时,有时会需要上传文件,图片等等的功能.这篇文章记录一下我实现用ajax实现无刷新上传图片的方法. 我们先要了解一下ajax,在前后端分离的开发环境中ajax被广泛的用原来前后 ...
struts2 ajax上传文件 file空_WordPress插件漏洞分析：WPDiscuz任意文件上传漏洞
写在前面的话就在不久之前,Wordfence的威胁情报团队在一款名叫wpDiscuz的Wordpress评论插件中发现了一个高危漏洞,而这款插件目前已有超过80000个网站在使用了.这个漏洞将允许未 ...
springboot使用ajax上传文件
SpringBoot使用Ajax上传文件接上一个上传文件操作上次使用的是from表单进行提交这次我们使用ajax进行提交地址在这儿:springboot上传文件上次controller层已经 ...
前端通过ajax上传文件到七牛云
1. 从服务端获取七牛云上传的token,生成token参考官方文档https://developer.qiniu.com/kodo/1208/upload-token 2. 在七牛云文档查找上传的存 ...

Ajax上传文件，后端返回文件访问路径

前端Ajax上传文件并发送请求

js

jsp

后端SpringBoot文件静态映射，存储并返回文件路径

controller

service

application.yml

配置静态文件映射

Ajax上传文件，后端返回文件访问路径相关推荐

最新文章

热门文章