文章目录
- 1，flask和ajax实现图片上传，同时显示图片到网页上
- 第一部分
- 两个注意点
- 前端代码
- js代码
- 后端代码
- 第二部分
- 上传图片的显示
- 效果展示
- js实现
- 2，ajax实现分页
- 分页实现
- 3，基于分页，更改表格数据，更新另一个表格的数据
- 1、实现效果
- 2、实现思路
- 表格实现
- 修改值
- 4，总结
整体项目的逻辑是:
1，flask和ajax实现图片上传，同时显示图片到网页上
第一部分
两个注意点
① enctype=“multipart/form-data”
②
processData: false,//上传文件，不要转换为字符串（jquery默认转化为字符串）
contentType: false,//取消默认传输策略（默认内容编码策略可能报错）前端代码
就是简单的form表单嵌套input（file类型）
<form id="uploadForm" enctype="multipart/form-data">
<input id="uploadImage" type="file" name="file"/>
</form>js代码
ajax上传文件数据
$('#btn_uploadimg').click(function () {
var formFile = new FormData($('#uploadForm')[0])
$.ajax({
url: "/upload/",
type: "POST",
data: formFile,
processData: false,
contentType: false,
success: function (msg) {
console.log(msg);
}
})
})后端代码
接收文件，然后直接内置save进行保存
（我之前看到很多地方flask后端使用很麻烦的方法进行保存，我表示不理解）
UPLOAD_FOLDER = 'static/uploads' # 文件存放路径
@app.route('/upload/', methods=['GET', 'POST'])
def upload_file():
# 接收图片
if request.method == 'POST':
f = request.files['file']
basepath = os.path.dirname(__file__)
upload_path = os.path.join(basepath, UPLOAD_FOLDER, f.filename)
f.save(upload_path)第二部分
上传图片的显示
效果展示
js实现
这里其实也并不难，直接使用js就能实现
先用FileReader读取图片，然后使用ajax绑定图片后使用show()直接显示图片
$("#uploadImage").on('change', function () {
if (typeof (FileReader) != "undefined") {
var image_holder = $("#image-holder");
image_holder.empty();
var reader = new FileReader();
reader.onload = function (e) {
$("<img />", {
"src": e.target.result,
"class": "thumb-image",
"style": "margin:20px",
"width": "200px",
}).appendTo(image_holder);
}
image_holder.show();
reader.readAsDataURL($(this)[0].files[0]);
} else {
alert("你的浏览器不支持FileReader.");
}
});2，ajax实现分页
对于ajax/分页有心理恐惧的朋友需要知道一个事儿，这玩意儿很简单，就是废时间
分页实现
实现原理：1，使用列表截取，截取出部分数据，进行展示
比如100条数据，假设一页显示10条数据，第1页，直接截取0-10条数据，就可以（同理，第二页就是11-20，第三页就是21-30）
我们以0开始：那么这个开始就可以用(page-1)*limit表示开头，page*limit表示结尾（limit为1，开头为0，结尾为10，同理）
所以分页实现不难，是麻烦：需要通过判断（页数小于3，页数大于最大页等多种情况），重写分页列表，直接通过.html(“更换内容”)进行内容更换
所以是不是很简单，js代码如下
function page_content(list_, page,page_list) {
var page_num = Math.floor(list_.length / 10)
if (list_.length % 10 >= 1) {
page_num += 1
}
var page_html = ''
if (Number(page) <= 3) {
page_html += `<ul style="display: flex">
<li οnclick="`+page_list+`(1)">1 </li>
<li οnclick="`+page_list+`(2)">2 </li>
<li οnclick="`+page_list+`(3)">3 </li>
<li οnclick="`+page_list+`(4)">4 </li>
<li>......</li>
<li οnclick="`+page_list+`(` + page_num + `)">` + page_num + `</li>
</ul>`
} else if (Number(page) > 3 && Number(page) < page_num - 1) {
page_html += `<ul style="display: flex">
<li οnclick="`+page_list+`(1)">1 </li>
<li>......</li>
<li οnclick="`+page_list+`(` + (page-1) + `)">` + (page-1) + ` </li>
<li class="red" οnclick="`+page_list+`(` + Number(page) + `)">` + Number(page) + ` </li>
<li οnclick="`+page_list+`(` + (Number(page) + 1) + `)">` + (Number(page) + 1) + `</li>
<li>......</li>
<li οnclick="`+page_list+`(` + page_num + `)">` + page_num + `</li>
</ul>`
} else {
page_html += `<ul style="display: flex">
<li οnclick="`+page_list+`(1)">1 </li>
<li>......</li>
<li οnclick="`+page_list+`(` + (page_num - 3) + `)">` + (page_num - 3) + ` </li>
<li οnclick="`+page_list+`(` + (page_num - 2) + `)">` + (page_num - 2) + ` </li>
<li οnclick="`+page_list+`(` + (page_num - 1) + `)">` + (page_num - 1) + `</li>
<li>......</li>
<li οnclick="`+page_list+`(` + page_num + `)">` + page_num + `</li>
</ul>`
}
return page_html
}3，基于分页，更改表格数据，更新另一个表格的数据
1、实现效果
修改左边的数据，能够传给后端，后端再通过左边的表格数据，对右边数据进行调整（是一个使用模型来训练的数据，此处为模拟数据）
2、实现思路
实现前面修改内容并不难，修改的内容进行保存（因为后续需要传给后端）还是有点难度的
然后使用js的全局变量进行了解决：类似以下方式，不声明类型默认为全局变量
a = [];表格实现
我通过后端给我的列表，循环拼接到图中的表格（如下写了一个函数）
这里比较巧妙地一个地方是我给每一条input绑定了一个对应索引的id（这样我就可以通过对应的id进行绑定）
function change_list1(list_1, page) {
var tr1 = "<div style=\"flex: 1;margin-right: 40px\">Recognized concepts:\n <table class=\"table table-bordered\">\n <thead>\n <tr>\n <th>Concept</th>\n <th>Probability</th>\n </tr>\n </thead>\n <tbody>"
var start = (page - 1) * 10//页面结尾
var page_len = page * 10//页面开始
var page_html = page_content(list_1, page,"page_list1")
if (list_1.length - page_len < 10) {
page_len = list_1.length
}
for (var i = start; i < page_len; i++) {
console.log(i)
tr1 += `
<tr>
<th scope="row">` + Object.keys(list_1[i])[0] + `</th>
<td><input id="` + i + `" type='text' value='` + list_1[i][Object.keys(list_1[i])[0]] + `'></td>
</tr>
`
}
return tr1 + ` </tbody></table>
` + page_html + `
</div>
</div>`;
}修改值
如何才能让我的值修改之后被保留，这里的思路是：全局变量list存储着我的数据，我通过索引将input框进行了绑定，这样当我修改值的时候，对应的id对应着对应的索引，这样我根据索引修改该索引的list中的值
function order_() {
for (var i = 0; i < list1.length; i++) {
$("#" + i).on("change", function () {
list1[this.id][Object.keys(list1[this.id])[0]] = $("#" + this.id).val()
console.log(list1)
})
}
}这里利用循环对id进行了绑定，当他们的内容被change的时候，就会触发我们的函数，这样我们就可以把修改之后的值重新绑定到全局变量list1的身上，当我们需要将数据传给后端时，直接将全局变量list1传给后端即可
4，总结
每一个项目，都会让你对一些解决问题的简洁思路更加理解和深入，多做项目，一定是能够加深你使用该工具的熟练度的，比如这里的js，最初我在学js的时候，一直有一定的畏难情绪，但是当你使用之后会发现，无非就是通过特定的方法进行绑定，然后对数据进行修改而已
而js大量的第三方插件其实可以让我们省大量的理解：不论是分页，还是一些看起来比较难的操作，都有集成好的第三方插件js
但是为什么我们还是需要掌握这些底层代码，因为当你想要优化的时候，第三方插件是不顺手的
