html上传文件与后台处理,前端文件上传与后台数据返回展示
1.前端代码-HTML
支持扩展名:.txt .doc .docx .pdf
2.前端代码-JS/*选择文件*/
getFile:function(event){
var file = event.target.files;
for(var i = 0;i
//上传类型判断
var imgName = file[i].name;
var idx = imgName.lastIndexOf(".");
if (idx != -1){
var ext = imgName.substr(idx+1).toUpperCase();
ext = ext.toLowerCase( );
if (ext!='pdf' && ext!='doc' && ext!='docx' && ext!='txt'){
}else{
this.addArr.push(file[i]);
}
}else{
}
}
},
/*开始上传*/
submitAddFile:function(){
if(0 == this.addArr.length){
layer.msg("请选择文件", {icon: 1});
return;
}
var formData = new FormData();
for(var i=0;i
formData.append('file',this.addArr[i]);
}
const vm = this
$.ajax({
type: "POST",
url: baseURL + "air/crackCalculateController/upload",
contentType:false,
processData:false,
data: formData,
success: function(r){
if(r.code == 0){
layer.msg("操作成功", {icon: 1});
vm.loadxy = r.ret
}else{
layer.alert(r.msg);
}
}
});
}
3.后台代码-Controller@PostMapping("/upload")
@RequiresPermissions("air:crackCalculate:save")
public R upload(@RequestParam("file") MultipartFile file) throws IOException {
if (file.isEmpty()) {
return R.ok().put("ret", "上传失败,请选择文件");
}
String fileName = file.getOriginalFilename();
String lastStr = fileName.substring(fileName.lastIndexOf("."));
String result = "";
if (".txt".equals(lastStr)) {
//10,100,1000/n20,200,2000/n30,300,3000/n
result = FileToString.convertStreamToString(file.getInputStream());
} else if ("doc".equals(lastStr)){
String prefix = fileName.substring(fileName.lastIndexOf("."));
File filef = null;
try {
filef = File.createTempFile(fileName, prefix);
file.transferTo(filef);
result = FileToString.convertDocToString(filef);
} catch (Exception e) {
e.printStackTrace();
} finally {
// 操作完上面的文件 需要删除在根目录下生成的临时文件
File f = new File(filef.toURI());
f.delete();
}
} else if (".docx".equals(lastStr)){
String prefix = fileName.substring(fileName.lastIndexOf("."));
File filef = null;
try {
filef = File.createTempFile(fileName, prefix);
file.transferTo(filef);
result = FileToString.convertDocxToString(filef);
} catch (Exception e) {
e.printStackTrace();
} finally {
// 操作完上面的文件 需要删除在根目录下生成的临时文件
File f = new File(filef.toURI());
f.delete();
}
}
return R.ok().put("ret", result);
}
}
html上传文件与后台处理,前端文件上传与后台数据返回展示相关推荐
- ajax传图片以及后台接收,前端ajax上传文件,图片,后端nodejs接收文件;
前端ajax上传文件,图片,后端nodejs接收文件: 学习了nodejs,就想实现一下有进度条的文件上传,html 在作这个功能的时候遇到的问题前端 用普通的ajax没法实现文件上传,只能post, ...
- 后台接收前端文件图片
前端代码为: <form action="/userSave" method="post" enctype ="multipart/form-d ...
- C# 导入CSV文件,导出到CSV文件
导入CSV文件 public static DataTable ImportFromCsv(string filePath)//从csv读取数据返回table {//Encoding encoding ...
- 若依前后端分离版源码分析-前端头像上传后传递到后台以及在服务器上存储和数据库存储设计
场景 使用若依前后端分离版本时,分析其头像上传机制. 可作为续参考学习. 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获 ...
- 【功能】:前台上传文件(txt,xls,xlsx,csv,pdf)五种格式的文件 后台java解析文件,并且判断文件内容是否为零字节
描述:前台html上传文件到后台解析文件.文件类型有txt,xls,xlsx,csv,pdf这五种类型,并且要判断文件内容是否为空,就是有文件,但是文件内容的字节为零. 首先先配置需要maven依赖. ...
- 完美解决前端无法上传大文件方法
1 背景 用户本地有一份txt或者csv文件,无论是从业务数据库导出.还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工.挖掘和共创应用的时候,首先要将本地文件上传至ODPS,普通的小文件通 ...
- vue前端实现上传文件,vue 上传文件
以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载. 准备文件上传的API #region 文件上传 ...
- 使用el upload标签上传文件的几种常见使用场景(前台+后台)
前言:本篇博客主要介绍ElementUI中el upload上传控件的使用,包含前后台代码. 文章目录 一.总体代码 二.使用场景 1.添加 2.修改 3.单独上传到服务器 一.总体代码 1.前端控件 ...
- jq实现前端文件上传
FormData FormData是XMLHttpRequest Level 2 新增的一个接口. 使用FormData可以实现各种文件上传. 使用 // 创建FormData的实例 var form ...
最新文章
- Android Studio导入Fresco
- layui 页面保存数据
- springMVC请求发生重复路径
- Unity手游开发札记——移动平台的天气系统实现
- C#检查json格式是否合法
- curl命令java_Java中的curl命令
- 洛谷P2463 [SDOI2008]Sandy的卡片(后缀数组SA + 差分 + 二分答案)
- 没有工作经验找it_没有工作经验怎么找工作?
- linux中的环境变量作用
- JDK指定D盘安装及环境变量配置
- CMOS摄像头驱动分析笔记1
- activiti工作流在线表单设计功能(activiti + ueditor + Ueditor Web Form Design扩展 )
- 基于asp.net大学生助学贷款管理系统#毕业设计
- 《Nature》论文插图复刻第3期—面积图(Part2-100)
- Win10开启卓越性能模式,比高性能更强
- 5G商用牌照的发放对物联网意味着什么
- 打字测试软件 tt,TT打字测试软件
- 模仿支付宝支付成功特效:svg圆圈转动+打钩
- Swarm and shipyard
- 浮点数除0和余0、定义
热门文章
- 相关性检验--Spearman秩相关系数和皮尔森相关系数
- 新萝卜家园 ghost xp sp3 电脑城稳定版 2012.05+
- 我的微语录周记2011-12-05---2011-…
- 19-10-19 屏幕尺寸、分辨率、PPI、像素之间的关系
- Appium Desired Capabilities简单使用
- android:maxHeight,android:maxWidth失效
- Spark基础学习笔记05:搭建Spark Standalone集群
- 盘点游戏中那些“欺骗玩家眼睛的开发技巧”
- usb 硬盘驱动框架
- Dapr简单入门(一)