拖拽上传文件
从桌面拖拽图片到红色区域
这里以上传图片为例，如果想要上传 .txt 文件等。可以使用 FileReader.readAsText(fs[0], 'utf-8')的方法读取文件内容，从而展现到页面上。
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽上传文件</title>
<style>
li{
list-style: none;
width: 100px;
height: 30px;
background: yellow;
margin: 10px;
}
#div1{
width: 200px;
height: 200px;
background: red;
margin: 200px;
}
</style>
</head>
<body>
<div id='div1'>将文件拖拽到此区域</div>
<ul id='ul1'></ul>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
var oUl = document.getElementById('ul1');
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHttp")
}
document.ondragover = function(ev){ ev.preventDefault() } // 阻止文件拖拽到oDiv以外的地方会打开文件
document.ondrop = function(ev){ ev.preventDefault() } // 阻止文件拖拽到oDiv以外的地方会打开文件
oDiv.ondragenter = function(ev){
this.innerHTML = '释放上传';
}
oDiv.ondragleave = function(ev){
this.innerHTML = '将文件拖拽到此区域';
}
oDiv.ondragover = function(ev){
ev.preventDefault()
}
oDiv.ondrop = function(ev){ // 想要出发 ondrop 事件，必须在 ondragover 阻止默认事件
this.style.background = 'pink'
ev.preventDefault(); // 阻止默认事件：浏览器打开文件
var fs = ev.dataTransfer.files;
var fd = new FileReader(); // 对象允许Web应用程序异步读取存储在用户计算机上的文件
fd.readAsDataURL(fs[0]); // 读取文件, 读取成功触发 onload 函数。
fd.onload = function(){ // 读取文件成功后将文件展示到页面
var oLi = document.createElement('li');
var oImg = document.createElement('img');
oImg.src = this.result;
oLi.appendChild(oImg);
oUl.appendChild(oLi);
xhr.onreadystatechange = function(){
if(xhr.status == 200 && xhr.readyState == 4){
//
}
}
xhr.open('POST','/upload_file_base64/')
xhr.send( JSON.stringify({ img:this.result }) ) // 上传的是 base64 格式的二进制码
}
}
}
</script>
</body>
</html>
页面截图 (已经可以展示拖拽进来的图片)
将文件保存到后台
# app.py
from flask import Flask, render_template, request, redirect, url_for
import os
import base64
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/upload_file_base64/', methods=['POST','GET'])
def upload_file_base64():
if request.method == 'POST':
data_json=request.get_data()
# 将二进制转换成字符串
if type(data_json) == bytes:
data_json = data_json.decode('utf8')
# 删除前面的 'data:image/png;base64,' 当时这里出错，弄了好长时间 -. -！
img_data = data_json.split(',')[1];
# 用base64.b64decode()转化
f = open('test.jpg','wb')
f.write(base64.b64decode(img_data))
f.close()
return redirect(url_for('index'))
return render_template('index.html')
html5
python
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。