登录  /  注册

Ajax之文件异步上传的多种方法

小云云
发布: 2017-11-20 14:09:54
原创
1668人浏览过

ajax的核心是javascript对象xmlhttprequest。该对象在internet explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,xmlhttprequest使您可以使用javascript向服务器提出请求并处理响应,而不阻塞用户。ajax对服务器没什么要求,可以为java ee应用程序,.net应用程序和其他类型的应用程序服务。可以通过ajax,可以编写javascript代码来改进html,创建出丰富的交互性用户体验。

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(&#39;userName&#39;, userName);
    fm.append(&#39;img&#39;, img);    var request = new XMLHttpRequest();
    request.open(&#39;POST&#39;, &#39;submitform.php&#39;);
    request.send(fm);
}
登录后复制

3. 使用Ajax实现

$(&#39;#btn&#39;).click(function () {    var userName = document.myForm.userName.value;    var img = document.myForm.img.files[0];    var fm = new FormData();
    fm.append(&#39;userName&#39;, userName);
    fm.append(&#39;img&#39;, img);
    $.ajax(
        {
            url: &#39;submitform.php&#39;,
            type: &#39;POST&#39;,
            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)  //服务器成功响应处理函数        {                
            $("#img1").attr("src", data);
            addI(data);
        },
        error: function (data, status, e)//服务器响应失败处理函数        {
            alert(e);
        }
    }   
);
}
登录后复制

对于PHP就可以使用Files全局数组拿到文件属性,POST全局数组拿到userName的值

以上就是Ajax简单实现文件异步上传的多种方法,希望对大家有帮助。

相关推荐:

ajax实时刷新处理的实现方法

几种javascript实现原生ajax的方法

ajax的简单介绍

以上就是Ajax之文件异步上传的多种方法的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号