最简单Ajax文件异步上传

原创 2016年05月30日 23:10:13

1. 认识FormData对象

FormData是Html5新加进来的一个类,可以模拟表单数据

构造函数 解释
FormData (optional HTMLFormElement form) (可选) 一个HTML表单元素,可以包含任何形式的表单控件,包括文件输入框.

方法

void append(DOMString name, DOMString value)

  • name 表单元素名称
  • value 表单元素要传递的值

<form name="myForm"  enctype="multipart/form-data">
    <input type="text" name="userName">
    <input type="file" name="img">
    <input type="button" id="btn" value="submit">
</form>

2. 使用javascript简单实现

function upload() {
    var userName = document.myForm.userName.value;
    var img = document.myForm.img.files[0];
    var fm = new FormData();
    fm.append('userName', userName);
    fm.append('img', img);

    var request = new XMLHttpRequest();
    request.open('POST', 'submitform.php');
    request.send(fm);
}

3. 使用Ajax实现

$('#btn').click(function () {
    var userName = document.myForm.userName.value;
    var img = document.myForm.img.files[0];

    var fm = new FormData();
    fm.append('userName', userName);
    fm.append('img', img);
    $.ajax(
        {
            url: 'submitform.php',
            type: 'POST',
            data: fm,
            contentType: false, //禁止设置请求类型
            processData: false, //禁止jquery对DAta数据的处理,默认会处理
            //禁止的原因是,FormData已经帮我们做了处理
            success: function (result) {
                //测试是否成功
                //但需要你后端有返回值
                alert(result);
            }
        }
    );
});

4. ajaxfileupload.js插件实现Ajax文件上传

function upload(){
$.ajaxFileUpload({
        url: &#39;a.php&#39;, //用于文件上传的服务器端请求地址
        secureuri: false, //一般设置为false
        fileElementId: &#39;file&#39;, //文件上传空间的id属性  
        dataType: &#39;HTML&#39;, //返回值类型 一般设置为json
        success: function (data, status)  //服务器成功响应处理函数
        {                
            $(&quot;#img1&quot;).attr(&quot;src&quot;, data);
            addI(data);
        },
        error: function (data, status, e)//服务器响应失败处理函数
        {
            alert(e);
        }
    }   
);
} 

  • 对于PHP就可以使用Files全局数组拿到文件属性,POST全局数组拿到userName的值
版权声明:本文为博主原创文章,未经博主允许不得转载。

简单实现Ajax异步上传文件

认识FormData对象 XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,...

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

1. 认识FormData对象 FormData是Html5新加进来的一个类,可以模拟表单数据 构造函数 解释 FormData (opti...

ajax异步上传文件

  • 2017年02月20日 10:36
  • 10.69MB
  • 下载

ajax异步上传文件js

  • 2014年02月20日 14:25
  • 7KB
  • 下载

Ajax实现文件异步上传

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

SpringMVC+Ajax异步文件上传

  • 2017年07月30日 13:03
  • 28.06MB
  • 下载

FormData+AJAX+SpringMVC跨域异步上传文件

之前用ajaxsubmit想做跨域post提交文件并返回文件地址 ,无果,转而采用第二种方式。 利用FormData,ajax,spingMVC jsp页面 ...

Ajax异步上传文件

  • 2017年11月19日 16:38
  • 90KB
  • 下载

java web ajax异步提交方式上传文件

  • 2017年11月15日 16:58
  • 3.96MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:最简单Ajax文件异步上传
举报原因:
原因补充:

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