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上传文件与后台处理,前端文件上传与后台数据返回展示相关推荐

  1. ajax传图片以及后台接收,前端ajax上传文件,图片,后端nodejs接收文件;

    前端ajax上传文件,图片,后端nodejs接收文件: 学习了nodejs,就想实现一下有进度条的文件上传,html 在作这个功能的时候遇到的问题前端 用普通的ajax没法实现文件上传,只能post, ...

  2. 后台接收前端文件图片

    前端代码为: <form action="/userSave" method="post" enctype ="multipart/form-d ...

  3. C# 导入CSV文件,导出到CSV文件

    导入CSV文件 public static DataTable ImportFromCsv(string filePath)//从csv读取数据返回table {//Encoding encoding ...

  4. 若依前后端分离版源码分析-前端头像上传后传递到后台以及在服务器上存储和数据库存储设计

    场景 使用若依前后端分离版本时,分析其头像上传机制. 可作为续参考学习. 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获 ...

  5. 【功能】:前台上传文件(txt,xls,xlsx,csv,pdf)五种格式的文件 后台java解析文件,并且判断文件内容是否为零字节

    描述:前台html上传文件到后台解析文件.文件类型有txt,xls,xlsx,csv,pdf这五种类型,并且要判断文件内容是否为空,就是有文件,但是文件内容的字节为零. 首先先配置需要maven依赖. ...

  6. 完美解决前端无法上传大文件方法

    1 背景 用户本地有一份txt或者csv文件,无论是从业务数据库导出.还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工.挖掘和共创应用的时候,首先要将本地文件上传至ODPS,普通的小文件通 ...

  7. vue前端实现上传文件,vue 上传文件

    以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载. 准备文件上传的API #region 文件上传  ...

  8. 使用el upload标签上传文件的几种常见使用场景(前台+后台)

    前言:本篇博客主要介绍ElementUI中el upload上传控件的使用,包含前后台代码. 文章目录 一.总体代码 二.使用场景 1.添加 2.修改 3.单独上传到服务器 一.总体代码 1.前端控件 ...

  9. jq实现前端文件上传

    FormData FormData是XMLHttpRequest Level 2 新增的一个接口. 使用FormData可以实现各种文件上传. 使用 // 创建FormData的实例 var form ...

最新文章

  1. Android Studio导入Fresco
  2. layui 页面保存数据
  3. springMVC请求发生重复路径
  4. Unity手游开发札记——移动平台的天气系统实现
  5. C#检查json格式是否合法
  6. curl命令java_Java中的curl命令
  7. 洛谷P2463 [SDOI2008]Sandy的卡片(后缀数组SA + 差分 + 二分答案)
  8. 没有工作经验找it_没有工作经验怎么找工作?
  9. linux中的环境变量作用
  10. JDK指定D盘安装及环境变量配置
  11. CMOS摄像头驱动分析笔记1
  12. activiti工作流在线表单设计功能(activiti + ueditor + Ueditor Web Form Design扩展 )
  13. 基于asp.net大学生助学贷款管理系统#毕业设计
  14. 《Nature》论文插图复刻第3期—面积图(Part2-100)
  15. Win10开启卓越性能模式,比高性能更强
  16. 5G商用牌照的发放对物联网意味着什么
  17. 打字测试软件 tt,TT打字测试软件
  18. 模仿支付宝支付成功特效:svg圆圈转动+打钩
  19. Swarm and shipyard
  20. 浮点数除0和余0、定义

热门文章

  1. 相关性检验--Spearman秩相关系数和皮尔森相关系数
  2. 新萝卜家园 ghost xp sp3 电脑城稳定版 2012.05+
  3. 我的微语录周记2011-12-05---2011-…
  4. 19-10-19 屏幕尺寸、分辨率、PPI、像素之间的关系
  5. Appium Desired Capabilities简单使用
  6. android:maxHeight,android:maxWidth失效
  7. Spark基础学习笔记05:搭建Spark Standalone集群
  8. 盘点游戏中那些“欺骗玩家眼睛的开发技巧”
  9. usb 硬盘驱动框架
  10. Dapr简单入门(一)