如果你的浏览器支持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. dev gridview自动列宽和单元、行、checkbox选中和多选

    #region 自动列宽 for (int I = 0; I < gridView1.Columns.Count; I++) { this.gridView1.BestFitColumns(); ...

  2. ZKWeb网页框架1.5正式发布

    本次更新的内容有 明显的改进了IoC容器在部分情况下的性能, 当前的性能和Grace, DryIoC同等 添加IHttpResquestHandlerWrapper接口让重载Http上下文更容易 添加 ...

  3. CentOS 7 - 安装Oracle JDK8

    我们要在CentOS安装最新版本的JDK8,需要首先将JDK下载到服务器,然后通过操作系统自带的工具yum进行安装. 本文我们将介绍CentOS 7下JDK8的安装. 从官网下载页面找到JDK8的下载 ...

  4. [Sdoi2013]费用流（最大流，二分答案）

    前言 网络流的练习为什么我又排在最后啊!!! Solution 我们先来挖掘一个式子: \[ ab+cd>ad+bc(a<c,b<d) \] 这个的证明很显然对吧. 然后就考虑最优策 ...

  5. Linux查看运行时间

    以下命令都可以查看出系统运行时间.对于查看机器的状态很有帮助. w -b 查看最后一次系统启动的时间 w -r 查看当前系统运行时间 last reboot 查看系统历史启动的时间 top up后表示 ...

  6. Spring Boot中使用Swagger2构建RESTful API文档

    在开发rest api的时候,为了减少与其他团队平时开发期间的频繁沟通成本,传统做法我们会创建一份RESTful API文档来记录所有接口细节,然而这样的做法有以下几个问题: 1．由于接口众多,并且细 ...

  7. 跟踪spring MVC的请求

    当我们点击一个超链接时,spring MVC在后台都做了些什么呢,今天就来看看后台都干了啥 首先需要在web.xml里配置一下:

  8. @transactional注解,报错后数据库操作回滚失败

    1. https://jingyan.baidu.com/article/3a2f7c2e27d51b26afd611ff.html 2. https://blog.csdn.net/lee_star ...

  9. ajax请求报语法错误

    今天改代码修正完一个ajax请求后,调试发现出错进error方法,查看错误信息报语法错误,具体是调用parseJSON方法时出错,因为我是用json方式传递的参数,所以第一时间查看data参数是否正确 ...

  10. django~项目的文件位置的重要性

    前几天我犯了个很低级的错误 就是把文件的地址放错地方了~~ 我把templates文件放进mysite文件里面了 和templatetags文件同级了  所以一直报错  说找不到模板的文件 实际上te ...