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

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

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