html5ajax上传的简单介绍
如何用ajax上传文件
用到两个对象
创新互联拥有网站维护技术和项目管理团队,建立的售前、实施和售后服务体系,为客户提供定制化的网站设计制作、做网站、网站维护、成都IDC机房托管解决方案。为客户网站安全和日常运维提供整体管家式外包优质服务。我们的网站维护服务覆盖集团企业、上市公司、外企网站、购物商城网站建设、政府网站等各类型客户群体,为全球近1000家企业提供全方位网站维护、服务器维护解决方案。
第一个对象: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还支持使用多种更灵活的方式,如拖拽文件到指定的元素上产生。
如何用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还是会自动提交
基于HTML5的多图Ajax上传的php后台接收并获取图片宽高等信息
//但是为什么我用file_exists()判断文件是否存在时,得到的结果却是不存在呢
这句话后面加一句
$file='../uploads/' . $file;
你都把文件存成这个文件了 还用原来的文件名判断能行吗
后面的错误也是一样的
也可以直接把后面两个$file改掉
if(!file_exists('../uploads/' . $file)){
$src_info = @getimagesize('../uploads/' . $file);
当前名称:html5ajax上传的简单介绍
网页链接:http://myzitong.com/article/dsecspd.html