关闭

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

标签: spring mvc
828人阅读 评论(0) 收藏 举报
分类:

修改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属性也必须设置。

0
1

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1650次
    • 积分:45
    • 等级:
    • 排名:千里之外
    • 原创:3篇
    • 转载:0篇
    • 译文:0篇
    • 评论:1条
    文章分类
    文章存档
    最新评论