JavaScript实现无刷新上传预览图片功能
无刷新上传功能如何实现?手写无刷新上传要用到两个东西,FormData和FileReader。
FileReader用于图片浏览。
FormData用于ajax请求。
html代码
先创建表单跟图片的容器
javascript代码
FormData:
通过FormData对象可以组装一组用XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据,因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data,则通过FormData传输的数据格式和表单通过submit()方法传输的数据格式相同。
在这里FormData对象是用来获取form表单内的所有input数据,然后使用ajax请求发送数据到指定url,就不会出现表单提交时跳转的情况。
functiondoUpload(){ varformData=newFormData($("#oForm")[0]); console.log(formData); $.ajax({ url:'pp', type:'POST', data:formData, async:false, cache:false, contentType:false, processData:false, success:function(returndata){ console.log(returndata); }, error:function(returndata){ console.log(returndata); } }); }
FileReader:
FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用File或Blob对象指定要读取的文件或数据。
在这里FileReader对象是用来获取file上来的图片并把图片转换成DataURL形式显示在事先创建的容器中。
functionreadAsDataURL(){ //检验是否为图像文件 varfile=document.getElementById("file").files[0]; if(!/image\/\w+/.test(file.type)){ alert("看清楚,这个需要图片!"); returnfalse; }else{ varreader=newFileReader(); //将文件以DataURL形式读入页面 reader.readAsDataURL(file); reader.onload=function(e){ varresult=document.getElementById("img"); //显示文件 result.src=this.result; } } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。