如果你的浏览器支持Html5的FileReader的话，实现图片上传前进行预览是一件非常容易之事情。

在控制器，创建一个视图Action:

jQuery代码：

实时演示一下：

下面内容于2014-11-25 15:25分更新：
测试于Firefox:

下面使用Google的Chrome测试：

HTML5 FileReader实现图片上传前预览的更多相关文章

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

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

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

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

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

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

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

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

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

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

  6. 【转】HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...

  7. HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择 ...

  8. 基于html5的多图片上传，预览

    基于html5的多图片上传 本文是建立在张鑫旭大神的多文图片传的基础之上. 首先先放出来大神多图片上传的博客地址:http://www.zhangxinxu.com/wordpress/2011/09 ...

  9. 图片上传前预览、压缩、转blob、转formData等操作

    直接上代码吧: <template> <div> <div class="header">添加淘宝买号</div> <div ...

随机推荐

  1. nfs 客户端挂住

    mount -t nfs -o soft,retry=1,timeo=10,intr 192.168.9.27:/mnt/vm /mnt/nfs-vm 可以让NFS client在连接不到NFS se ...

  2. Android-Java-Thread线程两种方式的使用场景

    Thread线程两种方式的优点/缺点 extends Thread 方式: 缺点:存在耦合度(因为线程任务run方法里面的业务逻辑 和 线程启动耦合了) 缺点:Cat extends Thread { ...

  3. Python 数据结构与算法—— 快排

    1. 先从待排序的数组中找出一个数作为基准数(取第一个数即可),然后将原来的数组划分成两部分:小于基准数的左子数组和大于等于基准数的右子数组.然后对这两个子数组再递归重复上述过程,直到两个子数组的所有 ...

  4. hadoop 的HDFS 的 standby namenode无法启动事故处理

    standby namenode无法启动 现象:线上使用的2.5.0-cdh5.3.2版本Hadoop,开启了了NameNode HA,HA采用QJM方式.hadoop的集群的namenode的sta ...

  5. 用XPath查找HTML节点或元素

    更新版以后会在我的新博客更新,请您移步 https://blog.clso.fun/posts/2019-03-03/46.html 虽然JQ和JS都能很方便的查找包含了ID及类名的元素,但某些情况下 ...

  6. Button去除边框方法

    <Button  Content="Button" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey} ...

  7. [leetcode.com]算法题目 - Same Tree

    Given two binary trees, write a function to check if they are equal or not. Two binary trees are con ...

  8. MariaDB 连接查询与子查询(6)

    MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可MariaDB的目的是完全兼容MySQL,包括API和命令行,MySQL由于现在闭源了,而能轻松成为MySQ ...

  9. Python 生成器, 迭代器, 可迭代对象的区别

    1.可迭代对象 在python中, 一切皆对象, 但凡是可以用for循环进行遍历取值的对象都可以称之为可迭代对象, 可迭代对象在程序的一个执行周期中,可以无限轮次的进行循环遍历 2.迭代器 a.一个可 ...

  10. 一步步Cobol 400上手自学入门教程06 - 子程序调用

    子程序的命名通常和普通程序的命名方式相同.但是需要注意的是,对于子程序而言,不可将其前缀命名为以下这几个名字. AFB           AFH           CBC          CEE ...