HTML5 Mobile Upload-蒲公英云

HTML5移动端图片上传并前端预览

用到了HTML5的FileReader对象，主要思想是由于移动端的网络不比PC快，故需要做上传前预览，采用base64编码目前是比较好的方法。前端用FileReader获取图片并转为base64编码并预览，上传到服务器由后台解码生成图片并保存到磁盘。

核心代码：

$('input[type=file]').change(function(){
    /*文件上传loadding*/
    $('#upload_loading').css('display','block');
    var vtop=$("body").scrollTop()+120;
    $('.pop-loading').css('top',vtop);
    /*定义对象变量*/
    var liObj=$(this).parent('a').parent('li');
    var aObj=$(this).parent('a.cert-btn-blue-add');
    var liidx=liObj.index();
    var fileval=$(this).val();
    var oFile=this.files[0];
    /*文件格式验证*/
    var fileval=$(this).val();
    var suffix=fileval.substring(fileval.lastIndexOf('.')+1,fileval.length);
    if(suffix!='jpg' && suffix!='png' && suffix!='jpeg'){
        alert('上传文件类型需为jpg、jpeg、png图片格式');
        liObj.find('input[type=file]').val('');
        $('#upload_loading').css('display','none');
        return false;
    }
    /*文件大小验证限制*/
    if(oFile.size>1024*512*1){
        alert('图片超过512kb，请到PC端官网上传');
        liObj.find('input[type=file]').val('');
        $('#upload_loading').css('display','none');
        return false;
    }            
    /*图片预览及上传*/
    setTimeout(function(){
        var oReader = new FileReader();
        oReader.onload = function(e){
            var sBase64 = e.target.result;
            if(window.gIsAndroid && sBase64.indexOf("data:image/") != 0){
                var sMime = sName.split(".").pop().toLowerCase();
                sBase64 = sBase64.replace("base64,", "image/" + sMime + ";base64,");
            }
            var src=sBase64;
            var img = new Image();
            img.onload = function () {
                liObj.append(img);
                liObj.find('a.cert-arrow-del').show();
            };
            img.src = typeof src === 'string' ? src : URL.createObjectURL(src);
            /*压缩后重新图片赋值*/
            //var obj = compress(img,70);
            //img.src=obj.newImageData;
            aObj.hide();
            hasimgArr[liidx-1]=true;
            sBase64 = null;
            e.target.result=null;
            /*上传到服务器*/
            $.ajax({
                type:"POST",
                timeout:20000,
                url:"upfilehtml.do",
                data:{filebase64:src,size:src.length},
                dataType: "json",
                success: function(data){
                    if(data.flag){
                    }else {
                        alert('上传失败，建议到PC端官网上传');
                        liObj.find('img').remove();
                        liObj.find('a.cert-arrow-del').hide();
                        liObj.find('a.cert-btn-blue-add input').val('');
                        setTimeout(function(){
                            aObj.show();
                        },100);
                    }
                    $('#upload_loading').css('display','none');
                    src=null;
                }
            });
        };
        oReader.readAsDataURL(oFile);
    },500);
});

压缩代码（采用canvas画图再toDataURL转为图片base64编码），代码如下：

function compress(source_img_obj, quality, output_format) {
    var mime_type = "image/jpeg";
    if(output_format!=undefined && output_format=="png"){
      mime_type = "image/png";
    }
    var cvs = document.createElement('canvas');
    cvs.width = source_img_obj.width;
    cvs.height = source_img_obj.height;
    var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);
    var newImageData = cvs.toDataURL(mime_type, quality/100);
    return {
      "newImageData": newImageData
    };
}