ich hab hier gerade ein Problem wo ich nicht wirklich weiterkomme.
Und zwar will ich meiner website nen Fortschrittsbalken beim upload gönnen.
Problem das meine flash() aufrufe nun nicht mehr gehen, scheinbar liegt es daran das das mit dem reload der site nicht mehr wie vorgesehen läuft.
lt debugger ruft er die site schon neu wieder auf, allerdings kommen die flash() nicht.
Was etwas ungünstig ist, abgesehen davon klappt alles.
Meine Upload Funktion sieht zur Zeit so aus
Code: Alles auswählen
@app.route('/upload/', methods=['GET', 'POST'])
def file_upload():
print request.method
# flash('Upload Form!')
if request.method == 'POST':
# print request.files
file = request.files['datei']
if file and allowed_file(file.filename):
filename = secure_filename(file.filename)
file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
flash('Danke fuer ihren Upload')
return redirect(url_for('file_upload'))
else:
print 'error wrong format'
flash('Fehler, moeglicherweise ist das Dateiformat nicht erlaubt')
return render_template('upload_html5.html', support=app.config['ALLOWED_EXTENSIONS'], title='Upload your stuff')
Code: Alles auswählen
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>File-Upload mit Fortschrittanzeige</title>
</head>
<body>
<script type="text/javascript">
function fileChange()
{
//FileList Objekt aus dem Input Element mit der ID "fileA"
var fileList = document.getElementById("fileA").files;
//File Objekt (erstes Element der FileList)
var file = fileList[0];
//File Objekt nicht vorhanden = keine Datei ausgewählt oder vom Browser nicht unterstützt
if(!file)
return;
document.getElementById("fileName").innerHTML = 'Dateiname: ' + file.name;
document.getElementById("fileSize").innerHTML = 'Dateigröße: ' + file.size + ' B';
document.getElementById("fileType").innerHTML = 'Dateitype: ' + file.type;
document.getElementById("progress").value = 0;
document.getElementById("prozent").innerHTML = "0%";
}
var client = null;
function uploadFile()
{
//Wieder unser File Objekt
var file = document.getElementById("fileA").files[0];
//FormData Objekt erzeugen
var formData = new FormData();
//XMLHttpRequest Objekt erzeugen
client = new XMLHttpRequest();
var prog = document.getElementById("progress");
if(!file)
return;
prog.value = 0;
prog.max = 100;
//Fügt dem formData Objekt unser File Objekt hinzu
formData.append("datei", file);
client.onerror = function(e) {
alert("onError");
};
client.onload = function(e) {
document.getElementById("prozent").innerHTML = "100%";
prog.value = prog.max;
};
client.upload.onprogress = function(e) {
var p = Math.round(100 / e.total * e.loaded);
document.getElementById("progress").value = p;
document.getElementById("prozent").innerHTML = p + "%";
};
client.onabort = function(e) {
alert("Upload abgebrochen");
};
client.open("POST", "upload.php");
client.send(formData);
}
function uploadAbort() {
if(client instanceof XMLHttpRequest)
client.abort();
}
</script>
<form action="" method="post" enctype="multipart/form-data">
<input name="file" type="file" id="fileA" onchange="fileChange();"/>
<input name="upload" value="Upload" type="button" onclick="uploadFile();" />
<input name="abort" value="Abbrechen" type="button" onclick="uploadAbort();" />
</form>
<div>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<progress id="progress" style="margin-top:10px"></progress> <span id="prozent"></span>
</div>
</body>
</html>
Natürlich hab das obere an meine Wünsche angepasst, wie gesagt läuft auch alles. die struktur die flash() benötigt ist auch da, vorher lief es ja auch, da war es halt nur nen simples form das die datei übergeben hat, ohne Fortschrittsbalken.
Hab das ganze auch um das hier erweitert.
Code: Alles auswählen
client.onloadend = function(e) {
// location.reload()
//alert("Upload beendet")
};
Leider kenn ich mich mit javascript so gut wie gar nicht aus.
Hoffe es ist einigermaßen klar was ich meine und das irgendwer nen Tipp für mich hat wie man dem ganzen begegnen kann.