JavaScript实现无刷新上传预览图片功能

2019-11-19 15:55:17

字体：大中小

来源：转载

供稿：网友

无刷新上传功能如何实现？手写无刷新上传要用到两个东西，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 ;    }  }}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：js如何编写简单的ajax方法库

下一篇：基于jquery实现多选下拉列表