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. nodejs process.memoryUsage() rss等参数啥含义

    1 前言 使用process.memoryUsage() ,然后可以得到一个对象如下: { rss: 4935680, heapTotal: 1826816, heapUsed: 650472, ex ...

  2. MD5算法工具类

    抽时间写了一个算法工具类,目前支持的算法有SHA1,SHA256,SHA384,SHA512,MD5,同时支持获取文件的MD5值. 使用方法如下: 获取字符串的MD5值 String str= Alg ...

  3. 并发性能的隐形杀手之伪共享（false sharing）

    在并发编程过程中,我们大部分的焦点都放在如何控制共享变量的访问控制上(代码层面),但是很少人会关注系统硬件及 JVM 底层相关的影响因素.前段时间学习了一个牛X的高性能异步处理框架 Disruptor ...

  4. Confluence 6 匿名访问远程 API

    Confluence 管理员可能希望为匿名用户禁用远程访问 API.这样能够避免恶意软件随意在网站进行批量修改. 希望禁用远程访问 API: 在屏幕的右上角单击 控制台按钮 ,然后选择 General ...

  5. Confluence 6 考虑使用自定义 CSS

    CSS 的知识储备 如果你没有有关 CSS 的相关知识,请参考页面  CSS Resources section 中的内容.当你打算开始对 Confluence 的样式表进行修改之前,你应该对 CSS ...

  6. Function types cannot have argument labels 错误解决方案

    今天在封装网络工具类的时候 报错了 经过分析发现是在Swift3.0 把闭包的入参的参数名去掉就好了 正确写法 completion: @escaping (Any?, Bool)->() 错误 ...

  7. Python学习【第2篇】：Python数据结构

    Python数据结构 1.数字类型 2.字符串 3.列表 4.元组 5.字典 6.集合

  8. kafka消息的分发与消费

    关于 Topic 和 Partition: Topic: 在 kafka 中,topic 是一个存储消息的逻辑概念,可以认为是一个消息集合.每条消息发送到 kafka 集群的消息都有一个类别.物理上来 ...

  9. ActiveMQ消息的消费原理

    消费端消费消息: 在 初识ActiveMQ 中我提到过,两种方法可以接收消息,一种是使用同步阻塞的ActiveMQMessageConsumer#receive方法.另一种是使用消息监听器Messag ...

  10. LeetCode（101）：对称二叉树

    Easy! 题目描述: 给定一个二叉树,检查它是否是镜像对称的. 例如,二叉树 [1,2,2,3,4,4,3] 是对称的. 1 / \ 2 2 / \ / \ 3 4 4 3 但是下面这个 [1,2, ...