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

最新推荐文章于 2023-06-19 10:55:54 发布

weixin_39710361

最新推荐文章于 2023-06-19 10:55:54 发布

阅读量157

点赞数

文章标签： python flask ajax

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 文件

选择文件

CSS样式：

.file{position:relative;display:inline-block;background:#D0EEFF;border:1px solid #99D3F5;border-radius:4px;padding:4px 12px;overflow:hidden;color:#1E88C7;text-decoration:none;text-indent:0;line-height:20px;

}.file input{position:absolute;font-size:100px;right:0;top:0;opacity:0;

}.file:hover{background:#AADFFD;border-color:#78C3F3;color:#004974;text-decoration:none;

}

以上代码选择文件后，不会显示文件名，所以需要添加一个事件：

$("#btn_file").on("change","input[type='file']",function(){var filePath=$(this).val();if(filePath.indexOf("torrent")!=-1){var arr=filePath.split('\\');var fileName=arr[arr.length-1];

$("#showFileName").html(fileName);}else{

$("#showFileName").html("");

}

})

上传的代码没做修改：此处增加了一个最大文件大小限制 5Mb

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

if (typeof (fileObj) == "undefined" || fileObj.size <= 0|| $("#showFileName").html()=="") {

alert("请选择BT种子");return;

}if(fileObj.size>5242880)

{

alert("BT种子限制最大 5Mb");return;

}var formFile = newFormData();