当你还是一只猫的时候，记着你的目标要成为一只虎。当你成为一只虎的时候，别忘了你曾经是一只猫。心态要高，姿态要低。不要看轻别人，更不要高估自己。 上传专题：文件上传操作图片预览功能拖拽文件原生和Jquery美化上传按钮 胖先生 HP
HTML5的上传操作之单文件操作:
1.创建h5_ajax.jsp页面
测试使用
whatsapp网页版，位置WebContent下便于直接访问
http 获取协议
request.getServerName() --> 127.0.0.1 获取服务名
request.getServerPort() --> 8001 获取端口号
path --> /rbac 获取访问的路径 路
*/
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
第一种:H5单文件上传
代码说明:
//javascript方式：获取文件内容
var file_data = document.getElementById('img_input').files
//jquery方式:获取文件内容
var file_data = $("#img_input").prop("files")
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.判断该文件夹是否存在whatsapp登录，不存在则创建
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
);
//建议使用jquery.ajax来处理telegram中文版，方式如下
$.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
.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,则该属性表明了服务器端可接受的文件类型；否则它将被忽略。该属性的值必须为一个逗号分割的列表,包含了多个唯一的内容类型声明:
这样的验证，其实还是能上传不同的文件的，服务端验证也是必要的！可以使用前端验证后缀名的形式:
附录:
W3School
MINE_TYPE的完整列表
浏览时只显示指定文件类型
MDN-HTML5教程
jQuery验证控件jquery.validate.js使用说明+中文API