SpringMVC + ajaxfileupload的多文件上傳

    最近做一個springmvc ajax多文件上傳，倒騰了下，查閱了部分資料搞定了！現在分享：

   1.Spring mvc

       a.xml配置：

    <bean id="multipartResolver"
        class="org.springframework.web.multipart.commons.CommonsMultipartResolver" >
        <!-- set the max upload size1MB   1048576     -->
        <property name="maxUploadSize">
            <value>52428800</value>
        </property>
        <property name="maxInMemorySize">
            <value>2048</value>
        </property>
    </bean>

      b. 服務器端接收解析

        public void imgUpload(
		MultipartHttpServletRequest multipartRequest,
		HttpServletResponse response) throws Exception {
		response.setContentType("text/html;charset=UTF-8");
		Map<String, Object> result = new HashMap<String, Object>();
                //獲取多個file
		for (Iterator it = multipartRequest.getFileNames(); it.hasNext();) {
			String key = (String) it.next();
			MultipartFile imgFile = multipartRequest.getFile(key);
			if (imgFile.getOriginalFilename().length() > 0) {
				String fileName = imgFile.getOriginalFilename();
                                //改成自己的對象哦！
				Object obj = new Object();
				//Constant.UPLOAD_GOODIMG_URL 是一個配置文件路徑
				try {
					String uploadFileUrl = multipartRequest.getSession().getServletContext().getRealPath(Constant.UPLOAD_GOODIMG_URL);
					File _apkFile = saveFileFromInputStream(imgFile.getInputStream(), uploadFileUrl, fileName);
					if (_apkFile.exists()) {
						FileInputStream fis = new FileInputStream(_apkFile);
					} else
						throw new FileNotFoundException("apk write failed:" + fileName);
					List list = new ArrayList();
					//將obj文件對象添加到list
					list.add(obj);
					result.put("success", true);
				} catch (Exception e) {
					result.put("success", false);
					e.printStackTrace();
				}
			}
		}
		String json = new Gson().toJson(result,
				new TypeToken<Map<String, Object>>() {
				}.getType());
		response.getWriter().print(json);
	}

        //保存文件
	private File saveFileFromInputStream(InputStream stream, String path,
			String filename) throws IOException {
		File file = new File(path + "/" + filename);
		FileOutputStream fs = new FileOutputStream(file);
		byte[] buffer = new byte[1024 * 1024];
		int bytesum = 0;
		int byteread = 0;
		while ((byteread = stream.read(buffer)) != -1) {
			bytesum += byteread;
			fs.write(buffer, 0, byteread);
			fs.flush();
		}
		fs.close();
		stream.close();
		return file;
	}

2.關於前端代碼

a.修改ajaxfileupload.js

  先到官網下載該插件.

  將源文件的createUploadForm的代碼替換如下：

createUploadForm: function(id, fileElementId, data)
		{
			//create form	
	    	var formId = 'jUploadForm' + id;
	    	var fileId = 'jUploadFile' + id;
	    	var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');	
	    	if (data) {
				for ( var i in data) {
					jQuery(
							'<input type="hidden" name="' + i + '" value="'
									+ data[i] + '" />').appendTo(form);
				}
			}
	    	for (var i = 0; i < fileElementId.length; i ++) {
				var oldElement = jQuery('#' + fileElementId[i]);
				var newElement = jQuery(oldElement).clone();
				jQuery(oldElement).attr('id', fileElementId[i]);
				jQuery(oldElement).attr('name', fileElementId[i]);
				jQuery(oldElement).before(newElement);
				jQuery(oldElement).appendTo(form);
			}
	    	//set attributes
	    	jQuery(form).css('position', 'absolute');
	    	jQuery(form).css('top', '-1200px');
	    	jQuery(form).css('left', '-1200px');
	    	jQuery(form).appendTo('body');
			return form;
	    }

第一步高定

b. 頁面代碼

html：

<input type="button"  value="添加附件" onclick="createInput('more');" />
<div id="more"></div>

js：這裏可以專門寫封裝類，以及給file加onchange事件判斷文件格式。由於時間有限，未修改

var count = 1;
/**
* 生成多附件上傳框
*/
function createInput(parentId){
    count++;
    var str = '<div name="div" ><font style="font-size:12px;">附件</font>'+
    '   '+ '<input type="file" contentEditable="false" id="uploads' + count + '' +
    '" name="uploads'+ count +'" value="" style="width: 220px"/><input type="button"  value="刪除" onclick="removeInput(event)" />'+'</div>';
    document.getElementById(parentId).insertAdjacentHTML("beforeEnd",str);
}
/**
* 刪除多附件刪除框
*/
function removeInput(evt, parentId){
   var el = evt.target == null ? evt.srcElement : evt.target;
   var div = el.parentNode;
   var cont = document.getElementById(parentId);       
   if(cont.removeChild(div) == null){
    return false;
   }
   return true;
}

下面是2個修改多file用的js，用於顯示和刪除，可以於上面的合併精簡代碼：

function addOldFile(data){
	var str = '<div name="div' + data.name + '" ><a href="#" style="text-decoration:none;font-size:12px;color:red;" onclick="removeOldFile(event,' + data.id + ')">刪除</a>'+
    '   ' + data.name + 
    '</div>';
    document.getElementById('oldImg').innerHTML += str;
}

function removeOldFile(evt, id){
    //前端隱藏域，用來確定哪些file被刪除，這裏需要前端有個隱藏域
    $("#imgIds").val($("#imgIds").val()=="" ? id :($("#imgIds").val() + "," + id));
    var el = evt.target == null ? evt.srcElement : evt.target;
    var div = el.parentNode;
    var cont = document.getElementById('oldImg');    
    if(cont.removeChild(div) == null){
        return false;
    }
    return true;
}

ajax上傳文件:

function ajaxFileUploadImg(id){
        //獲取file的全部id
        var uplist = $("input[name^=uploads]");
	var arrId = [];
	for (var i=0; i< uplist.length; i++){
	    if(uplist[i].value){
	    	arrId[i] = uplist[i].id;
		}
        }
	$.ajaxFileUpload({
		url:'xxxxx',
		secureuri:false,
		fileElementId: arrId,  //這裏不在是以前的id了，要寫成數組的形式哦！
		dataType: 'json',
		data: {
                     //需要傳輸的數據
                },
		success: function (data){
		},
		error: function(data){
		}
	});
}

親們，一個spingmvc +ajax多文件上傳有搞定了，功能很簡單，有問題聯繫本人