python实现文件上传预览_PythonStudy_关于上传图片预览

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

用户注册

用户名：

密码：

邮箱：