java 实现html5多文件选择上传_h5多文件上传_ajax异步多文件上传_java处理多文件上传

最新推荐文章于 2024-06-29 16:04:34 发布

graceup

最新推荐文章于 2024-06-29 16:04:34 发布

阅读量4.7k

点赞数

分类专栏： html5 文章标签： h5多文件异步上传

本文链接：https://blog.csdn.net/graceup/article/details/77897755

版权

html5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

java 实现html5多文件选择上传_h5多文件上传_ajax异步多文件上传_java处理多文件上传
html页面如下

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>muti file upload</title>
</head>
<body>

	<form name="upform" action="/nanjian_server/api/import/importMultiFile"
		method="POST" enctype="multipart/form-data">

		<input class="browseButton" name="uploadedfile" multiple="true"
			accept=".xlsx,.xls,.txt" id="multiFile" type="file" id="uploader" />

		<br>
		<fieldset>
			<input type="file" name="file1" id="file1" /> <br /> <br /> <input
				type="file" name="file2" id="file2" /><br /> <br /> <input
				type="file" name="file3" id="file3" /><br /> <br />
		</fieldset>
		<br>
		<fieldset>
			<input type="text" name="tableName" value="a,b" /> <input
				type="text" name="importType" value="1,2" /> <input type="text"
				name="splitSign" value="1,2" />
		</fieldset>

		<input type="submit" value="Submit" /><br /> <br /> <input
			type="reset" />

	</form>

	<br>

	<button id="ajaxSubmitBtn">ajax upload</button>


	<script type="text/javascript"
		src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript">
		$('#multiFile').change(function() {

			var file = this.files[0];
			name = file.name;
			size = file.size;
			type = file.type;
			//your validation

			$('#file1') = this.files[1];

			console.log(file);
			console.log(this.files[1]);
			console.log(this.files);
			this.files = null;
			console.log(this.files);

		});

		$('#ajaxSubmitBtn').click(function() {

			var formData = new FormData($('form')[0]);

			$.ajax({
				url : '/nanjian_server/api/import/importMultiFile', //server script to process data
				type : 'POST',
				xhr : function() { // custom xhr
					myXhr = $.ajaxSettings.xhr();
					if (myXhr.upload) { // check if upload property exists
						myXhr.upload.addEventListener('progress', function(e) {
							console.log(e);

						}, false); // for handling the progress of the upload
					}
					return myXhr;
				},
				//Ajax事件
				beforeSend : function(e) {
					console.log(e);
				},
				success : function(e) {
					console.log(e);

				},
				error : function(e) {
					console.log(e);
				},
				// Form数据
				data : formData,
				//Options to tell JQuery not to process data or worry about content-type
				cache : false,
				contentType : false,
				processData : false
			});

		});
	</script>
</body>
</html>

java 后台处理主要代码

		// 将request变成多部分request
		MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
		Iterator<String>iter = multiRequest.getFileNames();
		if (multipartResolver.isMultipart(request)) {
			while (iter.hasNext()) {
				String name=iter.next().toString();
			
				List<MultipartFile> files = new LinkedList<MultipartFile>();  
		        files =multiRequest.getFiles(name);
		       
				// 一次遍历所有文件
 
		        for (MultipartFile file : files) {
		        	if (file != null) {
		        		//一个文件
		        		long fileSiz=file.getSize();
		        		if(fileSiz>0){
			        		String fileName = file.getOriginalFilename();// 原文件 名称
		        		}
		        	}
				}
				
			}
			
			
		}