基于阿里云oss及jquery.magnific-popup的在线图片浏览功能的实现

一：使用到的技术

1：阿里云oss js SDK : aliyun-sdk.js 、oss-js-upload.js

2：文件上传插件：jquery-fileupload.js

3 : 图片浏览插件：jquery-magnific-popup.js

4：JAVA图片压缩技术:thumbnails.jar

二 : 技术选用原因

1.文件上传功能，这里分为两种状况，：

(1).有公网情况下，我这里使用的是阿里云oss提供的 “js-SDK”上传组件，使用这个可以让用户直接从浏览器端上传文件到阿里云OSS，不需要经过我的服务器，制造无谓的流量压力。

(2).无公网情况下，我使用的jquery-fileupload.js,直接上传到局域网中的服务器。这个插件提供年多文件上传进度条功能，使用简单。

2.图片浏览功能，使用jquery-magnific-popup.js，这个插件提供画廊功能，并且具有图片预加载功能，可以播放视频，插入iframe等，功能强大且使用简单。

三：实现流程

1.第一步文件上传到服务器

(1).使用jquery-fileupload.js的情况下，实现起来相对比较简单,就是把文件上传到服务器即可，如果需要进度条，调用提供好的方法即可，以下是基本实现代码，供参考：

initJquereyUpload : function(){
var self = this;
var jqXHR = this.$("#uploadAttachFile").fileupload({
url:BASE_URL + "/attach/uploadAndSave",//文件上传地址，
sequentialUploads: false,//是否顺序上传
formData:{fileId:"empty"},//如果需要额外添加参数可以在这里添加
done:function(e,result){//上传完成回调方法

},
add:function(e,data){//文件添加时回调方法
$.each(data.files, function (index, file) {
});
var jqXHR = data.submit()
.success(function (result, textStatus, jqXHR) {
})
.error(function (jqXHR,textStatus,errorThrown) {})
.complete(function (result, textStatus, jqXHR) {});
$('.cancelBtn').click(function (e) {
jqXHR.abort(); //取消正在上传的文件
});
},
submit :function (e, data) {//提交上传请求回调方法

},
change : function(e,data){},
progress:function (e, data){//单个文件上传时，进度条的显示
var rate = parseInt(data._progress.loaded / data._progress.total * 100, 10);
$progress.css(
'height',
rate + '%'
);
}
})
},

(2).使用阿里云OSS js-sdk的情况下，这个阿里云官网可以下载到Sdk，gitHub上有，（使用阿里云OSS上传，必须开通阿里云OSS服务，拥有自己的bucket）。如果你的前端工程使用require.js进行管理，请不要用require.js将sdk引入，否则会出现加载冲突错误，要使用普通的引入方式：

<script src="js/lib/aliyun/aliyun-sdk.js"></script>
<script src="js/lib/aliyun/oss-js-upload.js"></script>

以下是基本实现代码，供参考：

var ossUpload = new OssUpload({
bucket: '需要上传的 oss bucket',
// 根据你的 oss 实例所在地区选择填入
endpoint: 'http://oss-cn-hangzhou.aliyuncs.com',
// 如果文件大于 chunkSize 则分块上传, chunkSize 不能小于 100KB 即 102400
chunkSize: 1048576,
// 分块上传的并发数
concurrency: 2,
aliyunCredential: {
"accessKeyId": "在阿里云OSS申请的 accessKeyId",
"secretAccessKey": "在阿里云OSS申请的 secretAccessKey"
}

}
document.getElementById("files")
.addEventListener('change', function (evt) {
var files = evt.target.files;

// 如果要上传大量文件, 需要自己控制并发
for (var i = 0; i < files.length; i++) {

ossUpload.upload({
// 必传参数, 需要上传的文件对象
file: files[i],
// 必传参数, 文件上传到 oss 后的名称, 包含路径
key: 'oss/folder/file_key',
// 上传失败后重试次数
maxRetry:
af3e
3,
// OSS支持4个 HTTP RFC2616(https://www.ietf.org/rfc/rfc2616.txt)协议规定的Header 字段：
// Cache-Control、Expires、Content-Encoding、Content-Disposition。
// 如果上传Object时设置了这些Header，则这个Object被下载时，相应的Header值会被自动设置成上传时的值
// 可选参数
headers: {
'CacheControl': 'public',
'Expires': '',
'ContentEncoding': '',
'ContentDisposition': '',
// oss 支持的 header, 目前仅支持 x-oss-server-side-encryption
'ServerSideEncryption': ''
},
// 文件上传失败后调用, 可选参数
onerror: function (evt) {
console.log(evt);
},
// 文件上传成功调用, 可选参数
oncomplete: function (res) {
console.log(res);
}
});
}

});

2.第二步，有时用户上传的图片过大如20M的图片，浏览时加载起来会比较慢，所以我们先对图片进行压缩处理，生成两张预览图：(1)与原图尺寸相同，质量压缩过的图片middle,(2)尺寸为缩略图尺寸，我这里是68*42像素，该图命名为small,压缩工具使用Thumbnails.jar,以下是关键代码，供参考:

Thumbnails.of(this.file.inputStream)//源文件输入流
.size(width, height)//压缩宽高
.outputQuality(this.quality)//压缩质量
.outputFormat("png")//压缩目标格式
.toFile(jpgFile);//输出的文件

3.第三步，使用jquery-magnific-popup.js预览图片，此处预览的图片实际上是压缩过的图片middle和small，应确保middle和small是可访问的，small是缩略图，middle是实际预览图，magnific基本使用代码如下，供参考:

$(document).magnificPopup({
delegate: '.gallayItem',
type: 'image',
preloader:true,
removalDelay: 1000,
mainClass: 'mfp-fade',//'mfp-with-zoom',
tLoading: 'Loading...',
gallery: {//画廊模式参数
// options for gallery
enabled: true,//启动画廊模式
preload: [0,2],//图片预加载设置，0，2表示提前两张图片进行预加载
navigateByImgClick: false,
tPrev: '上一个', // 按钮提示
tNext: '下一个'
}
})

提示：在使用预加载功能时，请确保服务器支持缓存保存，不是no-cache,no-store

完成