一、上传图片

（1）jsp中：

<form id="fm">支出项目：<select name="type"><option value="1">车费</option><option value="2">饭费</option></select><!-- 必须得file类型 -->上传图片：<input type="file" id="fileName" name="fileName"><br><input type="button" value="提交" onclick="submitFun()">
</form>

<script type="text/javascript">function submitFun(){<!-- 通过formData获取表单内的键值对 -->var formData = new FormData(document.getElementById("fm"));<!-- 如果想往formData中自定义值，也可以这样 --><!-- formFile.append("user", "sddr"); --><!-- 通过ajax提交数据 -->$.ajax({url:"${ctx}/sddr/add",type:'post',dataType:'json',contentType: false,processData: false,data:formData,success:function(result){if(result.code != '200'){layer.msg(result.msg);return;}parent.location.href = "${ctx}/sddr/toShow";}});}
</script>

（2）java后端接收

@RequestMapping("add")
public void add(Integer type, MultipartFile fileName) throws Exception {//type可直接获取到System.out.println(type);//文件保存 这里的fileName1是后台保存的图片名(UUID)String fileName1 = FileUtils.upLoad(fileName, "D:/sddr/");
}

注：FIleUtils工具类中的upload方法：

public static String upLoad(MultipartFile fileName, String filePath) throws Exception {if (null != fileName && !fileName.isEmpty()) {// 存入的文件名要唯一String fileNameUUID = UUID.randomUUID().toString().replace("-", "");String fileSuffix = fileName.getOriginalFilename().substring(fileName.getOriginalFilename().lastIndexOf("."));// 文件夹不存在时创建String mir = filePath;File file = new File(mir);if (!file.exists()) {file.mkdirs();}// 把页面的图片复制到服务器fileName.transferTo(new File(mir + fileNameUUID + fileSuffix));return fileNameUUID + fileSuffix;}return null;
}

二、下载（展示）图片

（1）jsp里：

<img alt="" src="${ctx}/sddr/download?fileName=${imageName}" width="70px"/>

上面这是展示，如果新建一个<input>标签把type改为按钮，value写成上面src中的值，就是下载了。

（2）java后端

@RequestMapping("download")
public void download(String fileName, HttpServletResponse response) throws Exception {FileUtils.downLoad(response, fileName, "D:/sddr/");
}

注：FIleUtils工具类中的download方法：

public static void downLoad(HttpServletResponse response, String fileName, String filePath) throws Exception {if(!StringUtils.isEmpty(fileName) && !"null".equals(fileName)) {FileInputStream in = new FileInputStream(new File(filePath + fileName));OutputStream out = response.getOutputStream();IOUtils.copy(in, out);}
}

ajax上传图片、下载图片相关推荐

使用AFN上传图片下载图片
一.上传图片二.下载图片一.上传图片 AFN 上传文件使用到了AFHTTPSessionManager 准备一张图片转化为NSData 设置一个目录路径 path 把data 写入到路径里面使 ...
利用 ajax 上传图片删除图片 (Spring Boot)
效果如下: 1.启动类中加入 SpringBoot重写addResourceHandlers映射文件路径 @Overridepublic void addResourceHandlers(Resour ...
C#也能PS图片，还能为网站Ajax上传图片同时生成微缩图(附Demo)
C#也能PS图片,还能为网站Ajax上传图片同时生成微缩图(附Demo) 本文旨在与各位朋友们分享我是如何在项目中用C# "ps图片" 为网站生成同比例微缩图的解决方案.如有不足之 ...
调用微信上传图片接口和下载图片接口
目的:调用微信上传图片接口上传图片,并调用下载图片接口下载到本地 1.绑定域名登录微信公众平台后,进入公众号设置-->公众号设置页面如图(1),点击设置如图(2),输入域名后,点击保存. 注 ...
ajax上传图片并显示,Ajax实现图片上传并预览
效果见尾部. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图片上传需要一个input:file表单 ...
微信开发php插件下载图片,微信开发之微信jsapi选择图片,上传图片,预览和下载图片方法...
参数描述 appId公众号的唯一标识应用id timestamp生成签名的时间戳 nonceStr生成签名的随机串 signature签名上述表格中的四个参数是初始化调用微信jsapi的凭证,咱们 ...
win7 ftp安装搭建,并且上传图片到ftp文件夹下,使用nginx访问下载图片
ftp服务器搭建,这是在服务器上搭建的,下面的上传代码功能是在另一台电脑上操作的,相当于是一台电脑往另一台电脑上传图片. 双击它进去右键网站,添加ftp站点,下面的aaa是我新建好的. 我这个路径选 ...
Django 上传图片和下载图片
参考文章: https://www.zhangshengrong.com/p/Z9a28xMkXV/ 项目目录结构: 上传文件: 1.通用万精油模式: settings 同级目录 urls: from ...
ajax图片预览,Ajax 上传图片并预览的简单实现
1. 直接上最简单的一种 ajax 异步上传图片,并预览 html: 图片上传 | cookie file: desc: function upload() { $.ajaxFileUpload({ ...
php ajax 下载图片路径,JavaScript_批量下载对路网图片并生成html的实现方法，对路使用ajax实现异步加载内容 - phpStudy...
批量下载对路网图片并生成html的实现方法对路使用ajax实现异步加载内容,在它的js代码中找到了相关代码 type : 'POST', url : '/index.php/request/new_ ...

ajax上传图片、下载图片

一、上传图片

二、下载（展示）图片

ajax上传图片、下载图片相关推荐

最新文章

热门文章