百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

文件上传,排版是伤

zhezhongyun 2025-02-11 14:22 31 浏览

当你还是一只猫的时候,记着你的目标要成为一只虎。当你成为一只虎的时候,别忘了你曾经是一只猫。心态要高,姿态要低。不要看轻别人,更不要高估自己。 上传专题:
  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+"/";

%>

<%--

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

--%>

胖先生:83604162

第一种: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]

相关推荐

Chinese vice premier calls for multilateralism at Davos

DAVOS,Switzerland,Jan.21(Xinhua)--ChineseVicePremierDingXuexiangdeliveredaspeechatthe...

用C++ Qt手把手打造炫酷汽车仪表盘

一、项目背景与核心价值在车载HMI(人机交互界面)开发领域,虚拟仪表盘是智能座舱的核心组件。本项目基于C++Qt框架实现一个具备专业级效果的时速表模块,涵盖以下技术要点:Qt图形绘制核心机制(QPa...

系列专栏(八):JS的第七种基本类型Symbols

ES6作为新一代JavaScript标准,已正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解,MozillaWeb开发者博客推出了《ES6InDepth》系列文章。CSDN...

MFC界面开发工具BCG v31.1 - 增强功能区、工具箱功能

点击“了解更多”获取工具亲爱的BCGSoft用户,我们非常高兴地宣布BCGControlBarProfessionalforMFC和BCGSuiteforMFCv31.2正式发布!新版本支...

雅居乐上调出售吉隆坡项目保留金,预计亏损扩大至6.64亿元

1月2日,雅居乐集团(03383.HK)发布有关出售一家附属公司股权披露交易的补充公告。此前雅居乐集团曾公告,2023年11月8日(交易时段后),集团子公司AgileRealEstateDeve...

Full text: Address by Vice Premier Ding Xuexiang&#39;s at World Economic Forum Annual Meeting 2025

DAVOS,Switzerland,Jan.21(Xinhua)--ChineseVicePremierDingXuexiangonTuesdaydeliveredasp...

手机性能好不好 GPU玄学曲线告诉你

前言各位在看测试者对手机进行评测时或许会见过“安卓玄学曲线”,所谓中的安卓玄学曲线真名为“ProfileGPURendering”。大多数情况下,在系统“开发者选项中被称为“GPU显示配置文件”或...

小迈科技 X Hologres:高可用的百亿级广告实时数仓建设

通过本文,我们将会介绍小迈科技如何通过Hologres搭建高可用的实时数仓。一、业务介绍小迈科技成立于2015年1月,是一家致力以数字化领先为优势,实现业务高质量自增长的移动互联网科技公司。始...

vue3新特征和所有的属性,方法汇总及其对应源码分析

vue3新特征汇总与源码分析(备注:vue3使用typescript编写)何为应用?constapp=Vue.createApp({})app就是一个应用。应用的配置和应用的API就是app应用...

China&#39;s stability redefines global trade in a volatile era

ContainersareunloadedatQingdaoPort,eastChina'sShandongProvince,December10,2024.[Photo/X...

QML 实现图片帧渐隐渐显轮播

前言所谓图片帧渐隐渐显轮播就是,一组图片列表,当前图片逐渐改变透明度隐藏,同时下一张图片逐渐改变透明度显示,依次循环,达到渐隐渐显的效果,该效果常用于图片展示,相比左右自动切换的轮播方式来说,这种方式...

前端惊魂夜:我竟在CSS里写出了JavaScript?

凌晨两点,写字楼里只剩下我工位上的一盏孤灯。咖啡杯见底,屏幕的光映在疲惫的眼镜片上。为了实现一个极其复杂的动态渐变效果,我翻遍了MDN文档,试遍了所有已知的CSS技巧,却始终差那么一口气。“要是CSS...

10 个派上用场的 Flutter 小部件

尝试学习一门新语言可能会令人恐惧和厌烦。很多时候,我们希望我们知道早先存在的某些功能。在今天的文章中,我将告诉你我希望早点知道的最方便的颤振小部件。SpacerSpacer创建一个可调整的空白空...

让我的 Flutter 代码整洁 10 倍的 5 种

如果你曾在Flutter中使用过SingleTickerProviderStateMixin来制作动画,猜猜怎么着?你已经使用过Mixin了——恭喜你,你已经处于一段你甚至不知道的关...

daisyUI - 主题漂亮、代码纯净!免费开源的 Tailwind CSS 组件库

漂亮有特色的CSS组件库,组件代码非常简洁,也支持深度定制主题、定制组件,可以搭配Vue/React等框架使用。关于daisyUIdaisyUI是一款极为流行的CSSUI组件库,...