HTML5上传图片预览功能

HTML代码如下:

<!--

date: 2018-04-27 14:41:35

author: 王召波

descride: HTML5上传图片预览功能

-->

<!DOCTYPE html>

<html>

    <head>

    <meta charset="utf-8">

    <title>HTML5上传图片预览功能</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>

    <style type="text/css">

        #feedback{

            min-height: 200px;

            text-align: center;

            border: 1px solid silver;

            border-radius: 3px;

        }

        #feedback img{

            margin:3px 10px;

            border: 1px solid silver;

            border-radius:3px;

            padding: 6px;

            width: 35%;

            height: 85%;

        }

        #feedback p{

            font-family: "微软雅黑";

            line-height: 120px;

            color: #ccc;

        }

        .file {

            position: relative;

            display: inline-block;

            border: 1px solid #1ab294;

            border-radius: 4px;

            padding: 8px 16px;

            overflow: hidden;

            color: #fff;

            text-decoration: none;

            text-indent: 0;

            line-height: 20px;

            color: #1ab294;

            }

        .file input {

            position: absolute;

            font-size: 100px;

            right: 0;

            top: 0;

            opacity: 0;

        }

        .box{

            margin-top: 10px;

            text-align: center;

        }

        .box a{

            margin-left: 10px;

        }

    </style>

</head>

<body>

    <!-- 响应返回数据容器 -->

    <div id="feedback">

    </div>

    <div class="box">

        <a href="javascript:;" class="file">选择图片

            <input type="file" id="inputfile" name="" class="photo">

        </a>

        <a href="javascript:;" class="file close">重新选择

            <input type="buttom" class="photo">

        </a>

    </div>

<script type="text/javascript">

$(function () {

    $("#inputfile").change(function (e) {

        var imgURL = '';

        var file = e.target.files[0] || e.dataTransfer.files[0];

        if (file) {

            try{

                try{

                    imgURL =  file.getAsDataURL();

                }catch(e){

                    imgURL = window.URL.createObjectURL(file);

                }

            }catch(e){

                var reader = new FileReader();

                reader.onload = function () {

                    imgURL = this.result;

                }

                reader.readAsDataURL(file);

            }

            $("#feedback").append('<img src="'+imgURL+'">');;

        }

    });

})

</script>

</body>

</html>

效果图:

HTML5上传图片预览功能的更多相关文章

  1. HTML5上传图片预览

    <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...

  2. JS 上传图片 + 预览功能（一）

    JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...

  3. 通过HTML5 FileReader实现上传图片预览功能

    原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...

  4. 【小月博客】用HTML5的File API做上传图片预览功能

    前段时间做了一个项目,涉及到上传本地图片以及预览的功能,正好之前了解过 html5(点击查看更多关于web前端的有关资源) 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(P ...

  5. HTML5 上传图片预览

    html5出现之前如果需要上传图片预览 一般都是先上传到服务器然后远程预览 html5出现之后   有个filereader 解决了这问题 //选中图片之后 $("#fileAddPic&q ...

  6. 关于H5里的API，上传图片预览功能

    FileReader:读取本地图片文件并显示 写在开头 之前公司要求做一个H5页面,功能是照相和选择相册相片,并且能在屏幕上预览.然后我就傻里吧唧的各种找插件,因为有些插件不适配手机的型号,安卓机基本 ...

  7. HTML5拖放事件-上传图片预览功能

    主要用到的知识点有dataTransfer对象和FileReader(读取文件信息) 1.创建简单的HTML标签: <body> <div id="box"> ...

  8. h5拖放-上传图片预览功能

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. JS 上传图片 + 预览功能（二）

    简单粗暴 直接进入主题: Html <script src="../js/jquery-2.1.1.min.js"></script> <style& ...

随机推荐

  1. python习题实例（上）_update18/07/03

    用以记录python学习过程中做过的小习题~ ヾ(◍°∇°◍)ﾉﾞ 1.生成两个列表,分别存放将100以内的偶数&奇数 odd_number=[] even_number=[] for i i ...

  2. 程序包管理dpkg、apt-get、服务端openssh-server与客户端Xshell设置及lrzsz安装使用

    一.程序包管理器 dpkg.apt-get 1.dpkg 安装:sudo dpkg -i cmatrix_1.2a-5build3_amd64.deb 卸载:sudo dpkg -r cmatrix ...

  3. python 知识梳理

    1.数据类型:字符串,列表,元组,字典,集合.处理每种数据类型的函数 2.判断与循环部分 3.高级函数:lambda,map,reduce,filter 4.自定义模块以及第三方模块 5.函数式编程 ...

  4. 机器学习之线性回归---logistic回归---softmax回归

    在本节中,我们介绍Softmax回归模型,该模型是logistic回归模型在多分类问题上的推广,在多分类问题中,类标签 可以取两个以上的值. Softmax回归模型对于诸如MNIST手写数字分类等问题 ...

  5. python自动化-unittest批量执行用例（discover）

    前言 我们在写用例的时候,单个脚本的用例好执行,那么多个脚本的时候,如何批量执行呢?这时候就需要用到unittet里面的discover方法来加载用例了. 加载用例后,用unittest里面的Text ...

  6. rpm命令用法小结

    rpm 是用来管理 Redhat系列的包管理工具: 通过将打包编译好的程序包文件放置在各自的位置上,就完成了安装: rpm   [OPTIONS]   PACHAGE_FILE 1 安装:: -i : ...

  7. mysql 安装问题二：mysqld: Can't create directory 'E:\Software\mysql-5.7.24-winx64\data\' (Errcode: 2 - No such file or directory)

    原因:my.ini文件中的basedir(设置mysql的安装目录).datadir(设置mysql数据库的数据的存放目录)与MySQL解压后的路径不一致 解决办法: 将basedir=E:\Soft ...

  8. phpmyadmin 安装

    首先,安装mysql $ sudo apt-get install mysql-server$ sudo apt-get install mysql-client安装时输出root用户的密码在安装ph ...

  9. Metasploit框架问题

    1.使用nmap 扫描SMB服务漏洞信息 nmap -P0 --script=smb-check-vulns 10.10.15.123 2.sql语句绕过后台 这部分我待会补充 只有尽可能的过滤,没有 ...

  10. Java面向对象（二）

    一.封装 1.为什么要使用封装在类的外部直接操作类的属性是”不安全的"2.如何实现封装   1).属性私有化:设置属性的修饰符为private    2) .提供公共的set和get方法赋值 ...