github.com/insionng/yougam@v0.0.0-20170714101924-2bc18d833463/public/libs/qiniu-js-sdk-master/demo/views/index.html (about) 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>七牛云存储 - JavaScript SDK</title> 6 <link href="favicon.ico" rel="shortcut icon"> 7 <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> 8 <link rel="stylesheet" href="main.css"> 9 <link rel="stylesheet" href="js/highlight/highlight.css"> 10 11 <!--[if lt IE 9]> 12 <script src="js/Respond-1.4.2/respond.min.js"></script> 13 <![endif]--> 14 </head> 15 <body> 16 <div class="container"> 17 <div class="text-left col-md-12 wrapper"> 18 <h1 class="text-left col-md-12 "> 19 七牛云存储 - JavaScript SDK 20 <a class="btn btn-default view_code" id="show_code"> 21 查看初始化代码 22 </a> 23 <a class="btn btn-default view_github" href="https://github.com/qiniupd/qiniu-js-sdk" target="_blank"> 24 <img src="http://qtestbucket.qiniudn.com/GitHub-Mark-32px.png"> 25 View Source on Github 26 </a> 27 </h1> 28 <input type="hidden" id="domain" value="<%= domain %>"> 29 <input type="hidden" id="uptoken_url" value="<%= uptoken_url %>"> 30 <ul class="tip col-md-12 text-mute"> 31 <li> 32 <small> 33 JavaScript SDK 基于 Plupload 开发，可以通过 Html5 或 Flash 等模式上传文件至七牛云存储。 34 </small> 35 </li> 36 <li> 37 <small>临时上传的空间不定时清空，请勿保存重要文件。</small> 38 </li> 39 <li> 40 <small>Html5模式大于4M文件采用分块上传。</small> 41 </li> 42 <li> 43 <small>上传图片可查看处理效果。</small> 44 </li> 45 <li> 46 <small>本示例限制最大上传文件100M。</small> 47 </li> 48 </ul> 49 </div> 50 <div class="body"> 51 <div class="col-md-12"> 52 <div id="container"> 53 <a class="btn btn-default btn-lg " id="pickfiles" href="#" > 54 <i class="glyphicon glyphicon-plus"></i> 55 <span>选择文件</span> 56 </a> 57 </div> 58 </div> 59 60 <div style="display:none" id="success" class="col-md-12"> 61 <div class="alert-success"> 62 队列全部文件处理完毕 63 </div> 64 </div> 65 <div class="col-md-12 "> 66 <table class="table table-striped table-hover text-left" style="margin-top:40px;display:none"> 67 <thead> 68 <tr> 69 <th class="col-md-4">Filename</th> 70 <th class="col-md-2">Size</th> 71 <th class="col-md-6">Detail</th> 72 </tr> 73 </thead> 74 <tbody id="fsUploadProgress"> 75 </tbody> 76 </table> 77 </div> 78 </div> 79 <div class="modal fade body" id="myModal-code" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 80 <div class="modal-dialog"> 81 <div class="modal-content"> 82 <div class="modal-header"> 83 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 84 <h4 class="modal-title" id="myModalLabel">查看初始化代码</h4> 85 </div> 86 <div class="modal-body"> 87 <pre><code> 88 //引入Plupload 、qiniu.js后 89 90 var uploader = Qiniu.uploader({ 91 runtimes: 'html5,flash,html4', //上传模式,依次退化 92 browse_button: 'pickfiles', //上传选择的点选按钮，**必需** 93 uptoken_url: '/token', //Ajax请求upToken的Url，**强烈建议设置**（服务端提供） 94 // uptoken : '<Your upload token>', //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成 95 // unique_names: true, // 默认 false，key为文件名。若开启该选项，SDK为自动生成上传成功后的key（文件名）。 96 // save_key: true, // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK会忽略对key的处理 97 domain: 'http://qiniu-plupload.qiniudn.com/', //bucket 域名，下载资源时用到，**必需** 98 container: 'container', //上传区域DOM ID，默认是browser_button的父元素， 99 max_file_size: '100mb', //最大文件体积限制 100 flash_swf_url: 'js/plupload/Moxie.swf', //引入flash,相对路径 101 max_retries: 3, //上传失败最大重试次数 102 dragdrop: true, //开启可拖曳上传 103 drop_element: 'container', //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传 104 chunk_size: '4mb', //分块上传时，每片的体积 105 auto_start: true, //选择文件后自动上传，若关闭需要自己绑定事件触发上传 106 init: { 107 'FilesAdded': function(up, files) { 108 plupload.each(files, function(file) { 109 // 文件添加进队列后,处理相关的事情 110 }); 111 }, 112 'BeforeUpload': function(up, file) { 113 // 每个文件上传前,处理相关的事情 114 }, 115 'UploadProgress': function(up, file) { 116 // 每个文件上传时,处理相关的事情 117 }, 118 'FileUploaded': function(up, file, info) { 119 // 每个文件上传成功后,处理相关的事情 120 // 其中 info 是文件上传成功后，服务端返回的json，形式如 121 // { 122 // "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98", 123 // "key": "gogopher.jpg" 124 // } 125 // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html 126 127 // var domain = up.getOption('domain'); 128 // var res = parseJSON(info); 129 // var sourceLink = domain + res.key; 获取上传成功后的文件的Url 130 }, 131 'Error': function(up, err, errTip) { 132 //上传出错时,处理相关的事情 133 }, 134 'UploadComplete': function() { 135 //队列文件处理完毕后,处理相关的事情 136 }, 137 'Key': function(up, file) { 138 // 若想在前端对每个文件的key进行个性化处理，可以配置该函数 139 // 该配置必须要在 unique_names: false , save_key: false 时才生效 140 141 var key = ""; 142 // do something with key here 143 return key 144 } 145 } 146 }); 147 148 // domain 为七牛空间（bucket)对应的域名，选择某个空间后，可通过"空间设置->基本设置->域名设置"查看获取 149 150 // uploader 为一个plupload对象，继承了所有plupload的方法，参考http://plupload.com/docs 151 </code></pre> 152 </div> 153 <div class="modal-footer"> 154 <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button> 155 </div> 156 </div> 157 </div> 158 </div> 159 <div class="modal fade body" id="myModal-img" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 160 <div class="modal-dialog"> 161 <div class="modal-content"> 162 <div class="modal-header"> 163 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 164 <h4 class="modal-title" id="myModalLabel">图片效果查看</h4> 165 </div> 166 <div class="modal-body"> 167 <div class="modal-body-wrapper text-center"> 168 <a href="" target="_blank" > 169 <img src="" alt="" data-key="" data-h=""> 170 </a> 171 </div> 172 <div class="modal-body-footer"> 173 <div class="watermark"> 174 <span>水印控制：</span> 175 <a href="#" data-watermark="NorthWest" class="btn btn-default"> 176 左上角 177 </a> 178 <a href="#" data-watermark="SouthWest" class="btn btn-default"> 179 左下角 180 </a> 181 <a href="#" data-watermark="NorthEast" class="btn btn-default"> 182 右上角 183 </a> 184 <a href="#" data-watermark="SouthEast" class="btn btn-default disabled"> 185 右下角 186 </a> 187 <a href="#" data-watermark="false" class="btn btn-default"> 188 无水印 189 </a> 190 </div> 191 <div class="imageView2"> 192 <span>缩略控制：</span> 193 <a href="#" data-imageview="large" class="btn btn-default disabled"> 194 大缩略图 195 </a> 196 <a href="#" data-imageview="middle" class="btn btn-default"> 197 中缩略图 198 </a> 199 <a href="#" data-imageview="small" class="btn btn-default"> 200 小缩略图 201 </a> 202 </div> 203 <div class="imageMogr2"> 204 <span>高级控制：</span> 205 <a href="#" data-imagemogr="left" class="btn btn-default no-disable-click" > 206 逆时针 207 </a> 208 <a href="#" data-imagemogr="right" class="btn btn-default no-disable-click"> 209 顺时针 210 </a> 211 <a href="#" data-imagemogr="no-rotate" class="btn btn-default"> 212 无旋转 213 </a> 214 </div> 215 <div class="text-warning"> 216 备注：小图片水印效果不明显，建议使用大图片预览水印效果 217 </div> 218 </div> 219 </div> 220 <div class="modal-footer"> 221 <span class="pull-left">本示例仅演示了简单的图片处理效果，了解更多请点击</span> 222 223 <a href="https://github.com/SunLn/qiniu-js-sdk" target="_blank" class="pull-left">本SDK文档</a> 224 <span class="pull-left">或</span> 225 226 <a href="http://developer.qiniu.com/docs/v6/api/reference/fop/image/" target="_blank" class="pull-left">七牛官方文档</a> 227 228 <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button> 229 </div> 230 </div> 231 </div> 232 </div> 233 </div> 234 235 236 237 238 <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> 239 <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script> 240 <script type="text/javascript" src="js/plupload/plupload.full.min.js"></script> 241 <script type="text/javascript" src="js/plupload/i18n/zh_CN.js"></script> 242 <script type="text/javascript" src="/js/ui.js"></script> 243 <script type="text/javascript" src="/js/qiniu.js"></script> 244 <script type="text/javascript" src="/js/highlight/highlight.js"></script> 245 <script type="text/javascript" src="/js/main.js"></script> 246 </body> 247 </html>