鲁达 在上一篇文章，我们讲解了基于插件实现的上传图片到后台处理，并将处理后得到的结果图与原图在前端显示。
主要idea是将图片先在后台进行缓存，我们传回两张图片的途径，在file的done函数中对<img/>标签的src属性进行更新。
但是这样子存在一个问题，就是后台“static/temp/left(right)”文件夹里的图片会越来越多。
这时候就是那个submit按钮起作用了！我们先将得到的两个路径filepath和pilepath_用‘&’合并在一起，暂时存储在一个不可见的<input type="text"/>标签中，当submit被点击时，将两个途径传回后台，后台函数接收路径并对对应路径的文件做删除remove。
<!-- demo.html -->
<body>
……
<input id="temp" type="text" value="Nothing!" style="display: none">
……
</body>
// javascript
$('#fileupload').fileupload{
...
done.function(e, data){
document.getElementById('temp').value = filepath + "&" + filepath_;
}
...
}
上一次我们已经定义了额外的submit按钮，现在我们要使用它。
1. 在后台即中新定义函数delete()
@a('/delete', methods=['POST','GET'])
def delete():
# do something
return render_template('demo.html')
同样我们要注意路由的设置，我们假设这一次的交互是在一个隐藏的页面“”实现的。
2. 前端“submit”标签与后端函数绑定
因为我们使用ajax进行数据传输，因此可以这样子做——
$('#submit').on("click", function () {
$('#progress .progress-bar').css(
'width',
0 + '%'
);// 这里实现了当我们点击submit按钮后让进度条重新归0
var filepath_ = document.getElementById('temp').value;// 获取刚刚存储在temp（text）上的数值
// try to delete the original images
var data = {
'path': ("&")[0],
'path_': ("&")[1]
}// 对字符串做分割，并通过建立字典data进行分装
$.ajax({
type: 'GET',
url:'{{ url_for("delete") }}',// 这里就实现了函数与html标签的绑定！！！
data: data, // 要传给后台的数据
dataType: 'json', // 数据格式
success: function(data){ // 当成功返回数据到后台并成功获取后台返回的数据时，采取的动作在success函数中定义，与前面的done是类似的
}
});
});
3. 完善后台delete()函数
@a('/delete', methods=['POST','GET'])
def delete():
path = reque('path') # 因为数据是通过键值对匹配的，还记得前面data的两个键值对吗？
path_ = reque('path_') # 通过“键”获取对应的“值”
if os.(path): # 先判断文件是否存在，若是，才可以有remove的意义
os.remove(path)
if os.(path_):
os.remove(path_)
return render_template('demo.html') # 停留在本页面
总结
在本文我们是分享了如何实现普通按钮的click函数实现指定元素的value/text/innerHTML等的往后台的传送。
对比上一篇博文，关于uploadfiles的实现，其大体思路还是比较相似的，即
1）定义html标签
2）重写该标签的功能函数，如file的uploadfile函数，button的onclick函数
3）通过定义新的url进行与后端函数的绑定
4）用js或jQuery代码获取并处理前台的相关数据，用字典进行封装
5）后台接收包含数据的字典data，通过“键”获取“值”