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

原创 2016年08月31日 00:25:47

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

SpringMVC + ajaxfileupload的多文件上传

最近做一个springmvc ajax多文件上传,倒腾了下,查阅了部分资料搞定了!现在分享:    1.Spring mvc        a.xml配置: <bean id="m.....

ajaxFileUpload带参数提交

使用ajaxFileUpload上传文件时,有时需要带参数提交,网上有很多资料说使用data,但其实要使用data带参数是需要修改的,否则后台是获取不到的. ajaxFileUpload为了实现无刷新...

spring mvc 文件、图片上传(极简)ajaxFileUpload

没想到做个图片上传耽误这么长时间,特此整理。 基于springMVC后端框架。 前端使用jQuery插件ajaxFileUpload.js。 参考文章:spring mvc(注解)上传文件的简单例...

spring mvc(注解)上传文件的简单例子

spring mvc(注解)上传文件的简单例子,这有几个需要注意的地方 1.form的enctype=”multipart/form-data” 这个是上传文件必须的 2.applicationC...

ajaxfileupload.js+SpringMVC实现文件上传

一、jsp页面 js下载 : http://download.csdn.net/detail/longtingjing/9725858 js引用: ...

ajaxfileupload.js+springMVC实现多个图片与数据同一个ajax方法上传

通过修改原始的ajaxFileUpload.js文件从而实现多图片以及json数据的上传。

SpringMVC结合ajaxfileupload.js实现异步上传文件

相比较提交表单实现文件上传,使用ajaxfileupload.js显得更加灵活 jsp代码:     //获取文件名称       function change(){         var...

SpringMVC结合ajaxfileupload.js实现ajax无刷新文件上传

一、spring mvc配置1、web.xml <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi...

SpringMVC结合ajaxfileupload.js实现文件无刷新上传

直接看代码吧,注释都在里面 首先是web.xml [html] view plain copy  print? xml version="1.0" encoding="UT...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)