h5上传图片(移动端)

 html:

<input type="file" class="add-img-input" accept="image/jpg,image/jpeg,image/png,image/gif" multiple="">

css:

构造自己想要的样子,将定位于input标签上(比如:+,相机)

js:

 $(".add-img-input").change(function(){   

var $me = $(e.currentTarget);
var $box = this.$el.find(".add-img-bg");//一个img标签,用来放图片
var reader = new FileReader(); //HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型。
var file = $me.get(0).files[0];

var that = this;
reader.readAsDataURL(file);  //readAsDataURL方法会使用base-64进行编码
reader.onload = function(e){
  $.showPreloader("上传中");//sm.js里的一个方法。
  var fileOfBase64 = e.target.result;
  $.ajax({
    type:"post",
    url: "要上传照片交互用的url",
    data: {imgData: fileOfBase64.substr(fileOfBase64.indexOf(',')+1)},
    dataType: "json",
    success: function(rs){
      $.hidePreloader(); //sm.js里的一个方法。
      if(rs && rs.errno == 0){
        $.toast("上传成功"); //sm.js里的一个方法。
        $box.attr("src",fileOfBase64); // img赋予图片路径


        /*fileOfBase64 = null;
        _$li = null;
        html = null;
        reader = null;
        that.logo_url = rs.data.url;*/

        (上传完毕后清空保存的所有,选择性使用)

      }else{
        $.toast("上传失败,请稍后重试");
      }
    },
    error: function(){
      $.hidePreloader();
      $.toast("上传失败,请稍后重试");
    },
  });
}

})

 

posted @ 2016-08-03 17:38  大米小麦22  阅读(354)  评论(0编辑  收藏  举报