使用pluploader,图片上传阿里oss

 页面引入jquery 和 plupload.full.min.js(plupload.js)

// 封装ajax 给上传图片用
function reqAjax(cmd, data){
    var deferred = $.Deferred();
    $.ajax({
        type:"post",
        dataType: 'json',
        url:"www.*********",
        headers: {
            apikey: sessionStorage.getItem('apikey') || 'test'
        },
        data: {
            cmd: cmd,
            data: JSON.stringify(data)
        },
        success: function(data){
            deferred.resolve(data)
        },
        error: function(){
            deferred.reject()
        }
    });
    return deferred;
}
var OSSParams;
window.pluploadList = [];
// oss上传
function initUpload(arg) {
    var uploader = new plupload.Uploader({
        runtimes: 'html5,html4',
        browse_button: arg.dom,
        multi_selection: false,
        unique_names: true,
        url: 'http://oss.aliyuncs.com',
        filters: {
            mime_types: arg.flag,
            max_file_size: arg.fileSize,
            prevent_duplicates: false
        }
    });
    uploader.init();
    uploader.bind('FilesAdded', function (up, files) {
        $(arg.dom).siblings('.cover').addClass('active')
        startUpload(up, files[0]);
    });
    uploader.bind('UploadProgress', function(up, file) {
        // console.log(file.percent)
        $(arg.dom).siblings('.cover').find('p').eq(0).text(file.percent + '%');
    });
    uploader.bind('Error', function (up, err, file) {
        if (err.code == -600) {
            layer.msg("选择的文件过大,视频大小限制在20M以内,图片大小限制在5M以内", {icon: 2});
        } else if (err.code == -500) {
            layer.msg('初始化错误', {icon: 2})
        } else if (err.code == -601) {
            layer.msg("不支持该文件格式", {icon: 2});
        } else if (err.code == -602) {
            layer.msg("这个文件已经上传过一遍了", {icon: 2});
        } else {
            layer.msg("系统繁忙,请稍后再试!", {icon: 2});
        }
        $(arg.dom).siblings('.cover').find('p').eq(0).text('0%');
        $(arg.dom).siblings('.cover').removeClass('active')
    });
    uploader.bind('FileUploaded', function (up, file, info) {
        if (info && info.status == 200) {
            var src = OSSParams.host + '/' + OSSParams.dir + '/' + file.name;
            $(arg.dom).attr('src', src);
            $(arg.dom).siblings('input[type="hidden"]').val(src);
            layer.msg('上传成功!', {icon: 1})
        } else {
            layer.msg("系统繁忙,请稍后再试!", {icon: 2});
        }
        $(arg.dom).siblings('.cover').find('p').eq(0).text('0%');
        $(arg.dom).siblings('.cover').removeClass('active')
    });
    window.pluploadList.push(uploader);
};

//初始化上传图片
initUpload({
    dom: $('#upload_pic').siblings()[0], 
    flag: [{
        title: '请上传图片',
        extensions: 'jpg,png,jpeg,bmp'
    }], 
    fileSize: "10mb"
});

function startUpload(up, file) {
    getOssParams().then(function (data) {
        file.name = randomName();
        var fileName = data['dir'] + '/' + file.name;
        up.setOption({
            url: data['host'],
            multipart_params: {
                key: fileName,
                policy: data['policy'],
                OSSAccessKeyId: data['accessid'],
                success_action_status: 200,
                signature: data['signature']
            }
        });
        up.start()
    });
}
function randomName(len) {
    len = len || 23;
    var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
    var maxPos = chars.length;
    var str = '';
    for (i = 0; i < len; i++) {
        str += chars.charAt(Math.floor(Math.random() * maxPos));
    }
    return new Date().getTime() + str;
}
function getOssParams() {
    var defer = $.Deferred();
    if (OSSParams && OSSParams.expire > new Date().getTime() / 1000) {
        defer.resolve(OSSParams);
    } else {
        var def = reqAjax('oss/ossUpload');
        def.then(function(res){
            OSSParams = res;
            defer.resolve(res);
        });
        def.fail(function(err){
            defer.reject();
            layer.msg("系统繁忙,请稍后再试!");
        });
    }
    return defer.promise();
}

猜你喜欢

转载自blog.csdn.net/a314753967/article/details/82622747