jQuery中的Ajax上传图片其局部刷新
想用jQuery中的Ajax实现“上传一张图片，经过处理以后在前端显示出来，且页面局部刷新”这个功能。但是目前只能把上传的图片保存在后台，但是经过处理的图片显示不出来，而且好像也不是局部刷新。有友友学习最近在学习这一块吗？帮我看看Orz
首先前端有两个图片框，一个显示上传的图片，一个显示处理后的图片（目前显示不了）；有两个按钮，一个点击了以后可以把上传的图片显示在第一个图片框，另一个点击以后会保存上传的图片，然后会对它做处理并保存处理以后的图片，然后就是把处理后的图片显示出来（目前显示这一步实现不了）
HTML代码：文件名HOG.html
{#图片框#}
<div>
<div class="picture">
<img src="../static/img/老君6.png" alt="等待上传" title="图片原图" id="img_origin" class="image"/>
</div>
<div class="picture">
<img src="../static/img/gray.png" alt="等待检测" title="图片灰度化后" id="img_gray" class="image"/>
</div>
</div>
{#提交按钮#}
<form action="{{ url_for('user.image_load') }}" method="POST" enctype="multipart/form-data">
<div class="btn_box">
<label id="hint_text">上传一张图片试试吧：</label>
<div class="user_defined_img">
<input type="file" name="btn_load" id="btn_load">
<label for="btn_load" class="button">点击上传图片</label>
<input type="submit" value="点击开始灰度化" id="btn_gray" onclick="gray()" class="button">
</div>
</div>
</form>
页面是这样的：
然后是python代码：文件名view.py
@blue.route("/HOG/", methods=["POST", "GET"])
def introduce_hog():
return render_template("HOG.html")
@blue.route("/image_load/", methods=["POST", "GET"])
def image_load():
if 'btn_load' not in request.files:
flash('No file part')
return redirect(url_for('user.image_load'))
origin_img = request.files['btn_load']
if origin_img.filename == '':
flash('No selected file')
return redirect(url_for('user.image_load'))
if origin_img and allowed_file(origin_img.filename):
filename = secure_filename(origin_img.filename)
origin_img.save(os.path.join(UPLOAD_FOLDER, filename)) # 保存前端上传过来的图片
img_stream = img_gray(os.path.join(UPLOAD_FOLDER, filename))
return img_stream
------------------------------------------下面是另一个.py文件里的------------------------------------------------------------------------
# 将图片转换成前端可以接收的形式
def transform_image(img_local_path):
with open(img_local_path, 'rb') as img_f: # 一定得是'rb'呀！
img_stream = img_f.read()
img_stream = base64.b64encode(img_stream)
return img_stream
# 图片灰度化
def img_gray(path='./static/img/老君6.png'):
raw_data = np.fromfile(path, dtype=np.uint8) # 先用numpy把图片文件存入内存：raw_data，把图片数据看做是纯字节数据
# 1、灰度化
img = cv2.imdecode(raw_data, 0) # 参数0表示读取灰度图片
cv2.imwrite(UPLOAD_FOLDER+"/test_gray.png", img) # 这里一定要用绝对路径！
return transform_image(UPLOAD_FOLDER+"/test_gray.png")
然后是js代码：文件名是HOG.js
function gray() {
"use strict";
let img_src;
$.ajax({
type: 'POST',
url: "image_load",
async: false,
processData: false,
contentType: false,
success: function (res){
alert("检测完成!");
img_src = "data:image/png;base64,"+res;
console.log(img_src);
$("#img_gray").attr("src",img_src);
},
error: function (){
alert("检测失败!");
console.log("后台处理错误");
}
});
}
目前就是一点那个“点击开始灰度化”这个按钮就出错了，而且还把页面刷新了T-T，真不知道应该咋改了，有没有会的友友，顺便帮我推荐一些学习的途径可以吗，我现在就是一整个错了也不知道到哪里查的一个大动作T^T，不胜感激！
最好用postman查一下这个接口，同时请求的时候可以试试把/image_load改为/image_load/
我把修改以后的代码贴在这里，如果有小伙伴遇到和我一样的问题可以试一试。
HTML代码：文件名HOG.html
{#图片框#}
<div class="example">
<h4>示例：左边为图像原图，右边是灰度化后的图像</h4>
<div>
<div class="picture">
<img src="../static/images/老君6.png" alt="等待上传" title="图片原图" id="img_origin" class="image"/>
</div>
<div class="picture">
<img src="../static/images/gray.png" alt="等待检测" title="图片灰度化后" id="img_gray" class="image"/>
</div>
</div>
</div>
{#提交按钮#}
<div class="btn_box">
<label id="hint_text">上传一张图片试试吧：</label>
<div class="user_defined_img">
<input type="file" name="btn_load" id="btn_load">
<label for="btn_load" class="button">点击上传图片</label>
<button type="button" id="btn_gray" onclick="gray()" class="button button1">点击开始灰度化</button>
</div>
</div>
提交的按钮属性不能是“submit"要不然就整个页面提交了，不能实现局部刷新了
然后是python代码：文件名view.py和show_hog.py
@blue.route("/HOG/", methods=["POST", "GET"])
def introduce_hog():
return render_template("HOG.html")
@blue.route("/image_load/", methods=["POST"])
def image_load():
if 'file' not in request.files:
flash('No file part')
return redirect(url_for('user.image_load'))
# # if user does not select file, browser also
# # submit an empty part without filename
origin_img = request.files["file"]
if origin_img.filename == '':
flash('No selected file')
return redirect(url_for('user.image_load'))
if origin_img and allowed_file(origin_img.filename):
filename = secure_filename(origin_img.filename)
origin_img.save(os.path.join(UPLOAD_FOLDER, filename)) # 保存前端上传过来的图片
img_stream = img_gray(os.path.join(UPLOAD_FOLDER, filename))
return img_stream
#################################show_hog.py
basedir = os.path.abspath(os.path.dirname(__file__)) # 获取当前文件所在目录的绝对路径
UPLOAD_FOLDER = basedir+'\\static\\images'
ALLOWED_EXTENSIONS = {'txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif'}
# 检查上传的图片格式是否正确
def allowed_file(filename):
return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
# 将图片转换成前端可以接收的形式
def transform_image(img_local_path):
with open(img_local_path, 'rb') as img_f:
img_stream = img_f.read()
img_stream = base64.b64encode(img_stream).decode()
return img_stream
# 图片灰度化
def img_gray(path='./static/img/老君6.png'):
raw_data = np.fromfile(path, dtype=np.uint8) # 先用numpy把图片文件存入内存：raw_data，把图片数据看做是纯字节数据
img = cv2.imdecode(raw_data, 0) # 参数0表示读取灰度图片
cv2.imwrite(UPLOAD_FOLDER+"/test_gray.png", img)
return transform_image(UPLOAD_FOLDER+"/test_gray.png")
然后是js代码：文件名是HOG.js
function gray() {
"use strict";
let fileObj = $("#btn_load")[0].files[0];
console.log(fileObj);
let form = new FormData();
let img_src;
form.append("file", fileObj);
$.ajax({
type: 'POST',
url: "/image_load/",
data: form,
async: true,
processData: false,
contentType: false,
success: function (res){
alert("完成灰度化!");
console.log("res:", res);
img_src = "data:image/png;base64,"+res;
$("#img_gray").attr("src",img_src);
},
error: function (){
alert("处理失败!");
console.log("后台处理错误");
}
});
}
我的代码主要是照着 https://blog.csdn.net/daishabby2486/article/details/129103727@红毛乌龟这个博主写的