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("上传失败,请稍后重试");
},
});
}
})