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

})

h5上传图片（移动端）

标签：

原文地址：http://www.cnblogs.com/itcoco/p/5733804.html