使用pluploader,圖片上傳阿里oss
阿新 • • 發佈:2018-11-16
頁面引入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(); }