flask +layUI+ ajax 上传图片

flask +layUI+ ajax 上传图片-放到本地文件夹中
记录：
1、在使用layui时出现的问题，加载css,js出现问题
GET http://127.0.0.1:5000/layui/css/layui.css net::ERR_ABORTED 404 (NOT FOUND)
然后我将layui文件夹放到static里改成< link rel=“stylesheet” href=“…/static/layui/css/layui.css” media=“all”>，就行了（好像对于layui文件相对位置的加载，以当前的html位置为基准）

2、使用ajax时忘记加载 jquery < script src=“…/static/js/jquery-1.10.1.min.js”> </ script>
3、url错误导致一直404 url: “…/user/upload”,
4、UPLOAD_FOLDER = ‘./utils/uploads’ #文件存放路径—不能忘了./ 表示当前项目位置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="../static/layui/css/layui.css" media="all"><script src="../static/layui/layui.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div><input type="file" name="FileUpload" id="FileUpload"><a class="layui-btn layui-btn-mini" id="btn_uploadimg">上传图片</a>
</div>
<script src="../static/js/jquery-1.10.1.min.js"></script>
<script type="text/jscript">$(function () {$("#btn_uploadimg").click(function () {var fileObj = document.getElementById("FileUpload").files[0]; // js 获取文件对象if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {alert("请选择图片");return;}var formFile = new FormData();formFile.append("action", "UploadVMKImagePath");formFile.append("file", fileObj); //加入文件对象// ajax 提交var form_data = formFile;console.log(form_data);$.ajax({url: "../user/upload",data: form_data,type: "post",dataType: "json",cache: false,//上传文件无需缓存processData: false,//用于对data参数进行序列化处理 这里必须falsecontentType: false, //必须success: function (result) {alert("上传完成!");},})})})</script>
</body></html>

#配置里
UPLOAD_FOLDER = './utils/uploads'  #文件存放路径
ALLOWED_EXTENSIONS = set(['jpeg']) #限制上传文件格式app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDERapp.config['MAX_CONTENT_LENGTH'] = 5 * 1024 * 1024

@user_blueprint.route('/upload/', methods=['GET', 'POST'])
@is_login
def upload():if request.method == 'POST':# check if the post request has the file partif 'file' not in request.files:flash('No file part')return redirect(request.url)file = request.files['file']# if user does not select file, browser also# submit an empty part without filenameif file.filename == '':flash('No selected file')return redirect(request.url)if file and allowed_file(file.filename):print("file",file)filename = file.filenameprint("file_name", filename)from manage import appprint("path", app.config['UPLOAD_FOLDER'])file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))return  '{"filename":"%s"}' % filenamereturn ''

参考Ajax+Python flask实现上传文件功能

flask +layUI+ ajax 上传图片相关推荐

Flask使用ajax进行前后端交互
ajax前后端交互的使用已经非常普及了, 这种数据交互方式比表单提交数据带给用户的使用体验更好一些.同时,利用ajax交互时数据传输一般使用json,我们可以很方便的管理我们所需要的数据.只需要定义好 ...
flask 和 ajax 实例
flask 和 ajax 实例项目结构: test.py from flask import Flask, render_template, request app = Flask(__name__ ...
Flask and Ajax Post HTTP/1.1 400
Flask and Ajax Post HTTP/1.1" 400 太感谢https://stackoverflow.com/了,作者真的和牛,能解决问题一下是转载的,mark一下,为了帮 ...
教你如何使用flask实现ajax数据入库
本文分享自华为云社区<[首发]flask 实现ajax 数据入库,并掌握文件上传>,作者:梦想橡皮擦. flask 实现ajax 数据入库在正式编写前需要了解一下如何在 python 函 ...
vue用form上传图片_vuejs使用FormData，ajax上传图片文件
我相信很多使用vuejs的朋友,都有采用ajax上传图片的需求,因为前后端分离后,我们希望都能用ajax来解决数据问题,传统的表单提交会导致提交成功后页面跳转,而使用ajax能够无刷新上传图片等文件. ...
C#也能PS图片，还能为网站Ajax上传图片同时生成微缩图(附Demo)
C#也能PS图片,还能为网站Ajax上传图片同时生成微缩图(附Demo) 本文旨在与各位朋友们分享我是如何在项目中用C# "ps图片" 为网站生成同比例微缩图的解决方案.如有不足之 ...
移动端压缩并ajax上传图片解决方案
移动端压缩并ajax上传图片解决方案参考文章: (1)移动端压缩并ajax上传图片解决方案 (2)https://www.cnblogs.com/norm/p/6188318.html 备忘一下.
原生ajax传值php,原生ajax上传图片，php后台处理总结
原生ajax上传图片,php后台处理总结这篇文章发布于 2018/10/03,归类于后端数据库等标签: 原生ajax上传图片,php后台处理图片上传开始做图片上传,发现之前的处理方式基本忘光了 ...
SSM+Layui实现上传图片
SSM + Layui 实现上传图片前提准备 SSM框架已经创建完成第一步 :在pom.xml文件中导入上传文件所需的依赖 <!-- ...
基于javaweb+jsp的个人日记管理系统(JavaWeb JSP MySQL Servlet SSM SpringBoot Layui Ajax)
基于javaweb+jsp的个人日记管理系统(JavaWeb JSP MySQL Servlet SSM SpringBoot Layui Ajax) JavaWeb JavaBean JSP MVC ...

flask +layUI+ ajax 上传图片

flask +layUI+ ajax 上传图片相关推荐

最新文章

热门文章