使用jQuery的ajax提交图片信息

news2025/1/19 7:49:54
1 设置图片id(html)

首先,定义上传图片的id,根据上传文件的id获取图片信息:

 注:图片的id应该设置在input标签里面

 2 发送ajax请求(js)
var formData = new FormData();
formData.append("file", jQuery("#photo_input")[0].files[0]);
if(formData!=null){
  jQuery.ajax({
  url:"/user/photo",
  type:"POST",
  data:formData,
  contentType: false,
  processData: false,
  success:function(res){
      if(res.code==200&&res.data!=null){
         jQuery("#photo").attr("src",res.data);
      }
      else{
         alert("修改失败!"+res.data);
      }
 }
 });
}

参数说明:

  • type:获取文件,必须使用"POST";
  • processData:默认情况下为true,通过data选项传递进来的数据,如果是一个对象,都会出来转化成一个查询字符串,如果要发送不希望转换的信息,要设置为false;
  • contentType:默认值:“application/x-www-form-urlencoded”。发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递了一个 content-type 给 jQuery.ajax() 那么它必定会发送给服务器。
3 后端处理
  public AjaxResult photo(MultipartFile file, HttpServletRequest request){
        //从参数中获取用户
        Userinfo userinfo=SessionUtil.getUser(request);
        if(userinfo==null||userinfo.getUid()<=0){
            return AjaxResult.fail(-1,"请先登录");
        }
        //获取原来的文件名和后缀
        String originalFilename=file.getOriginalFilename();
        String ext = "."+ originalFilename.split("\\.")[1];
        //生成一个新的文件名(以防有重复的名字存在导致被覆盖)
        String uuid = UUID.randomUUID().toString().replace("-", "");
        String newName = uuid + ext;
        String path =imagepath+newName;//保存路径newName;
        try {
            file.transferTo(new File(path));
        } catch (IOException e) {
            e.printStackTrace();
        }
        String urlpath = "/image/"+newName;
        //将文件名更新到数据库中
        int result=userService.updatephoto(urlpath,userinfo.getUid());
        //将处理结果返回给前端
        return AjaxResult.succ(urlpath);
   }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/755004.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Hue编辑器命令执行

每一代人都有自己的命中注定的遗憾。遗憾&#xff0c;深深的遗憾。 唯一能自慰的是&#xff0c;我们曾真诚而充满激情地在这个世界上生活过&#xff0c;竭尽全力地劳动过&#xff0c; 并不计代价地将自己的血汗献给了不死的人类之树。 漏洞描述 Hue编辑器存在命令执行漏洞&am…

24种人格力量,好奇心的力量以及特征分析

人格力量是一种可支配的价值观&#xff0c;它能让人向往美好的远景&#xff0c;极大地促进人的工作发展。via认为好奇心是人格力量的种类之一。 借助via 24种人格力量测试&#xff0c;探索人格优势&#xff0c;可以帮助我们更好的发现自身的优势&#xff0c;发挥自己的潜能。从…

Sui x KuCoin Labs夏季黑客松第五批入围项目公布

经过40多天积极的报名以及精心的选拔&#xff0c;Sui x KuCoin Labs夏季黑客松现已完成对所有报名项目的筛选&#xff0c;最后一轮入围结果也在众人的期待中新鲜出炉。 了解入围项目的详细信息&#xff1a;https://hack.sui.io/demo-projects/入围项目的中文版介绍&#xff1a…

Java线程状态与状态转换

前言 在Java中&#xff0c;线程是多任务处理的基本单位&#xff0c;它可以并行执行多个任务。线程的状态描述了线程在其生命周期中的不同阶段。Java线程的状态可以分为以下几种&#xff1a; 线程状态 状态解释新建状态&#xff08;New&#xff09;线程被创建但尚未启动就绪状…

nginx配置IP白名单

1、添加IP白名单文件 在nginx目录的 conf 中添加文件 ip.conf&#xff0c;注意白名单文件不用添加任何注释&#xff0c;可以有空行 vi ip.conf 192.168.3.11 1;192.168.3.10 1; 192.168.0.112 1;2、配置nginx.conf 编辑http节点&#xff1a; http {# ...# geo IP whitelist…

一维二维水动力模拟、水质建模、复杂河网构建技术在环境影响评价、防洪评价与排污口论证等实际项目中的应用

目录 ​专题一、一维水动力模型模拟一河道水流的应用 专题二、一维复杂河网模型构建及建筑物设置 专题三、一维水质模型在环境影响评价中的应用 专题四、平面二维水动力模型的构建河验证 专题五、平面二维水动力模型在防洪影响评价中的应用 专题六、平面二维水动力水质模…

2023-07-13 Fitz完成PDF转TXT

Fitz完成PDF转TXT 前言 1、本机为Inspiron 5005&#xff0c;为64位&#xff0c;所用操作系统为Windos 10。所使用开发环境为Anaconda和jupyter notebook。 2、本教程主要实现了安装Anaconda和jupyter notebook&#xff0c;使用Fitz完成PDF转TXT。 Anaconda和Jupyter notebook简…

SpringCloud Alibaba——Nacos服务领域模型

