<!DOCTYPE html>
<html>
<head>
<title>文件上传</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<input type="file" id="files" multiple="multiple">
<button onclick="up()">提交</button>
<script>
function up(){
var up_file = $('#files')[0].files[0];
var formData = new FormData();
formData.append("up_file",up_file);
$.ajax({
url:'http://192.168.1.123:5000/download',
dataType:'json',
type:'POST',
async: false,
data: formData,
processData : false,
contentType : false,
success: function(data){
alert(data['data'])
}
});
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>目录浏览器</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<center><h2>当前文件目录</h2><button onclick="flash()">返回首页</button></center><br>
<ul class="list-group">
<div id='tests'></div>
</ul>
</div>
</body>
</html>
<script>
window.onload=function(){
var html=''
$.ajax({
url:'http://192.168.1.123:5000/',
dataType:'json',
type:'POST',
async: false,
data: '',
processData : false,
contentType : false,
success: function(data){
for(i=0;i<data['data'].length;i++){
html+='<li class="list-group-item">'+data['data'][i]+'</li>'
$("#tests").html(html);
}
},
error:function(response){
console.log();
}
});
next();
}
function next(){
var html=''
var obj_lis = document.getElementById("tests").getElementsByTagName("li");
for(i=0;i<obj_lis.length;i++){
obj_lis[i].onclick = function(){
console.log(this.innerHTML);
var flag=this.innerHTML.split('/').slice(-1)[0]
$.ajax({
url:'http://192.168.1.123:5000/next',
type:'post',
dataType:'json',
cache: false,
data:JSON.stringify({'datas':this.innerHTML}),
contentType: "application/json;charset=utf-8",
success:function(data){
if(data['status']=='1'){
for (i=0;i<data['data'].length;i++){
html+='<li class="list-group-item">'+data['data'][i]+'</li>'
$("#tests").html(html);
}
}else if(data['status']=='2'){
window.location.href=data['data']
}
next();
}
})
}
}
}
function flash(){
location.reload();
}
</script>
from flask import Flask,request,jsonify
import time,os,json
app = Flask(__name__, static_folder='', static_url_path='')
app.config['SEND_FILE_MAX_AGE_DEFAULT']= timedelta(seconds=1)
app.config["SECRET_KEY"] = "12345678"
@app.route('/download', methods=['GET', 'POST'])
def go():
if request.method=='POST':
f=request.files['up_file']
f.save(os.path.join('./static',f.filename))
return jsonify({'data':'上传成功'})
else:
return '404'
def get_file_path(root_path):
newlist=[]
dir_or_files = os.listdir(root_path)
for i in dir_or_files:
new=root_path+'/'+i
newlist.append(new)
return newlist
@app.route('/next',methods=['GET','POST'])
def next():
root_path = r"./static"
if request.method=='POST':
newdata=json.loads(request.get_data())
if os.path.isdir(newdata['datas']):
return jsonify({'data':get_file_path(newdata['datas']),'status':'1'})
else:
fullfilename=newdata['datas'].replace('./static/','')
return jsonify({'data':fullfilename,'status':'2'})
else:
return '错误访问！'
if __name__ == '__main__':
app.run(host='0.0.0.0',port='5000',debug=True)
