文档章节

前端图片预览

Bax_Max
 Bax_Max
发布于 2017/08/26 15:12
字数 232
阅读 16
收藏 0

//图片预览
    function upView(id) {
        var input1 = document.getElementById(id);
        if(typeof FileReader === 'undefined') {
            alert("抱歉,你的浏览器不支持 FileReader");
            input1.setAttribute('disabled', 'disabled');
        } else {
            input1.addEventListener('change', readFile, false);
        }
    }
    //多图上传
    function readFile() {
        var Othis = $(this);
        var _this = this;
        var file = this.files[0]; //获取上传文件列表中第一个文件
        // console.log(file);
        if(!/image\/\w+/.test(file.type)) {
            //图片文件的type值为image/png或image/jpg
            alert("文件必须为图片!");
            return false;
        }
        var reader = new FileReader(); //实例一个文件对象
        reader.readAsDataURL(file); //把上传的文件转换成url
        //当文件读取成功便可以调取上传的接口
        reader.onload = function(e) {
//            var str = '<div class="img_wrap"><img class="img1" src="' + this.result + '" alt="" /><img class="close" src="images/h_close.png" alt="" /></div>';
//            Othis.parent().before(str);
            Othis.siblings('img').attr('src',this.result);
            //删除预览图片
//            $('.img_wrap').on('click','.close',function(){
//                $(this).parent().remove();
//            })
        }
    };

图片预览js

原理:通过给input添加change事件来得到选择图片的路径,然后把路径赋值给想要展示的图片src即可

© 著作权归作者所有

Bax_Max
粉丝 0
博文 1
码字总数 232
作品 0
聊城
前端工程师
私信 提问
文档预览功能使用技巧(4)---图片水印

感谢@磊知、@春长、@拜刀同学的支撑! 一、导语 智能媒体管理 提供了文档预览功能,通过 快速搭建 文章的介绍,详细描述了使用 “文档转换 + JS 前端渲染引擎” 实现文档预览的过程,本文将介...

luoqingchao
2018/07/12
0
0
前端设计师必收的5款免费响应式布局测试工具

我在给客户做网站的过程中,不少客户都会要求做响应式设计,响应式的网站也越来越多。但是响应式的网站在具体操作过程中,会有很多问题被忽略,所以我一般会使用一些响应式设计工具来测试这些...

尹公子
2017/11/02
0
0
weui上传文件完整例子,后台Java接受,SSM框架,要解决的问题是接受2张以上图片

weUI的Uploader组件,目前已实现的功能是,一个input type=file,上传图片,有压缩预览,最多6张,每读取一张,js就添加了节点预览一张,但是表单直接提交时,后台获得的是文件标签最后一次操...

辉煌霸猪
2017/11/30
1K
2
基于 Nodejs/Gulp 的前端自动化工具--Flow-CLI

Flow-CLI 是基于 Nodejs/Gulp 的前端自动化工具,是Flow-UI的配套命令行工具,实现自动初始化、组件化开发、静态资源编译、静态资源优化、图片压缩等前端自动化需求。 功能 初始化项目 构建中...

特欧威尔
2017/06/12
121
0
Python综合Web案例_在线为头像添加装饰

前几天元旦, 用Python为自家公众号做了一个"革面"的活动页面,活动的效果非常好,分享一下实现过程: 前端: BootStrap, Jquery, Jcrop 后端: Django, Pillow 第一步: 选择头像 初始页面 这是一个...

木子昭
2018/01/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

0.01-Win10安装linux子系统

一、安装Debian子系统 -1、控制面板设置: -1.1、打开“控制面板” —— “程序” —— “启用或关闭Windows功能” —— 勾选 “适用于Linux的Windows子系统” -2、设置: -2.1、打开“设置”...

静以修身2025
昨天
0
0
init 0-6 (启动级别:init 0,1,2,3,4,5,6)

启动级别: init 0,1,2,3,4,5,6 这是个很久的知识点了,只是自己一直都迷迷糊糊的,今天在翻出来好好理解下。。 0: 停机 1:单用户形式,只root进行维护 2:多用户,不能使用net file system...

圣洁之子
昨天
2
0
Android Camera HAL浅析

1、Camera成像原理介绍 Camera工作流程图 Camera的成像原理可以简单概括如下: 景物(SCENE)通过镜头(LENS)生成的光学图像投射到图像传感器(Sensor)表面上,然后转为电信号,经过A/D(模数转...

天王盖地虎626
昨天
2
0
聊聊Elasticsearch的ProcessProbe

序 本文主要研究一下Elasticsearch的ProcessProbe ProcessProbe elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/monitor/process/ProcessProbe.java public class ProcessProb......

go4it
昨天
2
0
mysql PL(procedure language)流程控制语句

在MySQL中,常见的过程式SQL语句可以用在存储体中。其中包括IF语句、CASE语句、LOOP语句、WHILE语句、ITERATE语句和LEAVE语句,它们可以进行流程控制。 IF语句相当于Java中的if()...else if(...

edison_kwok
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部