目录 一、Nacos服务领域模型二、Nacos服务领域模型图解 一、Nacos服务领域模型 模型名称解释Namespace实现环境隔离&#xff0c;默认值publicGroup不同的service可以组成一个Group&#xff0c;默认值Default-GroupService服务名称Cluster对指定的微服务虚拟划分&#xff0c;默…

Scratch 多场景收集物品

Scratch 多场景收集物品 本程序开始运行时4种物品各复制10次并移动到随机位置&#xff0c;交通工具角色跟随鼠标&#xff0c;碰到上述4种物品后删除物品&#xff0c;物品清空后切换到下一个背景、更换交通工具角色并重新生成4种物品。交通工具角色的切换通过判断背景变量的值来…

ubuntu在arm平台下编译安装Qt5.15.2和PySide2(亲测可用)

一、安装Qt5.15.2 1.下载源码首先在官网下载Qt5.15.2的源码&#xff1a;https://download.qt.io/archive/qt/5.15/5.15.2/single/ 2.先安装编译qt的环境 sudo apt-get update sudo apt-get install build-essential sudo apt-get install libgl1-mesa-dev sudo apt-get inst…

【推荐】高效办公利器——高效工具来袭!

下载链接 https://zh.snipaste.com/download.html 软件介绍 Snipaste 是一个简单但强大的截图工具&#xff0c; 直接按 F1 截图 F3 贴图在屏幕&#xff0c;工具蓝中提供了很多功能&#xff1a;框选标记、折线、画笔、记号笔、马赛克、文本标注、橡皮擦、撤销、退出、截图定在…

Python爬虫——urllib_ajax的get请求爬取豆瓣电影前十页

ajax&#xff1a; 就是一段js代码&#xff0c;通过这段代码&#xff0c;可以让页面发送异步的请求&#xff0c;或者向服务器发送一个东西&#xff0c;即和服务器进行交互 对于ajax&#xff1a; 一定会有 url&#xff0c;请求方法(get, post)&#xff0c;可能有数据一般使用 j…

【C++】STL——vector的简单介绍、vector的定义、vector的构造函数声明、vector iterator的使用

文章目录 1.vector的含义2.vector的使用2.1vector构造函数声明&#xff08;1&#xff09;vector()&#xff08;2&#xff09;vector(size_type n, const value_type& val value_type())&#xff08;3&#xff09;vector(const vector& x) &#xff08;4&#xff09;ve…

20230714----重返学习-DOM-diff算法-构建工具-包管理工具-Vite基本使用-Vue3新特性

day-112-one-hundred-and-twelve-20230714-DOM-diff算法-构建工具-包管理工具-Vite基本使用-Vue3新特性 DOM-diff算法 vue2中diff算法 同级比对&#xff0c;跨级比对性能差。而且采用的方式是递归比对&#xff0c;更差一点。根节点只能有一个&#xff0c;比对的时候会从根节…

Android 多边形导圆角(Path画折线导圆角)

前言&#xff1a;用path画折线&#xff0c;2条线相交处导圆角 简介&#xff1a;为开发者提供工具类&#xff0c;方便对使用path画折线设置圆角。使用path画多边形&#xff0c;如三角形、矩形、平行四边形等&#xff0c;同时设置圆角。另外提供计算直线上某点坐标。 实现原理 …

Matplotlib下载和安装

Matplotlib 是 Python 的第三方绘图库&#xff0c;它非常类似于 MATLAB。在使用 Matplotlib 软件包之前&#xff0c;需要对其进行安装。本节以 Windows10 系统为例&#xff0c;介绍 Matplotlib 的几种安装方式。 MATLAB 是一款商业软件&#xff0c;主要用于数据分析、图像处理…

http协议(二)

欢迎来到南方有乔木的博客&#xff01;&#xff01;&#xff01; 博主主页&#xff1a;点击点击&#xff01;戳一戳&#xff01;&#xff01; 博主名:南方有乔木呀 博主简介&#xff1a; 一名在校大学生&#xff0c;正在努力学习Java语言编程。穷且意坚&#xff0c;不坠青云…

Java常规写法与新特性对比详解

Java常规写法与新特性对比详解 ✨1. Lambda表达式对比常规写法&#xff1a;⭐️1.1 迭代集合&#xff1a;⭐️1.2 条件过滤&#xff1a;⭐️1.3 映射转换&#xff1a; ✨2. Stream API对比常规写法&#xff1a;⭐️2.1 过滤和计数&#xff1a;⭐️2.2 排序&#xff1a;⭐️2.3 …

通过 Postman+Newman+Jenkins 进行接口自动化测试和进一步实现 CI

目录 前言&#xff1a; Postman 部分 Collection 或者说测试集的建立 Postman 使用详解 测试工具 mock server Newman 的安装和使用 newman 的使用 对 SSL 的支持 newman 第三版以后&#xff08;目前已经是 4.3.1&#xff09;可以支持通过 CLI 选项来支持 SSL 对 new…

Python 使用 Stable Diffusion API 生成图片示例

代码&#xff1a; import base64 import datetime import json import osimport requestsdef submit_post(url: str, data: dict):"""Submit a POST request to the given URL with the given data.:param url: url:param data: data:return: response"…