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();
});

function bindAvatar() {
    if(window.URL.createObjectURL){
        bindAvatar3();
    }
    else if(window.FileReader){
        bindAvatar2();
    }
    else {
        bindAvatar1();
    }
}



///*Ajax上传至后台并返回图片的url*/
function bindAvatar1() {
    console.log(\'Ajax上传至后台并返回图片的url\');
}

///*window.FileReader本地预览*/
function bindAvatar2() {
    console.log(\'window.FileReader本地预览\');
    $("#avatarSlect").change(function(){
        // 获取input：file对象
        var obj = $("#avatarSlect")[0].files[0];

        // 创建FileReader对象
        var fr = new FileReader();

        // 读取成功时触发显示
        fr.onload = function(){
            $("#avatarPreview").attr("src",this.result);
            $("#avatar").val(this.result);
        };
        // 将file文件读取为dataURL，
        fr.readAsDataURL(obj);
    });
}

///*window.URL.createObjectURL本地预览*/
function bindAvatar3() {
    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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <script rel="stylesheet" src="static/jquery-1.12.4.min.js" ></script>
    <script rel="stylesheet" src="static/index.js"></script>
</head>
<body>
    <div>
        <form action="">
            <h3>用户注册</h3>

            <p>用户名：<input type="text" name="userName"></p>
            <p>密码：<input type="password" name="password"></p>
            <p>邮箱：<input type="text" name="email"></p>

            <input id="avatar" type="text" value="static/bu.png" name="avatar" >
            <p><input type="submit" value="注册"></p>
        </form>

        <div>
            <input id="avatarSlect" type="file" >
            <img id="avatarPreview" src="static/bu.png" title="点击更换图片" >
        </div>

    </div>
</body>
</html>

本地浏览html

发表于
2018-06-20 09:20
笨笨是个名字
阅读(164)
评论(0)
编辑
收藏
举报

本文链接：https://www.cnblogs.com/2017Python/articles/9202181.html

PythonStudy_关于上传图片预览

PythonStudy_关于上传图片预览

PythonStudy_关于上传图片预览的更多相关文章

随机推荐

热门专题

目录导航