基于阿里云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: 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

完成