<!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title>图片上传预览</title>

     <style>

         .check_box{

             position: relative;

             width: 100px;

             height: 100px;

             margin: 20px;

             display: flex;

             flex-direction: row;

             align-items: center;

         }

         #img_preview1{

             display: block;

             width: 100px;

             height: auto;

         }

         input#zx_img1 {

             position: absolute;

             top: 0;

             left: 0;

             width: 100px;

             height: 100px;

             opacity: 0;

             z-index: 9;

         }

     </style>

 </head>

 <body>

     <div class="check_box">

         <img id="img_preview1" src="./images/add.png" alt="上传图片">

         <input type="file" name="file" id="zx_img1" style="padding: 0px;" accept="image/jpeg, image/jpg, image/png, image/gif "

             placeholder="&nbsp;上传文件">

     </div>

     <p>

         图片大小支持50kb以内,支持拓展名:jpg,png,gif

     </p>

     <!--引入jQuery插件 -->

     <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>

     <script>

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

             var file = e.target.files || e.dataTransfer.files;

             if (file) {

                 if (file[0] && (file[0].size / 1024).toFixed(0) > 50) {

                     console.log('你选择的文件太大，文件大小为：' + (file[0].size / 1024).toFixed(0) + "kb");

                     // return false

                 }

                 var reader = new FileReader();

                 reader.onload = function () {

                     console.log(this.result);

                     $("#img_preview1").attr("src", this.result);

                 }

                 reader.readAsDataURL(file[0]);

             }

         });

     </script>

 </body>

 </html>

H5 实现图片上传预览的更多相关文章

  1. 图片上传预览，兼容IE

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

  2. 用html5文件api实现移动端图片上传&预览效果

    想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象  Blob表示原始二进制数据,Html5的file对象就继 ...

  3. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  4. Jquery图片上传预览效果

    uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...

  5. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

  6. Javascript之图片上传预览

    使用Javascript之图片上传预览,我们无需上传到服务器中,兼容所有浏览器. 关键方法是使用微软库filter:progid:DXImageTransform.Microsoft.AlphaIma ...

  7. HTML5 图片上传预览

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  8. ASP.NET工作笔记之一：图片上传预览及无刷新上传

    转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...

  9. php 图片上传预览(转)

    网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

随机推荐

  1. php实现遍历目录

    用递归方法实现目录的遍历: <?php header("Content-type: text/html; charset=utf-8"); date_default_time ...

  2. P5016 龙虎斗 题解

    这题真是*到家了QAQ 我在考场上调了将近75min,总算过了大样例. 首先,我们可以简化这一题,这道题的本质就是让我们找出一个点p2,往那个点上面加上s2个单位的重量,使得以m为中的两边的权值和的差 ...

  3. windows下启动和运行分布式消息中间件消息队列 kafka

    本文转载至:https://www.cnblogs.com/flower1990/p/7466882.html 一.安装JAVA JDK 1.下载安装包 http://www.oracle.com/t ...

  4. 数据库学习二三事儿（不打代码永远get不到的东西）

    针对聚合函数: 1.在自己打的过程中,发现如果select里面有一个列名有被聚合函数用到,比如: 这里的count和Sum_salary均邮局和函数,照理来说branchNo是不能搞进去的,但是它被g ...

  5. vue爬坑：把对象中的数据给了某个变量，改变一个对象的值，另一个对象也变化

    今天做项目碰到了 一个坑,一个vue变量赋值给一个新的变量,对这个新的变量里的值做更改,vue的变量也变了.记录一下这个坑坑~~ 然后百度搜到了一个解决方案: 就是把变量先转成字符串,再把字符串转成对 ...

  6. URL路由系统-命名空间

    命名空间 1.工程Django下的urs.py from django.conf.urls import url,include from django.urls import path,re_pat ...

  7. 编写一个求和函数sum，使输入sum(2)(3)或输入sum(2,3)，输出结果都为5

    昨天的笔试题,做的一塌糊涂,题目考的都很基础而且很细,手写代码对我来说是硬伤啊.其中有一道是这个,然而看到题目的时候,根本没有想到arguments:然后现在就恶补一下. arguments:用在函数 ...

  8. linux 命令启动Oracle数据库

    首先使用oracle用户登录Linux,然后在shell命令行中执行下面的命令: 第一步:打开Oracle监听lsnrctl start 第二步:进入sqlplussqlplus /nologSQL& ...

  9. 微信小程序页面列表与详情页跳转的正确姿势

    初学小程序,碰到列表与详情页跳转遇到的问题,记录一下. 一.问题 1个列表页: 1个详情页: 列表页代码: onLoad:异步查询数据并setData 详情页代码: 保存成功后,调用navigateB ...

  10. ssh外网穿透

    不同局域网ubuntu如何进行ssh穿透登录不同局域网ubuntu如何进行ssh穿透登录前言一. 建议安装teamview二. openssh服务三. 打开路由器端口映射四.连接@(ubuntu) 前 ...