通过<input />标签，给它指定type类型为file，可提供文件上传；

accept：可选择上传类型，如：只要传图片，且不限制图片格式，为image/*；

multiple：规定是否可以选择多个文件；

规定只可上传图片，且可以选择多个文件

<input type="file" accept="image/*" multiple="multiple"/>

当然，直接一个input  type=file  只能选择上传的文件/资源，如果我们需要在选择图片之后，在当前页面实现预览效果，那么我们可以如下方式来实现

HTML代码

<body>

    <div id="box">

        <img id="imgshow" src="" alt=""/>

    </div>

    <div id="pox">

        <input id="filed" type="file" accept="image/*"/>

    </div>

</body>

css样式文件

  <style>

        #box{

            width: 300px;

            height: 300px;

            border: 2px solid #858585;

        }

        #imgshow{

            width: 100%;

            height: 100%;

        }

        #pox{

            width: 70px;

            height: 24px;

            overflow: hidden;

        }

    </style>

JS代码

<script>

        //在input file内容改变的时候触发事件

        $('#filed').change(function(){

        //获取input file的files文件数组;

        //$('#filed')获取的是jQuery对象，.get(0)转为原生对象;

        //这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];

            var file = $('#filed').get(0).files[0];

        //创建用来读取此文件的对象

            var reader = new FileReader();

        //使用该对象读取file文件

            reader.readAsDataURL(file);

        //读取文件成功后执行的方法函数

            reader.onload=function(e){

        //读取成功后返回的一个参数e，整个的一个进度事件

                console.log(e);

        //选择所要显示图片的img，要赋值给img的src就是e中target下result里面

        //的base64编码格式的地址

                $('#imgshow').get(0).src = e.target.result;

            }

        })

</script>

 *以上js代码中有使用到jQuery，因此要引入jQuery文件

 

input type=file 选择图片并且实现预览效果的更多相关文章

  1. input type=file 选择图片并且实现预览效果的实例

    为大家带来一篇input type=file 选择图片并且实现预览效果的实例. 通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型, ...

  2. html input type=file 选择图片,图片预览 纯html js实现图片预览

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js 获取input type="file" 选择的文件大小、文件名称、上次修改时间、类型等信息

    文件名的传递 ---全路径获取 $('#file').change(function(){ $('#em').text($('#file').val()); }); 文件名的传递 ---只获取文件名 ...

  4. Html5选择图片并及时预览图片

    以往想要实现图片预览基本都是先传至服务器后等返回链接地址才能进行预览,使用Html5选择图片并及时预览图片的代码如下,使用起来更爽了. <!DOCTYPE html> <html l ...

  5. vue使用readAsDataURL实现选择图片文件后预览

    vue实现选择图片文件后预览 利用h5的api可以实现选择文件并实现预览 readAsDataURL 方法会读取指定的 Blob 或 File 对象.读取操作完成的时候,readyState 会变成已 ...

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

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

  7. input type=file实现图片上传，预览以及图片删除

    背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...

  8. input[type="file"]的图片预览

    在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能:之前的做的一个解决方案是文件先上传上去然后返回地址再显示在页面上,这样就不太好,因为用户基本信息可能并没有保存,但 ...

  9. input file图片上传预览效果

    两种方法,方法一: js代码: //头像上传预览 $("#up").change(function() { var $file = $(this); var fileObj = $ ...

随机推荐

  1. 「UOJ#117」 欧拉回路

    欧拉回路 - 题目 - Universal Online Judge 题意: 给定有向图或无向图,求一条欧拉回路. 题解 心路历程:woc什么傻哔东西->哇真香我的吗!(逃 首先我知道很多人把欧 ...

  2. codevs 3095 黑心的市长

    3095 黑心的市长  时间限制: 1 s  空间限制: 32000 KB  题目等级 : 钻石 Diamond   题目描述 Description A市有一条长Nkm的高速公路.有M个人各自想承包 ...

  3. 一个表格中选定的tr，显示在另一个表格中

    一.先获得表格A每点中行的下标index(); 二.申明一个数组,把下表全部push到数组中: 三.在用for循环遍历数组,同时申明html代码片段: 四.用html+=表格A tr:eq(arr[i ...

  4. NLTK vs SKLearn vs Gensim vs TextBlob vs spaCy

    Generally, NLTK is used primarily for general NLP tasks (tokenization, POS tagging, parsing, etc.) S ...

  5. 创建Sitemap文件供搜索引擎使用

    以下内容转载自 http://www.cnblogs.com/webtrados/archive/2009/12/29/1635305.html 如何创建Sitemap文件 Sitemap的格式有XM ...

  6. Spring Boot 学习系列（09）—自定义Bean的顺序加载

    此文已由作者易国强授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. Bean 的顺序加载 有些场景中,我们希望编写的Bean能够按照指定的顺序进行加载.比如,有UserServ ...

  7. java 大数详细讲解

    介绍 java中用于操作大叔的类主要有俩种 第一个是BigInteger,代表大整数.第二个是BigDecimal,代表大浮点数.两种类的操作方法类似,所以我们只讲解BigInterger的用法 基本 ...

  8. jqgrid 不能选中行， 每次点击单元格都自动选中第一行

    最使用jqgrid表格插件写了一个功能.功能完成后显示一切正常,但是经过测试后发现,每次点击数据行时,都会自动选中第一行,无法选中其他数据行.经过一番探索,最终发现是加载进来的字段没有主键导致了这个问 ...

  9. unity调android ios 浏览器 uniwebview2.1使用

    uniwebview2.1使用 插件下载地址: http://download.csdn.net/detail/onafioo/9576200 示例 public class BrowserMgr { ...

  10. 走进VR游戏开发的世界

    http://geek.csdn.net/news/detail/76504 我们组在2014年下半年尝试开发了一款Xbox One平台的体感游戏,2015年上半年进行收尾工作的同时,结合之前积累的体 ...