Skip to content

图片预先显示,并转为二进制流,上传到ajax

Notifications You must be signed in to change notification settings

Tianruo/imgUp-blob

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 

Repository files navigation

imgUp-blob

图片预先显示,并转为二进制流,上传到ajax

//点击上传图片,之后,创建oo临时对象,push进对应的list数组

function imgUp(tt, ii) {
    if($(tt).val()!=''){
        if ($(tt).parent().parent().find('.preview').length < 3) {
            var $file = $(tt);
            var fileObj = $file[0];
            var windowURL = window.URL || window.webkitURL;
            var dataURL;
            $file.parent().parent().append('<img class="preview">');
            var $img = $file.parent().parent().find('.preview:last');
            var _name = $(tt)[0].files[0].name;
            var oo = {};
            oo.fileName = _name;


            if (fileObj && fileObj.files && fileObj.files[0]) {
                dataURL = windowURL.createObjectURL(fileObj.files[0]);//核心:根据文件创造一个URL,blob对象,先显出来
                getBase64(dataURL)//传入blob的url,可以得到真正的图片二进制流码
                    .then(function (base64) {
                        oo.file = base64;
                        imgAll['list' + ii].push(oo);//ok,保存到imgAll对象里,等着ajax上传即可
                    }, function (err) {
                        console.log(err);
                    });
                $img.attr('src', dataURL);
            } else {
                dataURL = $file.val();
                var imgObj = document.querySelector(".preview");
                // 两个坑:
                // 1、在设置filter属性时,元素必须已经存在在DOM树中,动态创建的Node,也需要在设置属性前加入到DOM中,
                先设置属性在加入,无效;
                // 2、src属性需要像下面的方式添加,上面的两种方式添加,无效;
                imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
            }
        } else {
            layer.alert('最多只能上传3张图片哦', {icon: 6});
        }
        $(tt).parent().parent().find('.eva_con4 span').html($(tt).parent().parent().find('img').length-2+'/3');
    }

}
//传入图片路径,返回base64(修改:去除前缀)
function getBase64(img) {
    function getBase64Image(img, width, height) {//width、height调用时传入具体像素值,控制大小 ,不传则默认图像大小
        var canvas = document.createElement("canvas");
        canvas.width = width ? width : img.width;
        canvas.height = height ? height : img.height;

        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        var dataURL2 = canvas.toDataURL();//核心:canvas.toDataURL()把canvas图片转为二进制流码
        var index = dataURL2.indexOf('base64') + 7;
        var dataURL = dataURL2.slice(index);
        return dataURL;
    }

    var image = new Image();
    image.src = img;
    var deferred = $.Deferred();
    if (img) {
        image.onload = function () {
            deferred.resolve(getBase64Image(image));//将base64传给done上传处理
        }
        return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']
    }
}

About

图片预先显示,并转为二进制流,上传到ajax

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published