YiwenGG

app.py代码

 1 from flask import Flask, render_template, jsonify
 2 import qiniu
 3 
 4 app = Flask(__name__)
 5 
 6 
 7 @app.route(\'/\')
 8 def hello_world():
 9     return render_template(\'index.html\')
10 
11 
12 @app.route("/uptoken/")
13 def uptoken():
14     access_key = \'Zrn4qlgRr6B56e3XspseFU0EJwdBL1WmM9Awy4EX\'
15     secret_key = \'ArE9zHWaYp0OR35rqRnGbi8THJJHCuzGf9-s0QqC\'
16 
17     # 创建qiniu对象
18     q = qiniu.Auth(access_key, secret_key)
19 
20     # 储存空间的名称
21     bucket = \'yiww\'
22 
23     # 参数存储空间的名字
24     token = q.upload_token(bucket)
25     return jsonify({\'uptoken\': token})
26 
27 
28 if __name__ == \'__main__\':
29     app.run(debug=True)
View Code

index代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="{{ url_for(\'static\',filename=\'jquery-1.12.4.min.js\') }}"></script>
 7     <script src="https://cdn.staticfile.org/Plupload/2.1.1/moxie.js"></script>
 8     <script src="https://cdn.staticfile.org/Plupload/2.1.1/plupload.dev.js"></script>
 9     <script src="https://cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.js"></script>
10     <script src="{{ url_for(\'static\',filename=\'qiniu.js\') }}"></script>
11     <script>
12          window.onload = function () {
13          qiniu.setUp({
14              \'domain\': \'qe667nnln.bkt.clouddn.com/\',
15              \'browse_btn\': \'upload-btn\',
16              \'uptoken_url\': \'/uptoken/\',
17              \'success\': function (up,file,info) {
18                  var file_url = file.name;
19                  console.log(file_url);
20                  $(\'input[name=image_url]\').val(file_url);
21                  $(\'#img\').attr({src:\'http://\'+file_url})
22              }
23          });
24  };
25     </script>
26 </head>
27 <body>
28     <button id="upload-btn">上传文件</button>
29     <input type="text" id="image-input" name="image_url">
30     <img src="" alt="" id="img">
31 </body>
32 </html>
View Code

js实现图片上传并把url放入input框显示图片

 1          window.onload = function () {
 2          qiniu.setUp({
 3              \'domain\': \'qe667nnln.bkt.clouddn.com/\',
 4              \'browse_btn\': \'upload-btn\',
 5              \'uptoken_url\': \'/uptoken/\',
 6              \'success\': function (up,file,info) {
 7                  var file_url = file.name;
 8                  console.log(file_url);
 9                  $(\'input[name=image_url]\').val(file_url);
10                  $(\'#img\').attr({src:\'http://\'+file_url})
11              }
12          });
13  };

 

分类:

技术点:

相关文章: