plupload.js上传插件中实现预览图片

本文介绍了如何在使用plupload.js上传图片添加完成后预览图片的实现方法,(在使用之前请引入plupload.js文件)。

//预览图片方法
function previewImage(file, callback)
{
    if (!file || !/image\//.test(file.type)) return false;//首先判断是否为图片文件
    console.log('FilesAdded: '+ JSON.stringify(file));
    if (file.type == 'image/gif') {
        //gif这里使用FileReader进行预览,因为mOxie.Image只支持jpg和png格式文件
        var fr = new mOxie.FileReader();

        fr.onload = function () {
            callback(fr.result);
            fr.destory();
            fr = null;
        };

        fr.readAsDataURL(file.getSource());
    } else {
        var image = new mOxie.Image();
        image.onload = function () {
            //使用downsize压缩下要预览的图片,可以指定宽高,默认为自适应宽高
            image.downsize();
            //得到图片的src为base64编码
            var src = image.type == 'image/jpeg' ? image.readAsDataURL('image/jpeg') : image.readAsDataURL();
            callback && callback(src);
            image.destroy();
            image = null;
        };

        image.load(file.getSource());
    }
}

previewImage('上传的文件对象', function (src) {
    //这里编写处理的逻辑
});

END.

posted @ 2021-03-03 17:20  不进腾讯不改名  阅读(308)  评论(0)    收藏  举报