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. 转载：HBuilder常用快捷键

    原文:http://www.cnblogs.com/DCL1314/p/8625110.html HBuilder常用快捷键 1.文件 新建 Ctrl + N 关闭 Ctrl + F4 全部关闭 Ct ...

  2. mysql:赋予用户权限、查看及修改端口号

    一.mysql 赋给用户权限 grant all privileges on *.* to joe@localhost identified by '1'; flush privileges; 即用u ...

  3. appium+java（二）appium初始化参数部分详解

    Capabilities介绍 实际上它的全称是:Desired capabilities Desired capability是一个JSON对象,包含一组key和value值.它由客户端发送给服务端, ...

  4. 阿里云服务器ubuntu 配置

    由于阿里云的导入自定义 ubuntu 镜像需要开通 OSS 快照是收费的(看着感觉不贵,但是也很麻烦),而且自己已配置好的镜像想导入需要转换格式,还存在不能使用的情况,所以麻烦点直接在阿里云原来的ub ...

  5. 洛谷P5110 块速递推 [分块]

    传送门 思路 显然可以特征根方程搞一波(生成函数太累),得到结果: \[ a_n=\frac 1 {13\sqrt{337}} [(\frac{233+13\sqrt{337}}{2})^n-(\fr ...

  6. fatal: refusing to merge unrelated histories

    Git 提交代码时遇到冲突了,所以 git pull 拉不下来远程代码.使用一下命令解决: git pull origin master --allow-unrelated-histories 然后解 ...

  7. oracle 根据一个时间段获取这个时间段内所有月份、天数、日期

    注:本文来源于< oracle 根据一个时间段获取这个时间段内所有月份.天数.日期 > 获取月份列表: SELECT TO_CHAR(ADD_MONTHS(TO_DATE('2014-10 ...

  8. Confluence 6 从站点首页集中访问面板

    如果你选择设置一个页面为你的站点主页面,但是你还是希望你的用户能够访问 Confluence 的主面板,你可以将主面板的连接添加到应用导航(Application Navigator)中. 希望添加 ...

  9. SpringMVC拦截器与异常处理

    点击查看上一章 在我们SpringMVC中也可以使用拦截器对用户的请求进行拦截,用户可以自定义拦截器来实现特定的功能.自定义拦截器必须要实现HandlerInterceptor接口 package c ...

  10. LeetCode（119）：杨辉三角 II

    Easy! 题目描述: 给定一个非负索引 k,其中 k ≤ 33,返回杨辉三角的第 k 行. 在杨辉三角中,每个数是它左上方和右上方的数的和. 示例: 输入: 3 输出: [1,3,3,1] 进阶: ...