ajax實現檔案上傳

風靈使發表於2018-11-24

沒有使用外掛

一、單檔案上傳

    <!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>

測試都通過了！！！

相關文章