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学习第2天

    03 pycharm使用04 格式化输出05 while循环 why: 吃饭睡觉上课, 地球绕着太阳公转,单曲循环,列表循环. what: while how: while 条件: 循环体 where ...

  2. highcharts之柱状图

    <div class="row"> <div class="col-md-12"> <div id="container ...

  3. Java RMI与RPC的区别

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6542811.html  一:RPC 远程过程调用 RPC(Remote Procedure Call Prot ...

  4. __new__方法和pop方法(判断）

    new方法(构造方法)是在函数一加载的时候就被执行,在init方法执行之前被执行 def __new__(cls,*args,**kwargs): if kwargs.pop('many',False ...

  5. jqGrid后台交互样例

    schoolManageGrid = $("#jqGrid").jqGrid({ url : ctx.path+"/api/school/querySchools&quo ...

  6. 如何取出DataTable中某几个字段（列名）组合新表

    在偶不知道第二种方法之前.偶费了好大劲才把这个问题解决.下面把这两个方法都帖出来,请大家批评指正.或有更好的办法也帖出来,一起交流 第一种方法:            string sql = &qu ...

  7. vue入手

    https://www.jianshu.com/p/dc5057e7ad0d    (最全入坑教程) http://doc.liangxinghua.com/vue-family/1.4.html(v ...

  8. SQL Server 函数之日期格式化函数

    SQL Server 函数之日期格式化函数 高文龙关注0人评论612人阅读2017-09-23 13:47:07 SQL Server 函数之日期格式化函数 对于一些经常写SQL Server执行语句 ...

  9. Confluence 6 目录中的数据库

    所有的其他数据库,包括有页面,内容都存储在数据库中.如果你安装的 Confluence 是用于评估或者你选择使用的是 Embedded H2 Database 数据库.数据库有关的文件将会存储在 da ...

  10. Confluence 6 MySQL 测试你的数据库连接

    在你的数据库设置界面,有一个 测试连接(Test connection)按钮可以检查: Confluence 可以连接你的数据库服务器 数据库字符集,隔离级别和存储引擎是正确的 你的数据库用户有正确的 ...