From 4b00c0c787bf31fc18ae7c46686666be382f1917 Mon Sep 17 00:00:00 2001 From: codedogfish Date: Fri, 15 Apr 2016 11:17:48 +0800 Subject: [PATCH] Fix iOS get file name always same - update demo - change demo option multi_selection case env os is iOS - add page log - fix iOS file name problem --- Makefile | 2 +- README.md | 4 +- demo/scripts/main.js | 15 ++ demo/views/index.html | 514 ++++++++++++++++++++++++++---------------- dist/qiniu.js | 41 +++- dist/qiniu.min.js | 2 +- dist/qiniu.min.map | 2 +- src/qiniu.js | 39 +++- 8 files changed, 398 insertions(+), 221 deletions(-) diff --git a/Makefile b/Makefile index 25b41cc3..db49fb2b 100644 --- a/Makefile +++ b/Makefile @@ -1,4 +1,4 @@ -all : install build demo +all : install build dev install : npm install diff --git a/README.md b/README.md index 4f1cc52f..7c610e64 100644 --- a/README.md +++ b/README.md @@ -469,6 +469,7 @@ Qiniu-JavaScript-SDK 的示例 Demo 中的服务器端部分是基于[ Node.js ``` 3. 进入项目根目录，执行 `make dev` 访问 `http://127.0.0.1:19110/` 或 `http://localhost:19110/` + ### 说明 1. JS-SDK 依赖 Plupload，初始化之前请引入 Plupload。 @@ -599,6 +600,7 @@ $('#stop_load').on('click', function(){ 推荐一个关于 [CORS](http://enable-cors.org/) 的网站 + ### 贡献代码 1. 登录 https://github.com @@ -613,7 +615,7 @@ $('#stop_load').on('click', function(){ 6. 然后到 github 网站的该 git 远程仓库的 new-feature 分支下发起 Pull Request - + ### 许可证 > Copyright (c) 2014 qiniu.com diff --git a/demo/scripts/main.js b/demo/scripts/main.js index 93616584..f6e2a5f9 100644 --- a/demo/scripts/main.js +++ b/demo/scripts/main.js @@ -14,7 +14,22 @@ $(function() { flash_swf_url: 'bower_components/plupload/js/Moxie.swf', dragdrop: true, chunk_size: '4mb', + multi_selection: !(mOxie.Env.OS.toLowerCase()==="ios"), uptoken_url: $('#uptoken_url').val(), + // uptoken_func: function(){ + // var ajax = new XMLHttpRequest(); + // ajax.open('GET', $('#uptoken_url').val(), false); + // ajax.setRequestHeader("If-Modified-Since", "0"); + // ajax.send(); + // if (ajax.status === 200) { + // var res = JSON.parse(ajax.responseText); + // console.log('custom uptoken_func:' + res.uptoken); + // return res.uptoken; + // } else { + // console.log('custom uptoken_func err'); + // return ''; + // } + // }, domain: $('#domain').val(), get_new_uptoken: false, // downtoken_url: '/downtoken', diff --git a/demo/views/index.html b/demo/views/index.html index bae053e2..769990d4 100644 --- a/demo/views/index.html +++ b/demo/views/index.html @@ -13,235 +13,357 @@ -
-
-

- 七牛云存储 - JavaScript SDK - - 查看初始化代码 - - - - View Source on Github - -

- - -
    -
  • - - JavaScript SDK 基于 Plupload 开发，可以通过 Html5 或 Flash 等模式上传文件至七牛云存储。 - -
    • -
  • - 临时上传的空间不定时清空，请勿保存重要文件。 -
    • -
  • - Html5模式大于4M文件采用分块上传。 + + +
    +
      + -
    • - 上传图片可查看处理效果。 +
    • + 代码
      • -
    • - 本示例限制最大上传文件100M。 +
    • + 日志
    -
    -
    -
    -
    - - - 选择文件 - +
    +
    + +
    + + +
      +
    • + + JavaScript SDK 基于 Plupload 开发，可以通过 Html5 或 Flash 等模式上传文件至七牛云存储。 + +
      • +
    • + 临时上传的空间不定时清空，请勿保存重要文件。 +
      • +
    • + Html5模式大于4M文件采用分块上传。 +
      • +
    • + 上传图片可查看处理效果。 +
      • +
    • + 本示例限制最大上传文件100M。 +
      • +
    +
    + +
    + +
    + + + + + + + + + + + +
    +
    +
    -
    +
    + +
    +
    + 
    
+                        //引入Plupload 、qiniu.js后
+                        var uploader = Qiniu.uploader({
+                            runtimes: 'html5,flash,html4',    //上传模式,依次退化
+                            browse_button: 'pickfiles',       //上传选择的点选按钮，**必需**
+                            uptoken_url: '/token',            //Ajax请求upToken的Url，**强烈建议设置**（服务端提供）
+                            // uptoken : '', //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成
+                            // unique_names: true, // 默认 false，key为文件名。若开启该选项，SDK为自动生成上传成功后的key（文件名）。
+                            // save_key: true,   // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK会忽略对key的处理
+                            domain: 'http://qiniu-plupload.qiniudn.com/',   //bucket 域名，下载资源时用到，**必需**
+                            get_new_uptoken: false,  //设置上传文件的时候是否每次都重新获取新的token
+                            container: 'container',           //上传区域DOM ID，默认是browser_button的父元素，
+                            max_file_size: '100mb',           //最大文件体积限制
+                            flash_swf_url: 'js/plupload/Moxie.swf',  //引入flash,相对路径
+                            max_retries: 3,                   //上传失败最大重试次数
+                            dragdrop: true,                   //开启可拖曳上传
+                            drop_element: 'container',        //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
+                            chunk_size: '4mb',                //分块上传时，每片的体积
+                            auto_start: true,                 //选择文件后自动上传，若关闭需要自己绑定事件触发上传
+                            init: {
+                                'FilesAdded': function(up, files) {
+                                    plupload.each(files, function(file) {
+                                        // 文件添加进队列后,处理相关的事情
+                                    });
+                                },
+                                'BeforeUpload': function(up, file) {
+                                       // 每个文件上传前,处理相关的事情
+                                },
+                                'UploadProgress': function(up, file) {
+                                       // 每个文件上传时,处理相关的事情
+                                },
+                                'FileUploaded': function(up, file, info) {
+                                       // 每个文件上传成功后,处理相关的事情
+                                       // 其中 info 是文件上传成功后，服务端返回的json，形式如
+                                       // {
+                                       //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
+                                       //    "key": "gogopher.jpg"
+                                       //  }
+                                       // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html
+
+                                       // var domain = up.getOption('domain');
+                                       // var res = parseJSON(info);
+                                       // var sourceLink = domain + res.key; 获取上传成功后的文件的Url
+                                },
+                                'Error': function(up, err, errTip) {
+                                       //上传出错时,处理相关的事情
+                                },
+                                'UploadComplete': function() {
+                                       //队列文件处理完毕后,处理相关的事情
+                                },
+                                'Key': function(up, file) {
+                                    // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
+                                    // 该配置必须要在 unique_names: false , save_key: false 时才生效
+
+                                    var key = "";
+                                    // do something with key here
+                                    return key
+                                }
+                            }
+                        });
+
+                        // domain 为七牛空间（bucket)对应的域名，选择某个空间后，可通过"空间设置->基本设置->域名设置"查看获取
+
+                        // uploader 为一个plupload对象，继承了所有plupload的方法，参考http://plupload.com/docs
+
    +
    +
    - -
    - - - - - - - - - - - +
    + 
    
+            
    
         
    
     
    
-    
-      
    
-    
    
-