如果你的浏览器支持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. CentOS下下载软件，不安装的方法

    今天来说下在CentOS下下载软件,不安装的方法: 方法一:通过yum自带一个工具:yumdownloader[root@web1 ~]#  rpm -qa |grep yum-utils[root@ ...

  2. 【推荐】介绍两款Windows资源管理器，Q-Dir 与 FreeCommander XE（比TotalCommander更易用的免费资源管理器）

    你是否也像我一样,随着硬盘.文件数量的增加,而感到对于文件的管理越来越乏力. 于是我试用了传说中的各种软件,包括各种Explorer外壳,或者第三方资源管理器. 最后我确定下来经常使用,并推荐给您的是 ...

  3. 背水一战 Windows 10 (41) - 控件（导航类）: Frame

    [源码下载] 背水一战 Windows 10 (41) - 控件(导航类): Frame 作者:webabcd 介绍背水一战 Windows 10 之 控件(导航类) Frame 示例Controls ...

  4. Borrowed Time

    嘛,这是第一篇博客啦~ 应该会发知识点总结和题解一类的东西 当然也会拿这个博客当todolist使用了 希望自己可以变得更强吧

  5. C语言Socket-模拟远程CMD(客户端向服务器发送命令，服务器执行该命令)

    服务端(server) #include <stdio.h> #include <winsock2.h> #pragma comment(lib,"ws2_32.li ...

  6. cad2015卸载/安装失败/如何彻底卸载清除干净cad2015注册表和文件的方法

    cad2015提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装cad2015失败提示cad2015安装未完成,某些产品无法安装,也有时候想重新安装cad2015 ...

  7. 一次对路边饮用水RFID供应机的跑路玩法

    "如何成为一个合格的硬件白帽子? 答案: 一个有聪明大脑的你 要有归纳类比和善于用GOOGLE的能力(百度?放弃吧) 善于翻阅和查询相关开发文档和强大的跑路能力." WARNING ...

  8. webpack快速入门——实战技巧：watch的正确使用方法，webpack自动打包

    随着项目大了,后端与前端联调,我们不需要每一次都去打包,这样特别麻烦,我们希望的场景是,每次按保存键,webpack自动为我们打包,这个工具就是watch! 因为watch是webpack自带的插件, ...

  9. 【重要通知】本人所有技术文章转移至https://zzqcn.github.io

    本人所有技术文章转移至 https://zzqcn.github.io

  10. 创建python3虚拟环境指令和冻结所安装的包

    mkvirtualenv file_name -p python3 去掉后面的 P 和python3 代表创建python2环境 其中p代表路径的意思 冻结所安装包命令 pip freeze > ...