当前位置：网站首页 > 文章教程 > 正文

文件上传,排版是伤

xsobi 2024-12-07 18:09 1 浏览

当你还是一只猫的时候，记着你的目标要成为一只虎。当你成为一只虎的时候，别忘了你曾经是一只猫。心态要高，姿态要低。不要看轻别人，更不要高估自己。上传专题：

文件上传操作

图片预览功能

拖拽文件原生和Jquery

美化上传按钮胖先生 HP

HTML5的上传操作之单文件操作:

1.创建h5_ajax.jsp页面[测试使用]，位置WebContent下便于直接访问

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

//项目的发布路径，例如: /rabc

String path = request.getContextPath();

全路径，形式如下: http://127.0.0.1:8001/rbac/

request.getScheme() ——> http 获取协议

request.getServerName() --> 127.0.0.1 获取服务名

request.getServerPort() --> 8001 获取端口号

path --> /rbac 获取访问的路径路

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

<!DOCTYPE HTML>

<html>

<head>

<%--

参考文章:http://www.cnblogs.com/muqianying/archive/2012/03/16/2400280.html

--%>

function toSingleUpdate(){

//javascript：获取文件内容

//var file_data = document.getElementById('img_input').files[0];

//jquery:获取文件内容

var file_data = $("#img_input").prop("files")[0];

//创建:FormData();

var form_data = new FormData();

//模拟表单数据

form_data.append("id", "100");

form_data.append("name", "hanpang");

form_data.append("img", file_data);

//建议使用jquery.ajax来处理，方式如下

$.ajax({

type: "POST",

url: "h5_01",

dataType : "json",//对数据进行解析

processData: false, // 注意：让jQuery不要处理数据

contentType: false, // 注意：让jQuery不要设置contentType

data: form_data, // 传递的表单数据

success: function(data){

console.log(data);//使用web前端工具看到了数据，并且data是一个object类型

//简单的显示一下图片，这个有点暴力了，不太符合规范

//创建image对象的方式

alert($("<img>"));//注意这种写法

$("body").append($("<img>").attr("src","upload/"+data.fileName));

fail:function(data){

console.log(data);

}

});

}

</script>

</head>

<body>

<h2>第一种:H5单文件上传</h2>

</body>

</html>

代码说明:

//javascript方式：获取文件内容

var file_data = document.getElementById('img_input').files[0];

//jquery方式:获取文件内容

var file_data = $("#img_input").prop("files")[0];

XMLHttpRequest Level 2添加了一个新的接口FormData。利用FormData对象，我们可以通过JavaScript用一些键值对来模拟一系列表单控件。比起普通的Ajax，使用FormData的最大优点就是我们可以异步上传一个二进制文件。

//创建:FormData();

var form_data = new FormData();

//设置表单数据

form_data.append("id", "100");

form_data.append("name", "hanpang");

form_data.append("img", file_data);

代码分析:

//建议使用jquery.ajax来处理，方式如下

$.ajax({

type: "POST",//请求方式必须POST

url: "h5_01",//上传访问路径

dataType : "json",//对数据进行解析

processData: false, // 注意：让jQuery不要处理数据

contentType: false, // 注意：让jQuery不要设置contentType

data: form_data, // 传递的表单数据

success: function(data){

console.log(data);//使用web前端工具看到了数据，并且data是一个object类型

//简单的显示一下图片，这个有点暴力了，不太符合规范

//创建image对象的方式

//alert($("<img>"));//注意jquery的创建对象

$("body").append($("<img>").attr("src","upload/"+data.fileName));

fail:function(data){

console.log(data);

}

});

后台代码处理: 基于SpringMVC的上传

@RequestMapping(value = "/h5_01", method = RequestMethod.POST)

@ResponseBody //->>返回JSON的数据需要jackson的jar支持

public Map<String,Object> H5单文件上传操作(Integer id,String name, @RequestParam("img")MultipartFile myFile)

throws IOException {

Map<String,Object> map = new HashMap<String,Object>();

map.put("id", id);

map.put("name", name);

// 1.判断该文件是否存在

if (!myFile.isEmpty()) {

// 2.获取服务端的绝对路径

String path = this.session.getServletContext().getRealPath("/upload");

System.out.println("服务器项目的绝对路径-->" + path);

// 3.判断该文件夹是否存在，不存在则创建

File folder = new File(path);

if (!folder.isDirectory()) {// 在文件存在的情况下，才判断是否为文件夹，如果不存在返回的都是false

folder.mkdirs();

}

// 4.取得上传文件的名称

String fileName = myFile.getOriginalFilename();

// 5.获取上传文件的后缀名

String ext = FilenameUtils.getExtension(fileName);

// 7.创建新的文件名称

// String newFileName = UUID.randomUUID().toString()+"."+ext;

String newFileName = (new Date()).getTime() + "_" + (new Random()).nextInt(10000) + "." + ext;

// 8.创建文件

File newFile = new File(path + "/" + newFileName);

// 9.上传操作

try {

myFile.transferTo(newFile);

} catch (Exception e) {

e.printStackTrace();//->>应该使用其他的方式进行处理

}

map.put("fileName", newFileName);

map.put("realName", fileName);

}

return map;

}

运行效果图:

HTML5的上传操作之多文件操作:

说明:多文件上传下面的代码都粘贴核心部分，如有以为请咨询四海兴唐胖先生

JSP页面代码:

<body>

<h2>第一种:H5多文件上传</h2>

</body>

JavaScript代码:

function toMoreUpdate(){

//jquery:获取文件内容 -- 直接取出来的是数组

var file_datas = $("#img_input").prop("files");

//创建:FormData();

var form_data = new FormData();

//模拟表单数据

form_data.append("id", "100");

form_data.append("name", "hanpang");

//循环遍历数组

for(var i=0;i<file_datas.length;i++){

form_data.append("img", file_datas[i]);

}

//建议使用jquery.ajax来处理，方式如下

$.ajax({

type: "POST",

url: "h5_more",

dataType : "json",//对数据进行解析

processData: false, // 注意：让jQuery不要处理数据

contentType: false, // 注意：让jQuery不要设置contentType

data: form_data, // 传递的表单数据

success: function(data){

console.log(data);//使用web前端工具看到了数据，并且data是一个object类型

//遍历数据显示

for(var i=0;i<data.fileList.length;i++){

$("body").append($("<img>").attr("src","upload/"+data.fileList[i].fileName).css({"width":"100px","padding-left":"10px"}));

}

fail:function(data){

console.log(data);

}

});

}

Java后台处理代码:

@RequestMapping(value = "/h5_more", method = RequestMethod.POST)

@ResponseBody //注意使用数组

public Map<String,Object> H5多文件上传(Integer id,String name, @RequestParam("img")MultipartFile[] myFiles) throws IOException {

Map<String,Object> map = new HashMap<String,Object>();

map.put("id", id);

map.put("name", name);

if(myFiles!=null){

//用于存储上传文件的信息注意这里

List<Map<String,Object>> fileList = new ArrayList<Map<String,Object>>();

for (MultipartFile myFile : myFiles) {

Map<String,Object> fileMap = new HashMap<String,Object>();

// 1.判断该文件是否存在

if (!myFile.isEmpty()) {

// 2.获取服务端的绝对路径

String path = this.session.getServletContext().getRealPath("/upload");

System.out.println("服务器项目的绝对路径-->" + path);

// 3.判断该文件夹是否存在，不存在则创建

File folder = new File(path);

if (!folder.isDirectory()) {// 在文件存在的情况下，才判断是否为文件夹，如果不存在返回的都是false

folder.mkdirs();

}

// 4.取得上传文件的名称

String fileName = myFile.getOriginalFilename();

// 5.获取上传文件的后缀名

String ext = FilenameUtils.getExtension(fileName);

// 7.创建新的文件名称

// String newFileName = UUID.randomUUID().toString()+"."+ext;

String newFileName = (new Date()).getTime() + "_" + (new Random()).nextInt(10000) + "." + ext;

// 8.创建文件

File newFile = new File(path + "/" + newFileName);

// 9.上传操作

try {

myFile.transferTo(newFile);

} catch (Exception e) {

e.printStackTrace();

}

//存数据----------------------------------

fileMap.put("fileName", newFileName);

fileMap.put("realName", fileName);

fileList.add(fileMap);

//存数据----------------------------------

}

//----------------------------

map.put("fileList", fileList);

}

return map;

}

效果图截图:

上面的多文件上传的情况为一起把文件上传到后台进行处理，但是还有一种情况为，这四个文件分别单独上

那么我们就需要使用循环操作执行Ajax的单文件上传操作，但是这里有一个非常重要的不同的地方

各位同学不懂请查看Jquery的API文档说明:

如果后台接口要求单个文件，就循环获取文件信息提交，Ajax使用同步上传async: false

胖先生再说两句：

用 accept="MIME_TYPE"限制提交的文件类型，用逗号隔开的 MIME 类型列表（服务器端也要最好类型检测双保险），如：

或者

如果该元素的 type 属性的值是file,则该属性表明了服务器端可接受的文件类型；否则它将被忽略。该属性的值必须为一个逗号分割的列表,包含了多个唯一的内容类型声明:

一个有效的MIME类型,但没有扩展名
audio/* 表示音频文件 HTML5
video/* 表示视频文件 HTML5
image/* 表示图片文件 HTML5

这样的验证，其实还是能上传不同的文件的，服务端验证也是必要的！可以使用前端验证后缀名的形式:

附录:

[W3School] [MINE_TYPE的完整列表] [浏览时只显示指定文件类型] [MDN-HTML5教程] [jQuery验证控件jquery.validate.js使用说明+中文API]

jquery validate

上一篇：如何利用JQuery封装一个自定义通用JS操作方便在其他项目中使用?
下一篇：SpringBoot+vue 前后端分离博客项目

文件上传,排版是伤

相关推荐

SK海力士量产全球首款321层堆叠3D闪存，Win 11 LTSC推出热补丁功能

帝国cms插件，帝国cms网站插件，帝国插件(附下载)

《战神:诸神黄昏》6.001补丁发布优化手柄和显卡支持

这块安全“补丁”，补的牢!

strcat函数实现(C语言)

黄金分割主图指标(主图叠加)

治疗之道!GRID团队框架插件完美设置教程

如何使用CSS 新语法grid-area来设置网格布局

ASP.NET界面开发技巧放送，轻松自定义Grid运行时编辑表单布局

避雷心经 | Coredump排查入门

文件上传,排版是伤

相关推荐

SK海力士量产全球首款321层堆叠3D闪存，Win 11 LTSC推出热补丁功能

帝国cms插件，帝国cms网站插件，帝国插件(附下载)

《战神:诸神黄昏》6.001补丁发布 优化手柄和显卡支持

这块安全“补丁”，补的牢!

strcat函数实现(C语言)

黄金分割主图指标(主图叠加)

治疗之道!GRID团队框架插件完美设置教程

如何使用CSS 新语法grid-area来设置网格布局

ASP.NET界面开发技巧放送，轻松自定义Grid运行时编辑表单布局

避雷心经 | Coredump排查入门

《战神:诸神黄昏》6.001补丁发布优化手柄和显卡支持