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">[选择文件1]</a>
    <a href="javascript:;" data-qiniu-upload-btn>[选择文件2]</a>
    <a href="javascript:;" data-qiniu-upload-btn>[选择文件3]</a>
  </div>
  <hr>
  <a href="javascript:;">[开始上传]</a>
  <hr>
  <div id="imageList">
    <img ng-repeat="image in imageList" ng-src="{{image.url}}" alt="图片">
  </div>
</div>

JavaScript

var myApp = angular.module('myApp', []).controller('appController', ['$scope', function($scope) {
	$scope.imageList = [];
  $scope.uploadFinished = function(sourceLink, file) {
  alert();
  	$scope.imageList[$scope.imageList.length] = {
    	url: sourceLink
    };
  }
}]).directive('qiniuUploadBtn', [function() {
  return {
    scope: {
      uploadFinished: '='
    },
    restrict: 'AEC',
    link: function(scope, element, attrs) {
      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:Mtb9ZLZxkTGIA-mWv_IkA7plpqk=:eyJzY29wZSI6ImltYWdlcyIsImRlYWRsaW5lIjoxNDY1MDUwMjc3fQ==', // uptoken 是上传凭证，由其他程序生成
        // uptoken_url: 'http://localhost:8080/api/uptoken?key=abc', // Ajax 请求 uptoken 的 Url，**强烈建议设置**（服务端提供）
        // uptoken_func: function(file){    // 在需要获取 uptoken 时，该方法会被调用
        //    // do something
        //    return uptoken;
        // },
        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: '//o6ztar7bn.bkt.clouddn.com/', // bucket域名，下载资源时用到，**必需**
        max_file_size: '100mb', // 最大文件体积限制
        flash_swf_url: 'path/of/plupload/Moxie.swf', //引入 flash,相对路径
        max_retries: 3, // 上传失败最大重试次数
        dragdrop: true, // 开启可拖曳上传
       ...