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

发布时间：2020-12-15 21:07:49 所属栏目：百科来源：网络整理

导读：1. 认识FormData对象 FormData是Html5新加进来的一个类,可以模拟表单数据构造函数解释 FormData (optional HTMLFormElement form) (可选) 一个HTML表单元素,可以包含任何形式的表单控件,包括文件输入框. 方法 void append(DOMString name,DOMString value)

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">
    <"file" name="img">
    <"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 () {
    0];

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

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

upload(){
$.ajaxFileUpload({
        url: 'a.php',161)">//用于文件上传的服务器端请求地址
        secureuri: false,161)">//一般设置为false
        fileElementId: 'file',161)">//文件上传空间的id属性 
        dataType: 'HTML',161)">//返回值类型 一般设置为json
        success: function (data,status) //服务器成功响应处理函数 {                
            $("#img1").attr("src",data);
            addI(data);
        },error: （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!