我正在尝试在我的网站中使用flask实现Krajee fileupload，但不知何故。 似乎从未调用过app.route（“ / labellingUpload”），因为“测试”打印图永远不会出现在控制台中。
到目前为止，这是我的代码：
app.py
from flask import Flask, render_template, request, redirect, flash, url_for
import os
from werkzeug.utils import secure_filename
import sys
import json
LABELLING_UPLOAD_FOLDER = "/labellingUpload"
app = Flask (__name__, template_folder="public", static_folder="public", static_url_path='')
app.config["UPLOAD_FOLDER"]= LABELLING_UPLOAD_FOLDER
@app.route("/")
def index():
return render_template("index.html")
@app.route("/labellingUpload", methods =["GET","POST"])
def upload_file():
print("test", file=sys.stderr)
jsonReturn = '{"error": "An error exception message if applicable", "initialPreview": "n","initialPreviewConfig": " ","initialPreviewThumbTags": " ","append": "false"}'
if request.method == 'POST':
file = request.files['file_data']
filename = secure_filename(file.filename)
file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
return json.dumps({})
if __name__ == "__main__":
app.run(debug=True)
返回的空json和['file_data']引用to this explenation
index.html 此处，krajee文件上传是使用默认名称“ input-ke-2”导入到div“ labellingInputForm”中的
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="../../../../favicon.ico">
<!-- Bootstrap core CSS -->
<link href="./design/css/bootstrap.css" rel="stylesheet">
<!-- CSS for fileinput plugin -->
<!-- new and old file loader -->
<link href="./design/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<!-- CSS with fontawesome icons -->
<!-- <link href="./design/css/fontawesome-all.css" rel="stylesheet"> -->
<!-- CSS for pdf.js -->
<link href="./design/css/pdf_viewer.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./design/css/styles.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="./design/themes/fa/theme.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark flex-nowrap fixed-top">
<button class="navbar-toggler mr-2" type="button" data-toggle="collapse" data-target="#navbar5">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse w-100 justify-content-center" id="navbar5">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" id="linkLabellingForm" href="#">Labelling</a>
</li>
<li class="nav-item">
<a class="nav-link" id="linkClassificationForm" href="#">Classification</a>
<span class="sr-only">(current)</span>
</li>
</ul>
</div>
<div class="w-100">
<!--spacer-->
</div>
</nav>
<main role="main">
<!-- Loader -->
<div id="loader"></div>
<!-- Main jumbotron-->
<div class="jumbotron">
<div class="container">
</div>
</div>
<div class="container">
<div class="row" id="labellingInputForm">
<div class="col-md-12" id="uploadSection">
<h2>File Upload</h2>
<p>
UploadPDF file
</p>
<input id="input-ke-2" name="input-ke-2[]" type="file" multiple="multiple">
</p>
</div>
</div>
</main>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- JavaScript Libraries -->
<<script src="./js/libraries/jquery.min.js"></script>
<script src="./js/libraries/popper.min.js"></script>
<script src="./js/libraries/bootstrap.min.js"></script>
<!-- old file loader -->
<script src="./js/libraries/fileinput.min.js"></script>
<!-- PDF.js related -->
<script src="./js/libraries/pdf.min.js"></script>
<script src="./js/libraries/pdf_viewer.js"></script>
<script src="./js/customPdfViewer.js"></script>
<!-- Theme files -->
<!-- old file loader -->
<script src="./design/themes/fa/fa.js"></script>
<!-- Custom JavaScript -->
<script src="./js/clientside.js"></script>
<!-- <script src="{{ url_for ('static', filename='./js/clientside.js')}}"></script> -->
<script src="./js/libraries/fileinput.js"></script>
<script src="./design/themes/explorer-fa/theme.js"></script>
</body>
clientside.js 只是有趣的部分，包含上载器的处理 省略了show（）和hide（）方法
$(function () {
$("#input-ke-2").fileinput({
theme: "explorer-fa",
uploadUrl: "/labellingUpload",
minFileCount: 1,
maxFileCount: 5,
uploadAsync: true,
removeFromPreviewOnError: true,
overwriteInitial: false,
allowedFileExtensions: ["pdf"],
previewFileIcon: '<i class="fa fa-file"></i>',
initialPreviewAsData: true, // defaults markup
preferIconicPreview: true, // this will force thumbnails to display icons for following file extensions
previewFileIconSettings: { // configure your icon file extensions
'doc': '<i class="fa fa-file-word-o text-primary"></i>',
'xls': '<i class="fa fa-file-excel-o text-success"></i>',
'ppt': '<i class="fa fa-file-powerpoint-o text-danger"></i>',
'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>',
'zip': '<i class="fa fa-file-archive-o text-muted"></i>',
'htm': '<i class="fa fa-file-code-o text-info"></i>',
'txt': '<i class="fa fa-file-text-o text-info"></i>',
'mov': '<i class="fa fa-file-video-o text-warning"></i>',
'mp3': '<i class="fa fa-file-audio-o text-warning"></i>',
// note for these file types below no extension determination logic
// has been configured (the keys itself will be used as extensions)
'jpg': '<i class="fa fa-file-photo-o text-danger"></i>',
'gif': '<i class="fa fa-file-photo-o text-muted"></i>',
'png': '<i class="fa fa-file-photo-o text-primary"></i>'
},
previewFileExtSettings: { // configure the logic for determining icon file extensions
'doc': function(ext) {
return ext.match(/(doc|docx)$/i);
},
'xls': function(ext) {
return ext.match(/(xls|xlsx)$/i);
},
'ppt': function(ext) {
return ext.match(/(ppt|pptx)$/i);
},
'zip': function(ext) {
return ext.match(/(zip|rar|tar|gzip|gz|7z)$/i);
},
'htm': function(ext) {
return ext.match(/(htm|html)$/i);
},
'txt': function(ext) {
return ext.match(/(txt|ini|csv|java|php|js|css)$/i);
},
'mov': function(ext) {
return ext.match(/(avi|mpg|mkv|mov|mp4|3gp|webm|wmv)$/i);
},
'mp3': function(ext) {
return ext.match(/(mp3|wav)$/i);
}
}
});
});