文件上傳、多文件上傳、文件上傳進度監聽，附源碼包

前段時間做了個類似雲盤文件上傳的功能，要支持多文件上傳及上傳進度監聽。

現在將主體功能分享給大家！

話不多說，直接上代碼！

1、前段頁面佈局

    <body>
	 	<h1>多文件上傳，兼容IE8及以下版本，支持上傳進度監聽</h1>
	  	<div class="body-content sub-body-content buy-cart-cont clearfix">
			<div class="bigContainer">
				<div class="searchContainer">
					<div class="leftContainer">
						<input type="file" id="fileSelect" multiple style="display:none;"/>
						<div class="button upload" id="upload">上傳</div>
					</div>
				</div>
			</div>
		</div>

		<div class="upload-mark">
			<div class="upload-head">
				<div class="head-title">文件上傳</div>
				<div class="upload-close"></div>
				<div class="upload-show small"></div>
			</div>
			<div class="upload-content">
				<div class="filelabel">
					<div class='info'>
						<div class='filename'>文件名</div>
						<div class='filesize'>大小</div>
						<div class='filepath'>上傳位置</div>
						<div class='filestatus'>狀態</div>
					</div>
				</div>
				<div class="uploadfileList" id="uploadfileList"></div>
			</div>
		</div>
	</body>

2、前段JS

只引入jquery.js即可

var filePath = "";//記錄當前目錄

var uploadfileList = [];

$(function(){
	//上傳按鈕點擊事件
	$('#upload').click(function(){
		$("#fileSelect").click();
	})

	//文件上傳窗口關閉事件
	$(".upload-close").click(function(){
		$(".upload-mark").slideUp(500);
		$(".uploadfileList").html("");//清空列表
		uploadfileList = [];
	})

	//文件上傳窗口縮放事件
	$(".upload-show").click(function(){
		if($(this).hasClass("small")){
			$(this).removeClass("small").addClass("big");
			$(".upload-content").hide(500);
		} else {
			$(this).removeClass("big").addClass("small");
			$(".upload-content").show(500);
		}
	})

	$("#fileSelect").change(function(){
		$(".upload-show").removeClass("big").addClass("small");
		if($(".upload-mark").css("display","block")){
			$(".upload-content").slideDown(500);
		}
		var list = this.files;//原生js獲取文件
		var length = 0;
		for(var i=0; i<list.length; i++){
			if(length<30){
				if(list[i].size > 1024*1024*1024*100){
					alert("文件"+list[i].name+"大於100M");
				} else {
					reviewFile(list[i]);
					list[i]['status'] = 0;//標記該文件未上傳
					uploadfileList[uploadfileList.length] = list[i];
					length++;
				}
			} else {
				alert("單次最多上傳30個文件");
				break;
			}
		}
		uploadFile();
	})
});

//文件選擇完畢，展示已選擇的文件列表
function reviewFile(file){
	var fd = new FileReader();//實例化fileReader
	fd.readAsDataURL(file);//base64，調它的readAsDataURL並把原生File對象傳給它
	fd.onload = function(){//監聽它的onload事件
		var filesize = "";
		if(file.size < 1024){
			filesize = file.size + "B";
		} else if(file.size >= 1024 && file.size < 1024*1024){
			filesize = parseInt(file.size/1024*10)/10 + "KB";
		} else if(file.size >= 1024*1024 && file.size < 1024*1024*1024){
			filesize = parseInt(file.size/1024/1024*10)/10 + "MB";
		}
		var html = "<div class='fileitem' id='"+file.name+"'>" +
						"<div class='process'></div>" +
						"<div class='info'>" +
							"<div class='filename' title='"+file.name+"'>"+file.name+"</div>" +
							"<div class='filesize'>"+filesize+"</div>" +
							"<div class='filepath' title='"+filePath+"/'>"+filePath+"/</div>" +
							"<div class='filestatus'>等待中...</div>" +
						"</div>" +
					"</div>";
		$(".uploadfileList").append(html);
		var height = $(".filelabel").height() + $(".uploadfileList").height();
		$('.upload-content').eq(0).animate({scrollTop: height+'px'});//滾動條置於最底部
	}
}

