python word附件预览 python怎么预览

python中，无论是上传头像，是啊发布图片新闻等，都需要进行图片预览，主要有两种实现逻辑：

一、将图片传至后端服务器，服务器返回图片的url给前端，前端根据反馈的url进行显示，

二、直接本地预览，将本地图片导入前端内存，前端从到内存中读取后显示，

方式一，浪费服务器资源和占用带宽、流量，方式二影响前端响应且受客户端兼容性的影响，各有利弊

将图片传至服务器后台，主要依靠ajax，这里主要说一下图片本地预览，有两种实现方式：

1、window.FileReader

在HTML5中，定义了FileReader作为文件API的重要成员用于读取文件，

FileReader共有四种方法，如下：

FileReader还有各事件模型，用于不同情境下触发函数：

这里，进行图像预览，需要使用方法readAsDataURL，当文件读取成功时由onload触发相应处理函数，

另外需要注意：FileReader的读取结果保存在result中，需要使用this.result获取，

2、window.URL.createObjectURL

在内存中，创建一个file对象或blob对象的url对象，再根据url进行显示，

需要注意的是，每一次使用该方法，都会创建一个新的URL对象，即使已经用相同的对象作为参数创建过。

当不再需要这些URL对象时，每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。

浏览器会在文档退出的时候自动释放它们，但是为了获得最佳性能和内存使用状况，应该在安全的时机主动释放掉它们。

$(function(){
bindAvatar();
});functionbindAvatar() {if(window.URL.createObjectURL){
bindAvatar3();
}else if(window.FileReader){
bindAvatar2();
}else{
bindAvatar1();
}
}///*Ajax上传至后台并返回图片的url*/
functionbindAvatar1() {
console.log('Ajax上传至后台并返回图片的url');
}///*window.FileReader本地预览*/
functionbindAvatar2() {
console.log('window.FileReader本地预览');
$("#avatarSlect").change(function(){//获取input：file对象
var obj = $("#avatarSlect")[0].files[0];//创建FileReader对象
var fr = newFileReader();//读取成功时触发显示
fr.onload = function(){
$("#avatarPreview").attr("src",this.result);
$("#avatar").val(this.result);
};//将file文件读取为dataURL，
fr.readAsDataURL(obj);
});
}///*window.URL.createObjectURL本地预览*/
functionbindAvatar3() {
console.log('window.URL.createObjectURL本地预览');
$("#avatarSlect").change(function(){//获取input：file文件对象(blob)，包含name、size、type等信息
var obj = $("#avatarSlect")[0].files[0];//根据file对象创建一个URL对象
var wuc =window.URL.createObjectURL(obj);//显示图片和地址信息
$("#avatarPreview").attr('src',wuc);
$("#avatar").val(wuc);当图片加载完成后释放URL(jquery3.2.1中会报错),浏览器关闭后也会自动释放，//$("#avatarPreview").load(function({//window.URL.revokeObjectURL(wuc);//}));
});
}

本地浏览js

index