ajax实现文件上传

原创 2017年09月04日 22:52:21

没有使用插件

一、单文件上传

<!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"这个属性,另外使用的接口也是多文件上传的接口。

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

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

测试都通过了!!!

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

相关文章推荐

ajax实现的文件上传

  • 2008年11月06日 13:14
  • 114KB
  • 下载

jQuery插件AjaxFileUpload实现ajax文件上传

jQuery插件AjaxFileUpload用来实现ajax文件上传,本例是图片上传demo 1、引入AjaxFileUpload插件相关的js 2、实现上传功能部分代码 商品图片 ...

jQuery easyui-filebox+ajax+PHP实现文件上传并恢复备份

最近开发一个数据备份恢复的功能,该项目基于PHP+Mysql+Apache的架构,因此这个功能用easyui-filebox+ajax+PHP实现。 1.首先HTML部分: ...

Jquery 的ajax实现文件上传,校验。

Html代码: ...

jQuery+php实现ajax文件上传 For ASP

  • 2016年01月02日 14:11
  • 17KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ajax实现文件上传
举报原因:
原因补充:

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