function uploadFile(){
	if(uploadfileList.length>0){
		for(var i=0; i<uploadfileList.length; i++){
			if(uploadfileList[i]['status'] == 0){
				var index = i;
				var formData = new FormData();
				formData.append('file',uploadfileList[i]);
				formData.append('filePath',filePath);
				$.ajax({
					url:'<%= path %>/index',
					type:'post',
					data:formData,
					dataType:'json',
					processData:false,//用於對data參數進行序列化處理 這裏必須false
					contentType:false,//必須
					xhr:xhrOnProgress(function(e){
						var percent=e.loaded/e.total;//文件上傳百分比，100%表示文件已上傳至服務器，此時可能需要等待服務器處理結果
						$(".fileitem").eq(index).children(".info").eq(0).children(".filestatus").eq(0).html(parseInt(percent*100)+"%");
						$(".fileitem").eq(index).children(".info").eq(0).children(".filestatus").eq(0).css("color","#666");
						$(".fileitem").eq(index).children(".process").eq(0).css("width",parseInt(percent*100)+"%");
					}),
					success:function(result){//服務器處理後對文件狀態的標記
						if(result != "" && result != []){
							if(result.returnCode == 1){
								uploadfileList[index]['status'] = 1;//標記該文件已上傳
								$(".fileitem").eq(index).children(".info").eq(0).children(".filestatus").eq(0).html("<div class='success' title='上傳成功'></div>");
							} else {
								uploadfileList[index]['status'] = -1;//標記該文件上傳失敗
								$(".fileitem").eq(index).children(".info").eq(0).children(".filestatus").eq(0).html("<div class='fail' title='"+result['message']+"'></div>");
							}
						} else {
							uploadfileList[index]['status'] = -1;//標記該文件上傳失敗
							$(".fileitem").eq(index).children(".info").eq(0).children(".filestatus").eq(0).html("<div class='fail' title='上傳失敗'></div>");
						}
						$(".fileitem").eq(index).children(".process").eq(0).css("width","0px");
						uploadFile();//迭代調用，直到所有文件全部標記爲上傳成功或失敗
					},
					error:function(){
						uploadfileList[index]['status'] = -1;//標記該文件上傳失敗
						$(".fileitem").eq(index).children(".info").eq(0).children(".filestatus").eq(0).html("<div class='fail' title='上傳失敗'></div>");
						$(".fileitem").eq(index).children(".process").eq(0).css("width","0px");
						uploadFile();//迭代調用，直到所有文件全部標記爲上傳成功或失敗
					}
				});
				break;//單線上傳
			}
		}
	}else{
		alert("請選擇文件！")
	}
}

//文件上傳進度監聽
function xhrOnProgress(fun) {
	xhrOnProgress.onprogress = fun; //綁定監聽
	return function() {//使用閉包實現監聽綁
		var xhr = $.ajaxSettings.xhr();//通過$.ajaxSettings.xhr();獲得XMLHttpRequest對象
		if (typeof xhrOnProgress.onprogress !== 'function') {//判斷監聽函數是否爲函數
			return xhr;
		}
		if (xhrOnProgress.onprogress && xhr.upload) {//如果有監聽函數並且xhr對象支持綁定時就把監聽函數綁定上去
			xhr.upload.onprogress = xhrOnProgress.onprogress;
		}
		return xhr;
	}
}

//計算字符串長度(英文佔1個字符，中文漢字佔2個字符)
String.prototype.gblen = function() {
	var len = 0;
	for (var i=0; i<this.length; i++) {
		if (this.charCodeAt(i)>127 || this.charCodeAt(i)==94) {
			len += 2;
		} else {
			len ++;
		}
	}
	return len;
}

//JS 截取字符串（中英文，一箇中文相當於2個字符），str：被截取字符串，len：截取的中文長度
function cut_str(str, len){
	var char_length = 0;
	for (var i = 0; i < str.length; i++){
		if (str.charCodeAt(i)>127 || str.charCodeAt(i)==94) {
			char_length += 1;
		} else {
			char_length += 0.5;
		}
		if (parseInt(char_length-0.5) == len){
			return str.substr(0, i);
			break;
		}
	}
}

3、後端代碼，使用Servlet

import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.MultipartResolver;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;

public class indexServlet extends HttpServlet {

	private static final long serialVersionUID = 1L;

	public indexServlet() {
		super();
	}

	public void destroy() {
		super.destroy();
	}

	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		MultipartResolver resolver = new CommonsMultipartResolver(request.getSession().getServletContext());
        MultipartHttpServletRequest multipartRequest = resolver.resolveMultipart(request);
		Map<String,MultipartFile> filemap = multipartRequest.getFileMap();
		
		if(filemap==null || filemap.size()==0){
			response.getWriter().print("{\"returnCode\":-1}");
		}else{
	        Object[] keyArray = filemap.keySet().toArray();
	        /*for (Object key : keyArray) {
				System.out.println("文件key值："+key);
			}*/
			MultipartFile file = (MultipartFile)filemap.get(keyArray[0]);
			String srcName = file.getOriginalFilename();    //原文件名
			srcName = new String(srcName.getBytes("iso-8859-1"),"utf-8");    //中文亂碼處理
			long size = file.getSize();    //文件大小
			System.out.println("收到文件：" + srcName + "，文件大小： " + size);
			try {
				String realPath = this.getServletConfig().getServletContext().getRealPath("/");    //獲取項目真實路徑（E:\For_Test\MyEclipse\demo06-fileUpload\src\main\webapp\）
				System.out.println("存儲路徑："+realPath+"upload/"+srcName);
				
				BufferedInputStream bis = new BufferedInputStream(file.getInputStream());
				BufferedOutputStream bos = new BufferedOutputStream(new FileOutputStream(new File(realPath+"upload/"+srcName)));
				
				byte[] bys = new byte[1024];
				int len = 0;
				while ((len = bis.read(bys)) != -1) {
					bos.write(bys, 0, len);
				}
				bos.close();
				bis.close();
				
				response.getWriter().print("{\"returnCode\":1}");
			} catch (IOException e) {
				e.printStackTrace();
				response.getWriter().print("{\"returnCode\":-1}");
			}
		}
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request,response);
	}

	public void init() throws ServletException {
	}

}

看效果：