ajax的res怎么传到其他文件

JavaScript06

ajax的res怎么传到其他文件,第1张

传其他参数

ajax文件上传怎么传其他参数,Ajax进行文件与其他参数的上传功能

光启元

转载

关注

0点赞·945人阅读

记得前一段时间,为了研究Ajax文件上传,找了很多资料,在网上看到的大部分是form表单的方式提交文件,对于Ajax方式提交文件并且也要提交表单中其他数据,发现提及的并不是很多,后来在同事的帮助下,使用ajaxfileupload最终完成了文件上传与其他提交的操作,现在分享给大家,希望大家能有有所帮助。本文主要介绍了使用Ajax进行文件与其他参数的上传功能(java开发),非常不错,具有参考借鉴价值,需要的朋友参考下吧,希望能帮助到大家。

文件上传:

操作步骤:

1 导入jar包:

我们在使用文件上传时,需要使用到两个jar包,分别是commons-io与commons-fileupload,在这里我使用的两个版本分别是2.4与1.3.1版本的,需要使用JS文件与jar包最后会发给大家一个连接(如何失效请直接我给留言,我会及时更改,谢谢)。

2 修改配置文件:

当我们导入的jar包是不够的,我们需要使用到这些jar包,由于我当时使用的是SSM框架,所以我是在application-content.xml中配置一下CommonsMultipartResolver,具体配置方法如下:

104857600

4096

3 JSP文件:

大家对form表单提交问价的方式很熟悉,但是我们有很多情况下并不能直接使用form表单方式直接提交。这时候我们就需要使用Ajax方式提交,Ajax有很多的好处,比如当我们不需要刷新页面获希望进行局部刷新的时候,我们就可以使用Ajax。

function saveUser() {

            var file = document.getElementById("file").files[0]

            //原生ajax实现文件上传

            var formData = new FormData()

            if (file) {

                formData.append("file", file)

                console.log(file)

            }

            //得到xhr对象

            var xhr = null

            if (XMLHttpRequest) {

                xhr = new XMLHttpRequest()

            } else {

                xhr = new ActiveXObject("Microsoft.XMLHTTP")

            }

            xhr.open("post", "http://www-test.mianyazhu.com/supplier/fileSupplier/file/upload/supplier", true)//设置提交方式,url,异步提交

//            xhr.setRequestHeader("Content-Type","multipart/form-data")

            xhr.onload = function () {

                var data = xhr.responseText    //得到返回值

                console.log(data)

            }

            xhr.send(formData)

        }