h5+FileReader

页面文件标签

 <input type="file" id="GIF_action_picture" name="file_action_picture"                                           onchange="selectImage(this,'GIF_action_picture','image2');"   accept="image/gif,image/jpeg,image/jpg,image/png" />

js

//上传图片 id是文件id imageId是图片id  function selectImage(file,id,imageId) {    if (!file.files || !file.files[0]) {        return;    }    var suffix=file.files[0].name.replace(/.+\./,"");    var size = file.files[0].size;    var type = file.files[0].type;    var reader = new FileReader();    reader.onload = function (evt) {        /*将bsae64码转成jpeg图片*/      var result = evt.target.result;        var str1 = result.substr(result.indexOf("base64"));        result = "data:image/jpg;" + str1;        $('#'+imageId+'').attr('src',result);        $('#'+id+'').parent().css("display","none");        $('#'+imageId+'').parent().css("display","block");        /*将bsae64码转成jpeg图片*/        compressImg(result, 280, function (data) {//压缩完成后执行的callback            document.getElementById(''+id+'').src = data;            image = data;        },suffix);    }   reader.readAsDataURL(file.files[0]);}//function compressImg(imgData, maxWidth, onCompress,suffix) {    if (!imgData) return;    onCompress = onCompress || function () { };    maxWidth = maxWidth||280 ;//默认最大宽度280px    var canvas = document.createElement('canvas');    var img = new Image();    img.onload = function () {        if (img.width > maxWidth) {//按最大高度等比缩放            img.height *= maxWidth / img.width;            img.width = maxWidth;        }        canvas.height = img.height;        canvas.width = img.width;        var ctx = canvas.getContext("2d");        ctx.clearRect(0, 0, canvas.width, canvas.height); // canvas清屏        //重置canvans宽高 canvas.width = img.width; canvas.height = img.height;        ctx.drawImage(img, 0, 0, img.width, img.height); // 将图像绘制到canvas上         onCompress(canvas.toDataURL("image/jpg"));//必须等压缩完才读取canvas值，否则canvas内容是黑帆布    };    // 记住必须先绑定事件，才能设置src属性，否则img没内容可以画到canvas    img.src = imgData;}