SpringMVC与ajaxfileupload.js实现多个文件同时上传

修改ajaxfileupload.js，在SpringMVC下实现多个文件同时上传

jsp代码

<form:form id="multiUploadForm" commandName="multiFileInfo">
    <table>
        <tr>
            <th>用户名称</th>
            <td>
                <form:input path="username"/>
            </td>
        </tr>

        <tr>
            <th>用户密码</th>
            <td>
                <form:input path="password"/>
            </td>
        </tr>

        <tr>
            <th align="left">资源文件</th>
            <td>
                <input type="file" id="file1" name="file" accept="application/zip"/><br/>
            </td>
        </tr>

        <tr>
            <th align="left">资源文件</th>
            <td>
                <input type="file" id="file2" name="file" accept="application/zip"/><br/>
            </td>
        </tr>

        <tr>
            <td>
                <input type="button" value="上传" onclick="uploadFile('<%=contextPath%>')">
            </td>
        </tr>
    </table>
</form:form>

<script type="text/javascript">
    function uploadFile(contextPath) {
        var fileIds = new Array();
        var formHandle = document.getElementById("multiUploadForm");
        var tagElements = formHandle.getElementsByTagName('input');
        for (var j = 0; j < tagElements.length; j++) {
            element = tagElements[j];
            if ("file" == element.type) {
                fileIds.push(element.id);
            }
        }

        var requestUrl = contextPath + "/clientresources/multi";
        $.ajaxFileUpload({
            url : requestUrl,
            secureuri : false,
            //fileElementId : ['file1', 'file2'],
            fileElementId : fileIds,
            dataType: 'text',
            data : {
                username : $("#username").val(),
                password : $("#password").val()
            },
            success: function () {
                alert('上传成功');
            },
            error: function (data, status, e) {
                alert('上传出错');
            }
        });
    }
</script>

springMVC的model

public class MultiFileInfo {
    public String username;
    public String password;
    public MultipartFile[] file;

    setter...
    getter...
}

springMVC的controller

@RequestMapping(value = "/clientresources/multi", method = RequestMethod.POST)
public String multiFile(Model model, @ModelAttribute MultiFileInfo multiFileInfo) {
   for (MultipartFile file : multiFileInfo.file) {
       System.out.println(file.getOriginalFilename() + ":" + file.getSize());
   }
   return "client_resources/multi";
}

修改ajaxfileupload.js中的createUploadForm

/*被注释掉的代码是原有代码，替换成下面的代码。
var oldElement = jQuery('#' + fileElementId);
var newElement = jQuery(oldElement).clone();
jQuery(oldElement).attr('id', fileId);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form);
*/

if(typeof(fileElementId) == 'string'){
    fileElementId = [fileElementId];
}
for(var i in fileElementId){
    var oldElement = jQuery("input[id="+fileElementId[i]+"]");
    oldElement.each(function() {
        var newElement = jQuery($(this)).clone();
        jQuery(oldElement).attr('id', fileId);
        jQuery(oldElement).before(newElement);
        jQuery(oldElement).appendTo(form);
    });
}

注意，上传文件的input需要设置不同的id，name属性也必须设置。