flask python 上传文件,Ajax+Python flask实现上传文件功能

HTML：

上传图片

Ajax实现:

$(function() {

$("#btn_uploadimg").click(function() {varfileObj=document.getElementById("FileUpload").files[0];//js 获取文件对象

if(typeof(fileObj)== "undefined" ||fileObj.size<= 0) {

alert("请选择图片");return;

}varformFile= newFormData();

formFile.append("action","UploadVMKImagePath");

formFile.append("file", fileObj);//加入文件对象

//第一种 XMLHttpRequest 对象

//var xhr = new XMLHttpRequest();

//xhr.open("post", "/Admin/Ajax/VMKHandler.ashx", true);

//xhr.onload = function () {

//alert("上传完成!");

//};

//xhr.send(formFile);

//第二种 ajax 提交

vardata=formFile;

$.ajax({

url:"/upload/",

data: data,

type:"Post",

dataType:"json",

cache:false,//上传文件无需缓存

processData:false,//用于对data参数进行序列化处理 这里必须false

contentType:false,//必须

success:function(result) {

alert("上传完成!");

},

})

})

})

后台flask：

from flask importFlask,render_template,request,redirect,url_forfrom werkzeug.utils importsecure_filenameimportosfrom flask importsend_from_directoryfrom werkzeug importSharedDataMiddleware

UPLOAD_FOLDER= ‘/uploads‘ #文件存放路径ALLOWED_EXTENSIONS= set([‘jpg‘])#限制上传文件格式

app= Flask(__name__)

app.config[‘UPLOAD_FOLDER‘] =UPLOAD_FOLDER

app.config[‘MAX_CONTENT_LENGTH‘] = 5 * 1024 * 1024

def allowed_file(filename):

return ‘.‘ in filename and \

filename.rsplit(‘.‘, 1)[1].lower() in ALLOWED_EXTENSIONS

@app.route(‘/upload/‘, methods=[‘GET‘, ‘POST‘])defupload_file():if request.method == ‘POST‘:#check if the post request has the file part

if ‘file‘ not inrequest.files:

flash(‘No file part‘)returnredirect(request.url)

file= request.files[‘file‘]#if user does not select file, browser also

#submit an empty part without filename

if file.filename == ‘‘:

flash(‘No selected file‘)returnredirect(request.url)if file andallowed_file(file.filename):

filename=secure_filename(file.filename)

file.save(os.path.join(app.config[‘UPLOAD_FOLDER‘], filename))return ‘{"filename":"%s"}‘ %filenamereturn ‘‘

以上基本上就可以实现上传功能了。

以下是对界面样式，就是选择文件的那个上传按钮样式做了一些修改

如下图：

HTML：此处还添加了文件格式限制，只能选择 .torrent 文件

选择文件