一、简单的图片上传并预览功能input[file]

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <title>简单的上传图片并预览</title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>

    <style>

        *{

            padding: 0;

            margin: 0 auto;

        }

        .yg_content{

            margin-top: 50px;

            text-align: center;

        }

        #upimg{

            display: none;

        }

        .yg_content p{

            padding: 10px;

            display: inline-block;

            color: #fff;

            background: #08c;

            border: 1px #ccc solid;

            border-radius: 10px;

        }

        .yg_content p:active{

            opacity: .5;

        }

        .showimg{

            margin: 20px auto;

            border: 1px #ccc solid;

            border-radius: 10px;

            width: 200px;

            height: 200px;

        }

        .showimg img{

            width: 100%;

            height: 100%;

        }

    </style>

</head>

<body>

    <div class="yg_content">

        <input type="file" id="upimg" accept="image/*" onchange="upLoad()">

        <label for="upimg">

            <p>点击上传图片</p>

        </label>

        <div class="showimg">

            <img id="img" src="data:images/tx_1.jpg" alt="">

        </div>

    </div>

</body>

<script>

    function upLoad(){

        var fileInput = document.getElementById("upimg");

        var file = fileInput.files[0];

        //创建读取文件的对象

        var reader = new FileReader();

        //创建文件读取相关的变量

        var imgFile;

        //为文件读取成功设置事件

        reader.onload=function(e) {

            // alert('文件读取完成');

            imgFile = e.target.result;

            console.log(imgFile);

            $("#img").attr('src',imgFile);

        };

        //正式读取文件

        reader.readAsDataURL(file);

    }

</script>

</html>

一、简单的图片上传并预览功能input[file]的更多相关文章

  1. input file实现多选，限制文件上传类型，图片上传前预览功能

    限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...

  2. 原生JS实现图片上传并预览功能

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

  3. 基于jquery实现图片上传本地预览功能

    一.原理 分为两步: 当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL),把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来.在这里,我们需 ...

  4. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  5. file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  6. 【转】html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  7. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

  8. ASP.NET MVC图片上传前预览

    回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...

  9. 图片上传本地预览。兼容IE7+

    基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...

随机推荐

  1. layer-框架使用修改部分

    关于框架中js调子方法出错的处理 top.layer.open({ id: options.id, type: 2, shade: options.shade, title: options.titl ...

  2. springboot 中的 thymeleaf 页面进阶小知识

    我们做好了登录页,那设计一个场景吧,比如我们登录后跳转到公司主页,想从公司主页再跳转到员工列表页: 这样的场景我们该如何实现,首先要知道一些基础知识,就是SpringBoot的一些关于请求的架构知识: ...

  3. @ControllerAdvice全局数据绑定

        @ModelAttribute 注解标记该方法的返回数据是一个全局数据,默认情况下,这个全局数据的 key 就是返回的变量名,value 就是方法返回值,当然开发者可以通过 @ModelAtt ...

  4. DEDECMS编辑器粘贴Word

    我司需要做一个需求,就是使用富文本编辑器时,不要以上传附件的形式上传图片,而是以复制粘贴的形式上传图片. 在网上找了一下,有一个插件支持这个功能. WordPaster 安装方式如下: 直接使用Wor ...

  5. web选择文件夹上传

    我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用. 这次项目的需求: 支持大文件的上传和续传,要求续传支持所有浏览器,包括ie6,ie7,i ...

  6. BZOJ 1597: [Usaco2008 Mar]土地购买 动态规划 + 斜率优化

    Code: #include<bits/stdc++.h> #define maxn 1000000 #define ll long long #define x(i) (b[i+1]) ...

  7. Jenkins报错：该Jenkins实例似乎已离线

    解决方法: 1.保留此离线页面,重新开启一个浏览器tab标签页 2.输入输入网址http://localhost:8080/pluginManager/advanced 3.进入该页面最底下,找到[升 ...

  8. php面试专题---mysql数据库分库分表

    php面试专题---mysql数据库分库分表 一.总结 一句话总结: 通过数据切分技术将一个大的MySQLServer切分成多个小的MySQLServer,既攻克了写入性能瓶颈问题,同一时候也再一次提 ...

  9. custom serializer for just one property in Json.NET

    Json序列化的时候跳过加密字段 字段类定义如下 public class Field { public bool IsEncrypted { get; set; } public string Na ...

  10. python爬虫学习之路-遇错笔记-1

    当在运行爬虫时同时开启了Fidder解析工具时(此爬虫并不是用于爬取手机端那内容,而是爬去电脑访问的网页时),访问目标站点会遇到以下错误: File "C:\Users\litao\AppD ...