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实现文件上传

1 . 先看效果(这个效果需要添加Ace的css,这里就不提供源代码了) 2. 导入上传所需的jar包 3 . 配置servlet.xml(不是web.xml) ...
  • A13432421434
  • A13432421434
  • 2017年05月17日 11:42
  • 378

Ajax简单实现文件异步上传的多种方法

1. 认识FormData对象 FormData是Html5新加进来的一个类,可以模拟表单数据 构造函数 解释 FormData (opti...
  • oPerform
  • oPerform
  • 2017年06月21日 15:31
  • 1402

Ajax实现文件异步上传

总结自极客学院ajax文件上传地址一、异步上传的概念所谓异步上传,就是对比传统的表单提交,实现一种页面局部刷新的功能。 传统的表单提交一般都是点击某个提交按钮,然后真个页面处于一种被锁定的状态,上传...
  • sinat_24044741
  • sinat_24044741
  • 2016年09月20日 09:22
  • 1992

js脚本实现文件上传 【原生态ajax实现】

需求:通过ajax保存表单,在保存表单成功后调用回调函数上传图片,这里不再使用网络上的上传插件,直接使用javascript进行上传,处理程序(ashx)进行处理,其中涉及到个浏览器的兼容性问题及方法...
  • wupd2014
  • wupd2014
  • 2016年02月26日 12:08
  • 746

ajax与html5实现异步文件上传

ajax与html5实现异步文件上传        在之前的两篇文章中,分别介绍了XMLHttpRequest对象和iframe伪异步文件上传。在此就不再介绍介绍XMLHttpRequest对象了。之...
  • aozeahj
  • aozeahj
  • 2016年11月02日 15:52
  • 665

基于ajax实现文件上传并显示进度条

这篇文章主要介绍了基于ajax实现文件上传并显示进度条,需要的朋友可以参考下 下面给大家分享下基于ajax实现文件上传并显示进度条。在jsp部分,需要设计一个表单,form的属性添加 e...
  • zjd934784273
  • zjd934784273
  • 2016年01月08日 11:33
  • 878

html5 ajax文件上传的进度条实现

html5 ajax文件上传的进度条实现 html5_2.html #parent{width:550px; height:10px; border:2px s...
  • LanSeTianKong12
  • LanSeTianKong12
  • 2016年08月09日 09:53
  • 2768

struts2+AJAX文件上传进度条的基本实现

最近想要用struts2来
  • qq791967024
  • qq791967024
  • 2014年10月23日 21:36
  • 2039

HTML5结合ajax实现文件上传以及进度显示

HTML5结合ajax实现文件上传以及进度显示; 带进度条的HTML5上传文件(使用XMLHttpRequest对象; HTML5之FileReader的使用...
  • xw505501936
  • xw505501936
  • 2015年09月07日 19:23
  • 1623

ssh和ajax上传文件

ssh3中利用ajaxfileupload无刷新上传文件 开源中国 发表于 2014-09-03 20:29:18 1.jsp代码:(    注意这里的jquer...
  • u011120983
  • u011120983
  • 2015年10月27日 17:25
  • 422
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ajax实现文件上传
举报原因:
原因补充:

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