当前位置： 首页 > news >正文

ajax上传图片存入到指定的文件夹并回显

news 2026/5/18 4:03:15

 html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-2.1.0.js"></script>
</head>
<body>
<form id="files"><input type="file" name="file"><input type="button" id="tijiao" value="提交"><input type="button" value="删除"><br><img src="" width="1000px" height="500px">
</form>
<script>$(function (){$("#tijiao").click(function () {alert('提交成功');var formData = new FormData($('#files')[0]);$.ajax({url:'shangchuan',type:'post',data: formData,//需要提交的数据，传入实例化的formdata对象，，此对象包含了要上传的文件processData: false,contentType:false,});})var fd =  new FormData(document.getElementsByTagName("form")[0]);var photo = document.querySelector("input");var img = document.querySelector("img");photo.onchange = function (){img.src = window.URL.createObjectURL(this.files[0]);}})</script>
</body>
</html>

controller：

package com.example.uploadanimage.controller;import org.apache.commons.lang3.time.DateUtils;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;@RestController
public class Upload {@PostMapping("/shangchuan")public String shangchuan(MultipartFile file) throws Exception {String originalFilename = file.getOriginalFilename();System.out.println(originalFilename);File file1 = new File("D:\\img",originalFilename);file.transferTo(file1);return "上传成功";}
}

html页面：

页面回显效果图：

提交：

 提交完成存入文件夹：

 

相关文章：

ajax上传图片存入到指定的文件夹并回显

html代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><script src"js/jquery-2.1.0.js"></script> </head> <body> <form…...

编程日记 2023/4/13 10:27:03

cesium加载cesiumlab切的影像切片和标准TMS瓦片的区别

1.加载cesiumlab切的影像 var labImg viewer.scene.imageryLayers.addImageryProvider( new Cesium.UrlTemplateImageryProvider({url:http://192.168.1.25:8080/DOMtms/{z}/{x}/{y}.png,fileExtension : "png"})); 2.标准TMS瓦片 var labImg viewer.scene.im…...

编程日记 2023/4/13 10:22:02

第二周P9-P22

文章目录第三章 系统总线3.1、总线的基本概念一、为什么要用总线二、什么是总线三、总线上信息的传送四、总线结构的计算机举例1、单总线结构框图2、面向CPU的双总线结构框图3、以存储器为中心的双总线结构图3.2、总线的分类1、片内总线2、系统总线3、通信走线3.3、总线特性及性…...

编程日记 2023/4/13 10:17:01

java反射

文章目录何为反射&#xff1f;反射的应用场景了解么&#xff1f;谈谈反射机制的优缺点优点缺点反射实战获取 Class 对象的四种方式1. 知道具体类的情况下可以使用TargetObject.class&#xff1a;2. 通过 Class.forName()传入类的全路径获取&#xff1a;3. 通过对象实例instance…...

编程日记 2023/4/13 10:11:59

307 Temporary Redirect 解决办法（临时重定向）

背景&#xff1a;java后台服务请求python服务端 java服务报错&#xff1a;Unexpected response status&#xff1a;307 python服务端报错&#xff1a;307 Temporary Redirect 解决&#xff1a;查了好久找不到什么原因&#xff0c;请求路径问题 请求url&#xff1a;http//:w…...

编程日记 2023/4/13 10:06:58

SpringBoot案例

SpringBoot案例5&#xff0c;案例5.1 创建工程5.2 代码拷贝5.3 配置文件5.4 静态资源目标 基于SpringBoot的完成SSM整合项目开发 5&#xff0c;案例 SpringBoot 到这就已经学习完毕&#xff0c;接下来我们将学习 SSM 时做的三大框架整合的案例用 SpringBoot 来实现一下。我们完…...

编程日记 2023/4/13 10:01:57

Android 10.0 系统framework发送悬浮通知的流程分析

1.前言 在android10.0rom定制化开发中,在原生系统的systemui中，状态栏通知，和闹钟，wifi等悬浮通知也是很重要的， 悬浮通知也是系统通知的一种，也是在frameworks中发送出来的通知，接下来就分析下10.0中的悬浮通知的发送 流程，然后就可以实现自己自定义悬浮通知的相关功…...

编程日记 2023/4/13 9:56:56

傅里叶谱方法-傅里叶谱方法求解二维浅水方程组和二维粘性 Burgers 方程及其Matlab程序实现

3.3.2 二维浅水方程组 二维浅水方程组是描述水波运动的基本方程之一。它主要用于描述近岸浅水区域内的波浪、潮汐等水动力学现象。这个方程组由两个偏微分方程组成&#xff0c;一个是质量守恒方程&#xff0c;另一个是动量守恒方程。浅水方程描述了具有自由表面、密度均匀、深…...

编程日记 2023/4/13 9:51:55

算法训练营 - 广度优先BFS

目录 从层序遍历开始 N 叉树的层序遍历 经典BFS最短路模板 经典C queue 数组模拟队列 打印路径 示例1.bfs查找所有连接方块 Cqueue版 数组模拟队列 示例2.从多个位置同时开始BFS 示例3.抽象最短路类&#xff08;作图关键&#xff09; 示例4.跨过障碍的最短路 从层序遍历…...

编程日记 2023/4/13 9:46:54

​​​​​​​判断两个字符串是否匹配（1个通配符代表一个字符）

目录 判断两个字符串是否匹配（1个通配符代表一个字符） 程序设计 程序分析...

编程日记 2023/4/13 9:41:53

用css画一个csdn程序猿

效果如下&#xff1a; 头部 我们先来拆解一下&#xff0c;程序猿的结构 两只耳朵和头是圆形组成的&#xff0c;耳朵内的红色部分也是圆形 先画头部&#xff0c;利用圆角实现头部形状 借助工具来快速实现圆角效果 https://9elements.github.io/fancy-border-radius/ <div…...

编程日记 2023/4/13 9:36:52

Java多线程编程—wait/notify机制

文章目录1. 不使用wait/notify机制通信的缺点2. 什么是wait/notify机制3. wait/notify机制原理4. wait/notify方法的基本用法5. 线程状态的切换6. interrupt()遇到方法wait()7. notify/notifyAll方法8. wait(long)介绍9. 生产者/消费者模式10. 管道机制11. 利用wait/notify实现…...

编程日记 2023/4/13 9:31:51

Three.js教程：旋转动画、requestAnimationFrame周期性渲染

推荐&#xff1a;将NSDT场景编辑器加入你3D工具链其他工具系列&#xff1a;NSDT简石数字孪生基于WebGL技术开发在线游戏、商品展示、室内漫游往往都会涉及到动画&#xff0c;初步了解three.js可以做什么&#xff0c;深入讲解three.js动画之前&#xff0c;本节课先制作一个简单的…...

编程日记 2023/4/13 9:26:50

租车自驾app开发有什么作用?租车便利出行APP开发

在线租车APP有哪些优势&#xff0c;租车APP开发的基本功能&#xff0c;租车自驾app开发有什么作用?租车便利出行APP开发&#xff0c;租车服务平台小程序有哪些功能&#xff0c;租车软件开发需要多少钱&#xff0c;租车app都有哪些&#xff0c;租车平台定制开发&#xff0c;租车…...

编程日记 2023/4/13 9:21:48

linux shell 文件分割

split 按照 10m 大小进行分割 split -b 10m large_file.bin new_file_prefix...

编程日记 2023/4/13 9:16:46

智慧农业系统开发功能有哪些？

农业从古至今都是备受关注的话题&#xff0c;新时代背景下农业发展已经融合了互联网&#xff0c;数字化技术等新型发展方式&#xff0c;形成了农业物联网管控系统&#xff0c;让农业生产更加科技化、智能化、高效化&#xff0c;对农业可持续发展有巨大的推动作用。所以&#xf…...

编程日记 2023/4/13 9:11:45

【C语言】 指针的进阶 看这一篇就够了

目录 1.字符指针 2.数组指针 3.指针数组 4.数组传参和指针传参 5.函数指针 6.函数指针数组 7.指向函数指针数组的指针 8.回调函数 9.qsort排序和冒泡排序 1.字符指针 让我们一起来回顾一下指针的概念&#xff01; 1.指针就是一个变量&#xff0c;用来存放地址&#xff0c;地址…...

编程日记 2023/4/13 9:06:44

redis set list

Listlist: 插入命令&#xff1a;lpush / rpush 查看list列表所有数据(-1 表示最后一个)&#xff1a;lrange key 0 -1 查看列表长度(key 不存在则长度返回0 ): llen key list长度 获取下表 为 0 的元素 修改下标为0的元素&#xff0c;改为haha 移除列表的第一个元素 或最后一…...

编程日记 2023/4/13 9:01:43

如何解决DNS劫持

随着互联网的不断发展&#xff0c;DNS(域名系统)成为了构建网络基础的重要组成部分。而DNS遭到劫持&#xff0c;成为一种常见的安全问题。那么DNS遭到劫持是什么意思呢?如何解决DNS劫持问题呢?下面就让小编来为您一一解答。 DNS遭到劫持是什么意思? DNS遭到劫持指的是黑客通…...

编程日记 2023/4/13 8:56:41

【LeetCode】剑指 Offer（28）

目录 题目&#xff1a;剑指 Offer 54. 二叉搜索树的第k大节点 - 力扣&#xff08;Leetcode&#xff09; 题目的接口&#xff1a; 解题思路&#xff1a; 代码&#xff1a; 过啦&#xff01;&#xff01;&#xff01; 题目&#xff1a;剑指 Offer 55 - I. 二叉树的深度 - 力…...

编程日记 2023/4/13 8:51:41

STM32F407通过SPI接口高效读写SD卡：CubeMX配置与底层驱动实战

1. SD卡基础与SPI通信原理 SD卡作为嵌入式系统中最常用的存储介质之一&#xff0c;其SPI模式因其接线简单、协议清晰而广受欢迎。先说说我实际项目中遇到的坑&#xff1a;曾经因为没理解清楚SPI模式下SD卡的初始化时序&#xff0c;导致整整两天卡在设备无法识别的困境里。 SD卡…...

编程新知 2026/5/17 10:12:10

GARbro：跨平台视觉小说游戏资源解析与提取工具

GARbro&#xff1a;跨平台视觉小说游戏资源解析与提取工具 【免费下载链接】GARbro Visual Novels resource browser 项目地址: https://gitcode.com/gh_mirrors/ga/GARbro GARbro是一款专门用于解析和提取视觉小说游戏资源文件的跨平台开源工具&#xff0c;支持数百种游…...

编程新知 2026/5/17 9:48:59

如何快速掌握openpilot：从零到精通的自动驾驶系统终极指南

如何快速掌握openpilot&#xff1a;从零到精通的自动驾驶系统终极指南 【免费下载链接】openpilot openpilot is an operating system for robotics. Currently, it upgrades the driver assistance system on 300 supported cars. 项目地址: https://gitcode.com/GitHub_Tre…...

编程新知 2026/5/17 9:26:55

Redis增强工具包：封装分布式锁、缓存模板与监控的最佳实践

1. 项目概述&#xff1a;一个Redis开发者的“瑞士军刀”在分布式系统和高并发场景下&#xff0c;Redis几乎成了标配。但用久了你会发现&#xff0c;官方客户端虽然稳定&#xff0c;但在日常开发、调试、运维中&#xff0c;总有些“不够顺手”的地方。比如&#xff0c;想批量按模…...

编程新知 2026/5/17 8:08:55

激光切割外壳设计全流程：从创客工具到产品级制造的实战指南

1. 项目概述&#xff1a;为什么选择激光切割来做外壳&#xff1f;如果你和我一样&#xff0c;捣鼓过不少电子项目&#xff0c;从简单的Arduino温湿度计到复杂的树莓派家庭服务器&#xff0c;那你一定为“给它们找个家”这件事头疼过。3D打印太慢&#xff0c;开模注塑成本又高得…...

编程新知 2026/5/17 7:42:10

React轻量级代码编辑器组件：基于Textarea的语法高亮方案

1. 项目概述&#xff1a;一个为React开发者量身打造的代码编辑器组件 如果你在React项目中需要嵌入一个代码编辑器&#xff0c;并且希望它轻量、美观、开箱即用&#xff0c;那么 uiwjs/react-textarea-code-editor 这个组件库很可能就是你一直在寻找的解决方案。它不是一个像…...

编程新知 2026/5/17 4:17:53

Linux压缩归档与备份文件管理

Linux压缩归档与备份文件管理在 Linux 运维工作中&#xff0c;压缩与归档几乎无处不在。日志备份、数据迁移、配置留档、故障现场保存&#xff0c;都会涉及文件打包和压缩。如果缺乏规范&#xff0c;备份文件很容易散落各处、命名混乱、占用失控&#xff0c;最终从保障手段变成…...

编程新知 2026/5/17 4:09:36

Adafruit Feather RP2040 SCORPIO：专为大规模NeoPixel灯光控制而生的开发板

1. 项目概述&#xff1a;为什么你需要一块专为大规模灯光控制而生的开发板&#xff1f;如果你曾经尝试过用一块普通的微控制器驱动超过几百个NeoPixel&#xff08;或WS2812&#xff09;LED&#xff0c;你很可能已经撞上了性能的天花板。CPU被时序生成任务完全占用&#xff0c;动…...

编程新知 2026/5/17 3:27:43

Cesium动态泛光效果实战：手把手教你用d3kit插件打造炫酷城市光效（附完整代码）

Cesium动态泛光效果实战&#xff1a;手把手教你用d3kit插件打造炫酷城市光效&#xff08;附完整代码&#xff09; 当夜幕降临&#xff0c;城市天际线被霓虹灯勾勒出流动的轮廓&#xff0c;这种视觉冲击力正是现代三维可视化项目的灵魂所在。本文将带你用d3kit这个轻量级插件&am…...

编程新知 2026/5/17 2:58:07

Cortex-A78C架构解析：AMU与ETM寄存器实战指南

1. Cortex-A78C核心架构与寄存器概览Cortex-A78C是Armv8-A架构的高性能实现&#xff0c;面向移动计算和边缘AI场景优化。作为A78系列的安全增强版本&#xff0c;它在保留原有3发射乱序执行流水线的基础上&#xff0c;新增了Pointer Authentication等安全扩展&#xff0c;同时强…...

编程新知 2026/5/17 2:27:59