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. MSSQL—行转列

    行转列,是SQL中经常会遇到的一个问题,并且分为静态转换和动态转换,所谓静态转换即在转换的行数已知或固定:动态转换则为转换的行数不固定. 转换的方法一般采用case when语句或pivot(MSSQ ...

  2. Select2日常操作集合

    1.获得多选值 var arraySelected = $('#carTypes').select2("data"); var carTypesDesc = ''; for (va ...

  3. npm dev run 报错

    解决办法: npm run dev --port 8088 Error: listen EACCES 0.0.0.0:8080at Object.exports._errnoException (ut ...

  4. python深浅拷贝与赋值

    初学编程的小伙伴都会对于深浅拷贝的用法有些疑问,今天我们就结合python变量存储的特性从内存的角度来谈一谈赋值和深浅拷贝~~~ 预备知识一——python的变量及其存储 在详细的了解python中赋 ...

  5. ProtocolError: <ProtocolError for 127.0.0.1/RPC2: 401 Unauthor.

    安装cloudera-manager-agent报错 查看/var/log/cloudera-scm-agent.log 报错 Traceback (most recent call last): F ...

  6. 小程序---textarea踩坑

    1.小程序中textarea不能在scroll-view.swiper.picker-view等等里面运用. 2.不在fixed布局的页面中,placeholder也会随着页面滚动,解决方法:顶级父元 ...

  7. Zookeeper客户端Curator的使用，简单高效

    Curator是Netflix公司开源的一个Zookeeper客户端,与Zookeeper提供的原生客户端相比,Curator的抽象层次更高,简化了Zookeeper客户端的开发量. 1.引入依赖: ...

  8. Wireless Penetration Testing(命令总结)

    1.对本书出现的无线网络涉及的命令做一总结 查看无线网卡( Create a monitor mode interface using your card as shown in the follow ...

  9. anaconda中的包如何传到pycharm中使用?

    在pycharm的setting中设置 在project interpreter 中的 existing environment 中选择 anaconda3安装目录下的的 python.exe 就可以 ...

  10. Nginx详解十二：Nginx场景实践篇之跨站访问相关

    跨站访问 浏览器请求一个页面的时候,发送了两个域名的请求 此情况不安全,容易出现CSRF攻击,所以浏览器禁止跨域访问 Nginx设置打开跨站访问 配置语法:add_header name value ...