文件上传,排版是伤

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+"/";

%>

<%--

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

--%>

第一种:H5单文件上传

代码说明:

//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($(""));//注意jquery的创建对象

$("body").append($("").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 H5单文件上传操作(Integer id,String name, @RequestParam("img")MultipartFile myFile)

throws IOException {

Map map = new HashMap();

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页面代码:

第一种:H5多文件上传

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

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

$("body").append($("").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 H5多文件上传(Integer id,String name, @RequestParam("img")MultipartFile[] myFiles) throws IOException {

Map map = new HashMap();

map.put("id", id);

map.put("name", name);

if(myFiles!=null){

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

List> fileList = new ArrayList>();

for (MultipartFile myFile : myFiles) {

Map fileMap = new HashMap();

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

或者

accept

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

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

• audio/* 表示音频文件 HTML5

• video/* 表示视频文件 HTML5

• image/* 表示图片文件 HTML5

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

附录:

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