前端代码：
<form action="/项目名/homepage/uploadFile" method="post" enctype="multipart/form-data">
        <input type="file" name="file">
        <input type="submit" value="上传">
</form>

后端代码：
public void uploadFile(HttpServletRequest request, HttpServletResponse response) throws URISyntaxException, IOException, InterruptedException, FileUploadException {
        System.out.println("开始上传文件");
        //获取输入流
        // 转换为 MultipartHttpServletRequest
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
            // 通过表单中的参数名来接收文件流（可用 file.getInputStream() 来接收输入流）
        MultipartFile file = multipartRequest.getFile("file");
        System.out.println("上传的文件名称:" + file.getOriginalFilename());
        System.out.println("上传的文件大小:" + file.getSize());

        //获取输入流字节数组
        byte[] bytes = file.getBytes();

        //获取hdfs对象
        Configuration conf = new Configuration();
        FileSystem hdfs = FileSystem.get(new URI("hdfs://192.168.248.147:9000"), conf, "root");

        //获取输出流,并写入到hdfs
        FSDataOutputStream fos = hdfs.create(new Path("/yttlj/output/10.jpg"));
        fos.write(bytes,0,bytes.length);

        //关流
        IOUtils.closeStream(fos);
        hdfs.close();
        System.out.println("OVER");
    }

各位大虾们，我现在想通过浏览器上传一个2G的文件，，上传文件的同时需要显示进度条。大家谁有好的方法，麻烦告诉小弟下，谢谢

众所周知，前端上传文件，需要用form表单和input的type=‘file’,等等属性设置。

这导致了前端页面不美观，并且会随着浏览器的不同产生不同的效果。

本文假定读者已会web上传
针对以上描述问题，提出下面的解决方案：


css样式自行设置，不提供

思路如下：


写一个普通的input元素和二个button元素（选择和导入）


写一套form上传，设置为隐藏，并为input上传框设置id为file


为input设置readonly属性(禁止用户输入内容)，设置placeholder属性（input提示信息），设置onclick点击函数checkFile函数（自定义的）在函数中触发id为file 的窗选择文件$('#file').click();，同样为选择button设置该触发函数。


为form中的input设置onchange事件，当选择了文件的时候会触发该函数，这里起名为getFileName（它的作用是回显，将form中input的内容显示到我们设置为显示的input的内容var name = $('#file').val(); 	$('#filename').val(name);）


为导入按钮设置一个点击事件subForm，在这个地方我们要做俩件事，一个是文件名的筛选，保证上传的文件类型，另一个就是触发上传功能，此处贴代码


	function subForm() {
		var filepath = document.getElementById("file").value;
		var re = /(\\+)/g;
		var filename = filepath.replace(re, "#");
		//对路径字符串进行剪切截取 
		var one = filename.split("#");
		//获取数组中最后一个，即文件名 
		var two = one[one.length - 1];
		//再对文件名进行截取，以取得后缀名 
		var three = two.split(".");
		//获取截取的最后一个字符串，即为后缀名 
		var last = three[three.length - 1];
		//添加需要判断的后缀名类型 
		var tp = "xls,xlsx";
		//返回符合条件的后缀名在字符串中的位置 
		var rs = tp.indexOf(last);
		if (rs != -1) {
		//文件上传函数----------------------------------
			toImport();
		} else {
			layer.alert("文件不是有效xls或者xlsx文件.请重新上传！", 0);
			document.getElementById("file").value = "";
			return false;
		}
	}

	function toImport() {
	//with的使用自行百度
		with (document.forms[0]) {
			var filepathStr = document.getElementById("file").value;
			if (filepathStr == "") {
				layer.alert("请选择要导入的Excel！",0);
			} else {
			//后台路径
				action = "batchInfoAction.do";
				submit();
				//设置等待弹窗防止重复提交
				layer.msg("批量导入需要较长时间,请耐心等待！",{icon:0,time:21600000,shade:[0.5,'#000',true]});
			}
		}
	}

总结
说白了就是把form隐藏掉，然后使用我们可控的input和按钮等组件来控制不可控的文件上传样式

JAVA WEB文件上传步骤如下：
实现 Web 开发中的文件上传功能，两个操作：在 Web 页面添加上传输入项，在 Servlet 中读取上传文件的数据并保存在本地硬盘中。
1、Web 端上传文件。在 Web 页面中添加上传输入项： 设置文件上传输入项时应注意：(1) 必须设置 input 输入项的 name 属性，否则浏览器将不会发送上传文件的数据。(2) 必须把 form 的 enctype 属性设为 multipart/form-data，设置该值后，浏览器在上传文件时，将把文件数据附带在 http 请求消息体中，并使用 MIME 协议对上传文件进行描述，以方便接收方对上传数据进行解析和处理。(3) 表单提交的方式要是 post
2、服务器端获取文件。如果提交表单的类型为 multipart/form-data 时，就不能采用传统方式获取数据。因为当表单类型为 multipart/form-data 时，浏览器会将数据以 MIME 协议的形式进行描述。如果想在服务器端获取数据，那么我们必须采用获取请求消息输入流的方式来获取数据。
3、Apache-Commons-fileupload。为了方便用户处理上传数据，Apache 提供了一个用来处理表单文件上传的开源组建。使用 Commons-fileupload 需要 Commons-io 包的支持。
4、fileuplpad 组建工作流程
(1)客户端将数据封装在 request 对象中。
(2)服务器端获取到 request 对象。
(3)创建解析器工厂 DiskFileItemFactory 。
(4)创建解析器，将解析器工厂放入解析器构造函数中。之后解析器会对 request 进行解析。
(5)解析器会将每个表单项封装为各自对应的 FileItem。
(6)判断代表每个表单项的 FileItem 是否为普通表单项 isFormField，返回 true 为普通表单项。
(7)如果是普通表单项，通过 getFieldName 获取表单项名，getString 获得表单项值。
(8)如果 isFormField 返回 false 那么是用户要上传的数据，可以通过 getInputStream 获取上传文件的数据。通过getName 可以获取上传的文件名。