ajax实现文件上传

最新推荐文章于 2019-09-09 09:50:06 发布

.NET跨平台

最新推荐文章于 2019-09-09 09:50:06 发布

阅读量196

点赞数

分类专栏： Html+Javascript

Html+Javascript 专栏收录该内容

258 篇文章 12 订阅

订阅专栏

没有使用插件

一、单文件上传

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <title></title>
    </head>
    <body>
    <form id="uploadForm" enctype="multipart/form-data">
        文件:<input id="file" type="file" name="file"/>
    </form>
    <button id="upload">上传文件</button>
    </body>
    <script type="text/javascript">
        $(function () {
            $("#upload").click(function () {
                var formData = new FormData($('#uploadForm')[0]);
                $.ajax({
                    type: 'post',
                    url: "http://192.168.1.101:8080/springbootdemo/file/upload",
                    data: formData,
                    cache: false,
                    processData: false,
                    contentType: false,
                }).success(function (data) {
                    alert(data);
                }).error(function () {
                    alert("上传失败");
                });
            });
        });
    </script>
    </html>

二、多文件上传

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <title></title>
    </head>
    <body>
    <form id="uploadForm" enctype="multipart/form-data">
        文件:<input type="file" name="file" multiple="multiple"/><br>
    </form>
    <button id="upload">上传文件</button>
    </body>
    <script type="text/javascript">
        $(function () {
            $("#upload").click(function () {
                var formData = new FormData($('#uploadForm')[0]);
                $.ajax({
                    type: 'post',
                    url: "http://192.168.1.101:8080/springbootdemo/file/uploadFiles",
                    data: formData,
                    cache: false,
                    processData: false,
                    contentType: false,
                }).success(function (data) {
                    alert(data);
                }).error(function () {
                    alert("上传失败");
                });
            });
        });
    </script>
    </html>

这个是多选上传，关键是multiple="multiple"这个属性，另外使用的接口也是多文件上传的接口。

当然也可以使用单文件上传的模式，多次选择就可以了，只不过接口也是要使用多文件上传的接口。

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <title></title>
    </head>
    <body>
    <form id="uploadForm" enctype="multipart/form-data">
        文件:<input type="file" name="file"/><br>
        文件:<input type="file" name="file"/><br>
        文件:<input type="file" name="file"/><br>
    </form>
    <button id="upload">上传文件</button>
    </body>
    <script type="text/javascript">
        $(function () {
            $("#upload").click(function () {
                var formData = new FormData($('#uploadForm')[0]);
                $.ajax({
                    type: 'post',
                    url: "http://192.168.1.101:8080/springbootdemo/file/uploadFiles",
                    data: formData,
                    cache: false,
                    processData: false,
                    contentType: false,
                }).success(function (data) {
                    alert(data);
                }).error(function () {
                    alert("上传失败");
                });
            });
        });
    </script>
    </html>