无刷新上传功能如何实现?手写无刷新上传要用到两个东西,formdata和filereader。
filereader 用于图片浏览。
formdata 用于ajax请求。
html代码
先创建表单跟图片的容器
<form enctype="multipart/form-data" id="oform"> <input type="file" name="file" id="file" onchange="readasdataurl()" /> <input type="button" value="提交" onclick="doupload()" /> </form> <div> <img alt="" id="img"/> </div>
javascript代码
formdata:
通过formdata对象可以组装一组用 xmlhttprequest发送请求的键/值对。它可以更灵活方便的发送表单数据, 因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ,则通过formdata传输 的数据格式和表单通过submit() 方法传输的数据格式相同。
在这里formdata对象是用来获取form表单内的所有input数据,然后使用ajax请求发送数据到指定url,就不会出现表单提交时跳转的情况。
function doupload() { var formdata = new formdata($( "#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上来的图片并把图片转换成data url形式显示在事先创建的 容器中。
function readasdataurl(){ //检验是否为图像文件 var file = document.getelementbyid("file").files[0]; if(!/image\/\w+/.test(file.type)){ alert("看清楚,这个需要图片!"); return false; }else{ var reader = new filereader(); //将文件以data url形式读入页面 reader.readasdataurl(file); reader.onload=function(e){ var result=document.getelementbyid("img"); //显示文件 result.src= this.result ; } } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问, 点击进行留言回复!!
2020-07-21 html5如何监听veido的全屏 + css的字体间距 + JS的window.open() + 软技能svn与git
html+css+js适合前端小白的实战全解(超详细)——2048小游戏(二)
在使用@angular/cli创建的angular项目上添加postcss等一系列移动端自适应插件
网友评论