玖叶教程网

前端编程开发入门

2024年04月23日

文件上传,排版是伤（文档上传是什么意思）

当你还是一只猫的时候，记着你的目标要成为一只虎。当你成为一只虎的时候，别忘了你曾经是一只猫。心态要高，姿态要低。不要看轻别人，更不要高估自己。 上传专题：
  1. 文件上传操作
  1. 图片预览功能
  1. 拖拽文件原生和Jquery
  1. 美化上传按钮 胖先生 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

--%>

<base href="<%=basePath%>">

<meta charset="UTF-8">

<title>胖先生:83604162</title>

<script type="text/javascript" src="resource/jquery.js"></script>

<script type="text/javascript">

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>

<label for="img_input"></label>

<input id="img_input" type="file"/>

<input type="button" value="单文件上传[不做验证]" onclick="toSingleUpdate()">

</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>

<label for="img_input"></label>

<!-- 增加属性multiple -->

<input id="img_input" type="file" multiple="multiple"/>

<input type="button" value="单文件上传[不做验证]" onclick="toMoreUpdate()">

</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 类型 列表（服务器端也要最好类型检测双保险），如：

<!-- 只是允许上传gif、jpg的图片 -->

<input id="img_input" type="file" accept="image/gif,image/jpeg"/>

或者

<input id="img_input" type="file" accept="image/*"/>

accept

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

  • 一个有效的MIME类型,但没有扩展名

  • audio/* 表示音频文件 HTML5

  • video/* 表示视频文件 HTML5

  • image/* 表示图片文件 HTML5

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

附录:

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

标签：isdirectory 

作者:gojiuye , 分类:技术精选 , 浏览:20 , 评论:0

发表评论:

控制面板
您好，欢迎到访网站！
  查看权限
网站分类
最新留言