JSFiddle - React, Tailwind, and code Playground

by 亮 薛

HTML

<script src="https://cdnjs.xueliang.org/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.xueliang.org/ajax/libs/plupload/2.1.8/moxie.js"></script>
<script src="https://cdnjs.xueliang.org/ajax/libs/plupload/2.1.8/plupload.full.min.js"></script>
<script src="https://cdnjs.xueliang.org/ajax/libs/plupload/2.1.8/i18n/zh_CN.js"></script>
<script src="https://cdnjs.xueliang.org/qiniu-js-sdk/dist/qiniu.min.js"></script>
<script src="https://cdnjs.xueliang.org/ajax/libs/angular.js/1.5.0-rc.2/angular.js"></script>
<div ng-controller="appController">
  <div id="container">
    <a href="javascript:;" data-qiniu-upload-btn data-upload-finished="uploadFinished(sourceLink, file, tag)" data-upload-list="imageList0">[选择文件1]</a>
    <a href="javascript:;" data-qiniu-upload-btn data-upload-finished="uploadFinished(sourceLink, file, tag)" data-upload-list="imageList1">[选择文件2]</a>
    <a href="javascript:;" data-qiniu-upload-btn data-upload-finished="uploadFinished(sourceLink, file, tag)" data-upload-list="imageList2">[选择文件3]</a>
  </div>
  <hr>
  <a href="javascript:;">[开始上传]</a>
  <hr>
  <div style="border: 2px solid yellow;">
    <img ng-repeat="image in imageList0" ng-src="{{image.url}}" alt="图片">
  </div>
  <div style="border: 2px solid red;">
    <img ng-repeat="image in imageList1" ng-src="{{image.url}}" alt="图片">
  </div>
  <div style="border: 2px solid green;">
    <img ng-repeat="image in imageList2" ng-src="{{image.url}}" alt="图片">
  </div>
</div>

CSS

img {
  width: 100px;
  height: 100px;
}

JavaScript

var myApp = angular.module('myApp', []).controller('appController', ['$scope', function($scope) {
  $scope.uploadFinished = function(sourceLink, file, tag) {
    $scope[tag] = $scope[tag] || [];
    $scope[tag][$scope[tag].length] = {
      url: sourceLink
    };
  }
}]).directive('qiniuUploadBtn', ['$timeout', function($timeout) {
  return {
    scope: {
      uploadFinished: '&',
      uploadList: '@'
    },
    restrict: 'AEC',
    link: function(scope, element, attrs) {
      /*
      setTimeout(function() {
              scope.$apply(function() {
                scope.uploadFinished({
                  sourceLink: 'xxxxxxxxxxxxx',
                  file: {}
                })
              });
            }, 3000);
            */
      var elementDOM = element.get(0);
      var qiniu = new QiniuJsSDK();
      var uploader = qiniu.uploader({
        runtimes: 'html5,flash,silverlight,html4', // 上传模式,依次退化
        browse_button: elementDOM, // 上传选择的点选按钮，**必需**
        // 在初始化时，uptoken, uptoken_url, uptoken_func 三个参数中必须有一个被设置
        // 切如果提供了多个，其优先级为 uptoken > uptoken_url > uptoken_func
        // 其中 uptoken 是直接提供上传凭证，uptoken_url 是提供了获取上传凭证的地址，如果需要定制获取 uptoken 的过程则可以设置 uptoken_func
        uptoken: 'RF2xVvoygCd2JctMUj90B3uSl7FV9CM0ihkpTpF8:Mj7d_Ki7EtXuZh8RADnYtQTyAPk=:eyJzY29wZSI6ImltYWdlcyIsImRlYWRsaW5lIjoxNDY1MDU4Mzg0fQ==',
        get_new_uptoken: true, // 设置上传文件的时候是否每次都重新获取新的 uptoken
        // downtoken_url: '/downtoken',
        // Ajax请求downToken的Url，私有空间时使用,JS-SDK 将向该地址POST文件的key和domain,服务端返回的JSON必须包含`url`字段，`url`值为该文件的下载地址
        // unique_names: true,              // 默认 false，key 为文件名。若开启该选项，JS-SDK 会为每个文件自动生成key（文件名）
        save_key: true, // 默认 false。若在服务端生成 uptoken 的上传策略中指定了 `sava_key`，则开启，SDK在前端将不对key进行任何处理
        domain: 'http://o891smr57.bkt.clouddn.com/', // bucket域名，下载资源时用到，**必需**
        max_file_size: '100mb', // 最大文件体积限制
        flash_swf_url: 'path/of/plupload/Moxie.swf', //引入 flash,相对路径
        max_retries: 3, // 上传失败最大重试次数
       ...