@H_404_0@无刷新上传功能如何实现?手写无刷新上传要用到两个东西,FormData和FileReader。
@H_404_0@FileReader 用于图片浏览。 @H_404_0@FormData 用于ajax请求。 @H_404_0@HTML代码
@H_404_0@先创建表单跟图片的容器javascript代码
@H_404_0@FormData: @H_404_0@通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据, 因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ,则通过FormData传输 的数据格式和表单通过submit() 方法传输的数据格式相同。 @H_404_0@在这里FormData对象是用来获取form表单内的所有input数据,然后使用ajax请求发送数据到指定url,就不会出现表单提交时跳转的情况。文件
var file = document.getElementById("file").files[0];
if(!/image\/\w+/.test(file.type)){
alert("看清楚,这个需要图片!");
@H_404_0@以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 return false;
}else{
var reader = new FileReader();
//将<a href="/tag/wenjian/" target="_blank" class="keywords">文件</a>以Data URL形式读入<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>
reader.readAsDataURL(file);
reader.onload=function(e){
var result=document.getElementById("img");
//<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a><a href="/tag/wenjian/" target="_blank" class="keywords">文件</a>
result.src= this.result ;
}
}
}