h5 图片上传

//图片上传

var input = document.getElementById("upload");

if(typeof FileReader === 'undefined'){

result.innerHTML = "抱歉，你的浏览器不支持 FileReader";

input.setAttribute('disabled','disabled');

}else{

input.addEventListener('change',readFile,false);

}

var img=[];

var imgList = [];

var imglist=$(".img_list .img").length;

function readFile(){

var file = this.files[0];

img.push(file);

var reader = new FileReader();

reader.readAsDataURL(file);

reader.onload = function(){

var result=this.result;

dealImage(result, {width : 750}, function(base){

$(".img img").src = base;

// console.log( "压缩前:"+result.length/1024+"压缩后：" + base.length / 1024 + " " + base);

imgList.push(base);

return imgList;

});

for(var i=0;i<=imglist;i++){

var html = '<div class="img" id="'+ i +'"><a href="javascript:void(0)" class="close j-close"></a><img src="' + result + '"></div>';

}

$(".add").before(html);

img_del();

img_list()

}

}

//图片数量

function img_list() {

imglist = $(".img-list .img").length;

imglist > 5 ? $(".add").hide():$(".add").show();

}

//删除图片

function img_del() {

$(".img-list").on("click",".j-close",function (i) {

var par = $(this).parent();

var num = par.index();

removeByValue(imgList,num);

par.remove();

img_list();

});

}

//去除数组的图片

function removeByValue(arr, val) {

for(var i=0; i<arr.length; i++) {

if(i == val) {

arr.splice(i, 1);

break;

}

}

}

 

// 调用函数处理图片 　　　　　　　　　　　　　　　　

 

function dealImage(path, obj, callback){

var img = new Image();

img.src = path;

img.onload = function(){

var that = this;

// 默认按比例压缩

var w = that.width,

h = that.height,

scale = w / h;

w = obj.width || w;

h = obj.height || (w / scale);

var quality = 0.7; // 默认图片质量为0.7

//生成canvas

var canvas = document.createElement('canvas');

var ctx = canvas.getContext('2d');

// 创建属性节点

var anw = document.createAttribute("width");

anw.nodeValue = w;

var anh = document.createAttribute("height");

anh.nodeValue = h;

canvas.setAttributeNode(anw);

canvas.setAttributeNode(anh);

ctx.drawImage(that, 0, 0, w, h);

// 图像质量

if(obj.quality && obj.quality <= 1 && obj.quality > 0){

quality = obj.quality;

}

// quality值越小，所绘制出的图像越模糊

var base64 = canvas.toDataURL('image/jpeg', quality );

// 回调函数返回base64的值

callback(base64);

}

}