如果你的浏览器支持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. sqlserver,杀掉死锁的进程

    USE [erpdb1]GO/****** Object:  StoredProcedure [dbo].[p_lockinfo_MyKill]    Script Date: 12/26/2014 ...

  2. [leet code 198]House Robber

    1 题目 You are a professional robber planning to rob houses along a street. Each house has a certain a ...

  3. python网络爬虫抓取网站图片

    本文介绍两种爬取方式: 1.正则表达式 2.bs4解析Html 以下为正则表达式爬虫,面向对象封装后的代码如下: import urllib.request # 用于下载图片 import os im ...

  4. Python——面向对象（初级篇）

    1.如何创建类 class 类名: pass 2.如何创建方法 构造方法: __init__ obj = 类名('a1') 普通方法: obj = 类名('xxx') obj.普通方法名() 3.图解 ...

  5. 解决C#项目出现“此项目引用这台计算机上缺少的 NuGet 程序包。使用 NuGet 程序包还原可下载这些程序包。有关详细信息，请参阅 http://go.microsoft.com/fwlink/?LinkID=322105。缺少的文件是 ..\packages\Microsoft.Net.Compilers.1.0.0\build\Microsoft.Net.Compilers.props”

    1.打开项目的.csproj文件 2.删掉如下选中的内容: 3.右键项目-->管理NuGet程序包(N) 找到Microsoft.CodeDom.Providers.DotNetCompiler ...

  6. ASP.Net MVC OA项目笔记<二>

    1.1.0 创建数据层 1.1.1 CZBK.ItcastOA.IDAL 引用 CZBK.ItcastOA.Model 1.2.1 给IDAL添加一个接口IUserInfoDal 里面写增删改查分页的 ...

  7. js 将一个数组插入到另一个数组的方法

    JavaScript将一个数组插入到另一个数组的方法.分享给大家供大家参考.具体分析如下: 1.通过Array.prototype.push.apply方法将一个数组插入到另外一个数组,下面的代码将数 ...

  8. 28_网络编程-TCP/UDP

    一.传输层       1.定义       IP首部有一个协议字段,用来标识网络层(IP)的上一层所采用的是哪一种传输层协议.根据这个字段的协议号,就可以识别IP传输的数据部分究竟是TCP的内容还是 ...

  9. 写vue项目时候 零星的笔记

    1,挂载也可以用 .$mount() 2,子组件中通过this.$root拿到实例的数据.截图中是子组件中

  10. InfluxDB配置文件详解

    全局配置 # 该选项用于上报influxdb的使用信息给InfluxData公司,默认值为false reporting-disabled = false # 备份恢复时使用,默认值为8088 bin ...