Spring mvc实现文件上传及html5实现上传进度条

Spring mvc实现文件上传及html5实现上传进度条

1.Spring mvc实现文件上传

• 要在springMVC的配置文件springmvc-servlet.xml中配置有管springMVC对上传文件的处理的类。
  

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="utf-8" />
<property name="maxUploadSize" value="10485760000" />
<property name="maxInMemorySize" value="40960" />
</bean>

• 程序代码

/**
 * springMVC封装的解析request上传文件（快捷、与springMVC很好结合，首选）
 */
@RequestMapping("/upload2")
public String uploadFile2(@RequestParam("file") CommonsMultipartFile file,
		HttpServletRequest request) throws IOException {
	// 定义解析器去解析request
	CommonsMultipartResolver mutilpartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
	//request如果是Multipart类型、
	if (mutilpartResolver.isMultipart(request)) {
		//强转成 MultipartHttpServletRequest
		MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
		//获取文件名
		Iterator<String> it = multiRequest.getFileNames();
		while (it.hasNext()) {
			//获取MultipartFile类型文件
			MultipartFile fileDetail = multiRequest.getFile(it.next());
			if (fileDetail != null) {
				String fileName = "demoUpload" + fileDetail.getOriginalFilename();
				String path = "D:/" + fileName;
				File localFile = new File(path);
				//将上传文件写入到指定文件出、核心！
				fileDetail.transferTo(localFile);
				//非常重要、有了这个想做什么处理都可以
				//fileDetail.getInputStream();
			}
		}
	}
	return "/success";
}

2.html5实现上传进度条

• jsp页面

<input type="file" id="file" name="myfile" οnclick="clearProgressInfo()"/>
<span id="progressInfo" style="display:none;">
<progress id="progressBar" value="0" max="100"></progress>
<span id="percentage"></span>
</span><br/>
<input type="button" οnclick="UpladFile()" value="上传" />

• js代码

function UpladFile() {
	var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
	var FileController = ""; // 接收上传文件的后台地址 

	// FormData 对象
	var form = new FormData();
	form.append("author", "hooyes"); // 可以增加表单数据
	form.append("file", fileObj); // 文件对象

	// XMLHttpRequest 对象
	var xhr = new XMLHttpRequest();
	xhr.open("post", FileController, true);
	xhr.onload = function() {
		// alert("上传完成!");
	};
	
	document.getElementById('progressInfo').style.display = "";
	xhr.upload.addEventListener("progress", progressFunction, false);

	xhr.send(form);
}

function clearProgressInfo()
{
	document.getElementById('progressInfo').style.display='none';
	document.getElementById("progressBar").value = 0;
	document.getElementById("percentage").innerHTML = "";
}

function progressFunction(evt) {
	var progressBar = document.getElementById("progressBar");
	var percentageDiv = document.getElementById("percentage");
	if (evt.lengthComputable) {
		progressBar.max = evt.total;
		progressBar.value = evt.loaded;
		percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
	}
}