FileReader实现图片预览,并上传(js代码)

var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i; //控制格式ajax

var iMaxFilesize = 2097152; //控制大小2Msegmentfault

function preview(file) {api

  var reader = new FileReader();app

  if (!rFilter.test(file.type)) { 异步

  alert("文件格式必须为图片"); ide

    return; url

  } spa

  if (file.size > iMaxFilesize) {code

    alert("图片大小不能超过2M");regexp

    return;

  }

  reader.onload = function(e) {

    //图片的base64格式,能够直接当成img的src属性

    var $img = $('<img>').attr("src", e.target.result);

    $(".preview").append($img);

    //使用FormData的最大优势就是咱们能够异步上传一个二进制文件,在此用来上传图片

    var formdata = new FormData();//建立一个formdata对象

    //经过append(key, value)来添加数据,若是指定的key不存在则会新增一条数据,若是key存在,则添加到数据的末尾具体可看http://www.javashuo.com/article/p-tiovbwqw-ka.html
    formdata.append("image",file.files[0]);
   $.ajax({
    url: "/s/api?cmd=Image.add&tip=video_banner",
    type:"POST",
    cache:false,
    data:formdata,
    processData:false, // 告诉jQuery不要去处理发送的数据
    contentType:false, // 告诉jQuery不要去设置Content-Type请求头
    success:function(data){
    sign = data.res.sign;
    }
   });

  };

  reader.readAsDataURL(file);

}

  $('[type=file]').change(function(e) {

    var file = e.target.files[0];

    preview(file);

  });

相关文章
相关标签/搜索