前端JS 上传文件到七牛云

Qiniu-JavaScript-SDK ============ 基于七牛 API 及 Plupload 开发的前端 JavaScript SDK ### 快速导航 - [示例网站](http://jssdk.demo.qiniu.io/) - [安装与使用](#usage) - [运行示例](#demo) - [常见问题](#faq) ### 概述 Qiniu-JavaScript-SDK （下文简称为 JS-SDK）适用于 IE8+、Chrome、Firefox、Safari 等浏览器，基于七牛云存储官方 API 构建，其中上传功能基于 [Plupload](http://www.plupload.com/) 插件封装。开发者基于 JS-SDK 可以方便的从浏览器端上传文件至七牛云存储，并对上传成功后的图片进行丰富的数据处理操作。 不考虑兼容性的情况下，如手机端，建议直接使用 Formdata 结合七牛[表单上传](https://developer.qiniu.com/kodo/manual/form-upload)的方式上传文件。 [ Formdata 上传 demo ](http://jssdk.demo.qiniu.io/formdata)  Qiniu-JavaScript-SDK 为客户端 SDK，没有包含 token 生成实现，为了安全，token 建议通过网络从服务端获取，具体生成代码可以参考以下服务端 SDK 的文档。 - [Android](https://developer.qiniu.com/kodo/sdk/android) - [Java](https://developer.qiniu.com/kodo/sdk/java) - [PHP](https://developer.qiniu.com/kodo/sdk/php) - [Python](https://developer.qiniu.com/kodo/sdk/python) - [Ruby](https://developer.qiniu.com/kodo/sdk/ruby) - [Go](https://developer.qiniu.com/kodo/sdk/go) - [Node.js](https://developer.qiniu.com/kodo/sdk/nodejs) - [C#](https://developer.qiniu.com/kodo/sdk/csharp) - [C/C++](https://developer.qiniu.com/kodo/sdk/cpp) - [Objective-C](https://developer.qiniu.com/kodo/sdk/objc) Qiniu-JavaScript-SDK 的示例 Demo 中的服务器端部分是基于[ Node.js 服务器端 SDK ](https://developer.qiniu.com/kodo/sdk/nodejs) 开发的。 <!-- 本 SDK 可使开发者忽略上传底层实现细节，而更多的关注 UI 层的展现。 --> ### 功能简介 - 上传 - html5 模式大于 4M 时可分块上传，小于4M时直传 - 分块上传时，可以断点续上传 - flash、html4 模式直接上传 - 继承了 plupload 的功能，可筛选文件上传、拖曳上传等 - 下载（公开资源） - 数据处理（图片） - imageView2（缩略图） - imageMogr2（高级处理，包含缩放、裁剪、旋转等） - imageInfo （获取基本信息） - exif （获取图片 EXIF 信息） - watermark （文字、图片水印） - pipeline （管道，可对 imageView2、imageMogr2、watermark 进行链式处理） ### 项目构成介绍 ``` ├── demo // 示例 Demo │ ├── images │ │ └── ... │ ├── scripts │ │ └── ... │ ├── styles │ │ └── ... │ ├── views │ │ └── ... │ ├── config.js.example │ └── server.js // 示例 Demo 的服务器端程序 ├── dist // SDK 输出目录 │ ├── qiniu.js // 非压缩版 │ ├── qiniu.min.js // 压缩版 │ └── qiniu.min.map // 压缩版的 source map 文件 ├── src // SDK 源目录 │ └── qiniu.js // 源文件 ├── Gruntfile.js ├── Makefile ├── README.md ├── bower.json └── package.json ``` <a id="usage"></a> ### 准备 - JS-SDK 的上传功能基于 [Plupload](http://www.plupload.com/) 插件封装的，所以需要[下载 Plupload](http://plupload.com/download)。 您也可以访问[ 开放静态文件 CDN ](http://staticfile.org/)，搜索 plupload，使用 CDN 加速的静态文件地址。 - 在使用 JS-SDK 之前，您必须先注册一个七牛帐号，并登录控制台获取一对有效的 AccessKey 和 SecretKey，您可以阅读[ 快速入门 ](https://developer.qiniu.com/kodo/manual/console-quickstart)和[ 安全机制 ](https://developer.qiniu.com/kodo/manual/security#security) 以进一步了解如何正确使用和管理密钥 。 - JS-SDK 依赖服务端颁发 uptoken，可以通过以下二种方式实现： - 利用[七牛服务端 SDK ](https://developer.qiniu.com/sdk#sdk)构建后端服务 - 利用七牛底层 API 构建服务，详见七牛[上传策略](https://developer.qiniu.com/kodo/manual/put-policy)和[上传凭证](https://developer.qiniu.com/kodo/manual/upload-token) 后端服务应提供一个 URL 地址，供 JS-SDK 初始化使用，前端通过 Ajax 请求该地址后获得 uptoken。Ajax 请求成功后，服务端应返回如下格式的 json： ``` { "uptoken": "0MLvWPnyya1WtPnXFy9KLyGHyFPNdZceomL..." } ``` ### 安装 支持以下几种安装方式 - 直接使用CDN 加速的静态文件地址，访问[ 开放静态文件 CDN ](http://staticfile.org/)，搜索 qiniu ``` https://cdn.staticfile.org/qiniu-JS-SDK/<version>/qiniu.min.js ``` - 使用 Bower 安装 Bower 是一个客户端技术的软件包管理器，它可用于搜索、安装和卸载如 JavaScript、HTML、CSS 之类的网络资源。如果需要更详细的关于 Bower 的使用说明，您可以访问[ Bower 官方网站](http://bower.io/)。 通过 Bower 安装会将 JS-SDK 依赖的 plupload 也一起安装在 `bower_components` 中： ``` bower install qiniu ``` 执行之后，JS-SDK 和 plupload 分别在以下位置 ``` bower_components ├── plupload │ └── js │ ├── moxie.js │ ├── moxie.min.js │ ├── plupload.dev.js │ ├── plupload.full.min.js │ └── plupload.min.js └── qiniu └── dist ├── qiniu.js ├── qiniu.min.js └── qiniu.min.map ``` - 使用 NPM 安装 NPM 的全称是 Node Package Manager，是一个[ NodeJS ](https://nodejs.org)包管理和分发工具，已经成为了非官方的发布 Node 模块（包）的标准。如果需要更详细的关于 NPM 的使用说明，您可以访问[ NPM 官方网站](https://www.npmjs.com)，或对应的[中文网站](http://www.npmjs.com.cn/) ``` npm install qiniu-js ``` 执行之后，JS-SDK 在以下位置 ``` node_modules └── qiniu-js └── dist ├── qiniu.js ├── qiniu.min.js └── qiniu.min.map ``` - 通过 Github 上的 qiniu/js-sdk 仓库获取 下载最新的[ 发布版本 ](https://github.com/qiniu/js-sdk/releases)并解压 或 直接克隆仓库 ``` git clone https://github.com/qiniu/js-sdk.git ``` JS-SDK 在 `dist` 目录中 ### 使用 #### 上传功能 1. 在页面中引入 plupload，`plupload.full.min.js`（生产环境）或 引入`plupload.dev.js`和`moxie.js`（开发调试） 2. 在页面中引入 `qiniu.min.js`（生产环境）或 `qiniu.js`（开发调试） 3. 初始化 uploader，**请确保在执行初始化时，页面已经引入 plupload** ```JavaScript var uploader = Qiniu.uploader({ disable_statistics_report: false, // 禁止自动发送上传统计信息到七牛，默认允许发送 runtimes: 'html5,flash,html4', // 上传模式,依次退化 browse_button: 'pickfiles', // 上传选择的点选按钮，**必需** // 在初始化时，uptoken, uptoken_url, uptoken_func 三个参数中必须有一个被设置 // 切如果提供了多个，其优先级为 uptoken > uptoken_url > uptoken_func // 其中 uptoken 是直接提供上传凭证，uptoken_url 是提供了获取上传凭证的地址，如果需要定制获取 uptoken 的过程则可以设置 uptoken_func // uptoken : '<Your upload token>', // uptoken 是上传凭证，由其他程序生成 // uptoken_url: '/uptoken', // Ajax 请求 uptoken 的 Url，**强烈建议设置**（服务端提供）