html5ajax上传的简单介绍

如何用ajax上传文件

用到两个对象

第一个对象：FormData

第二个对象：XMLHttpRequest

目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象，但IE9尚未支持 FormData 对象，还在用IE6 ? 只能仰天长叹....

有了这两个对象，我们可以真正的实现Ajax方式上传文件。

示例代码：

!DOCTYPE html

html

head

titleHtml5 Ajax 上传文件/title

script type="text/javascript"

function UpladFile() {

var fileObj = document.getElementByIdx_x_x("file").files[0]; // 获取文件对象

var FileController = "../file/save"; // 接收上传文件的后台地址

// FormData 对象

var form = new FormData();

form.append("author", "hooyes"); // 可以增加表单数据

form.append("file", fileObj); // 文件对象

// XMLHttpRequest 对象

var xhr = new XMLHttpRequest();

xhr.open("post", FileController, true);

xhr.onload = function () {

alert("上传完成!");

};

xhr.send(form);

}

/script

/head

body

input type="file" id="file" name="myfile" /

input type="button" onclick="UpladFile()" value="上传" /

/body

/html

很简洁的代码，便可以达到Ajax方式上传文件，上面的代码中使用input type="file" /这种传统的选择文件的方法产生文件对象，HTML5还支持使用多种更灵活的方式，如拖拽文件到指定的元素上产生。

相关问答

Q1: 如何用html5自带验证 但是用ajax提交

//H5自带的验证是比较简单的验证，不完美，只适合比较简单的验证。具体使用方法如下：

//需求：用户名：不能为空，长度在6至12之间，内容为英文

//HTML

input type="text" id="user" required minlength=6 maxlength=12 pattern="^[a-zA-Z]+$"

//js

var user = document.getElementById("user");

user.onblur = function(){

if(user.validity.valueMissing){

user.setCustomValidity("用户名为空.");

}else if(user.validity.tooShort){

user.setCustomValidity("用户名过短.");

}else if(user.validity.tooLong){

user.setCustomValidity("用户名过长.");

}else if(user.validity.patternMismatch){

user.setCustomValidity("用户名输入错误.");

}

}

//required属性：验证是否为空

//pattern属性 ：匹配正则

//validity属性：是H5底层的逻辑提供，原本已经存在的。元素通过elem.validity获得validityState对象

//例如可以获得的对象有：valueMissing 验证是否为空 返回true或false

//再例如：patternMismatch 验证是否匹配正则 同样返回 true或false

怎么使用ajax提交？

你可以将我上面的代码封装成一个check方法，用来检查表单内容是否正确，在用户点击提交按钮的时候不是直接submit表单，而是触发一个表单提交前验证方法check，验证通过后，将表单中的元素获取到，保存在一个变量中下面以jquery的ajax为例：

var jsonData={'userName':user.value}

$.ajax({

    url:'接口地址'，

    type：'post',

    dataType:'json',

    data:jsonData,

    success:function(data){

        //发送成功后的回调，data包含成功时后台返回的数据

    },

    error:function(res){

        //发送失败时的回调，res包含失败时的后台返回的数据

    }

})

//特别要注意一点的是如果要用ajax发送数据，就不要将提交按钮的type设置为submit，否则form还是会自动提交

Q2: 基于HTML5的多图Ajax上传的php后台接收并获取图片宽高等信息

//但是为什么我用file_exists()判断文件是否存在时，得到的结果却是不存在呢

这句话后面加一句

$file='../uploads/' . $file;

你都把文件存成这个文件了 还用原来的文件名判断能行吗

后面的错误也是一样的

也可以直接把后面两个$file改掉

if(!file_exists('../uploads/' . $file)){

$src_info = @getimagesize('../uploads/' . $file);