前言 在 HTML 文档中 <input type="file"> 标签每出现一次,一个 FileUpload 对象就会被创建. 该元素包含一个文本输入字段,用来输入文件名,还有一个按钮,用来打开文件选择对话框以便图形化选择文件. 该元素的 value 属性保存了用户指定的文件的名称,但是当包含一个 file-upload 元素的表单被提交的时候,浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名. 当用户选择或编辑一个文件名,file-upload 元素触发 onc

前段时间做了一个项目,涉及到上传本地图片以及预览的功能,正好之前了解过 html5(点击查看更多关于web前端的有关资源) 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(PS : 不得不承认我这个人有多懒,没有需求的时候我向来不主动去学习).移动端完全支持哦!已测试. 下面给大家看看代码吧怎么实现的 第一:HTLM部分(这里不去做漂亮的样式了我们注重学习功能) <input type="file" id="fileElem" mul

前言: 在做浏览器上传图片的时候,一般采用form表单上传,这种上传无法预览图片,无法查看图片大小,无法知道图片的类型等等!那么在html5 File API提供了这些表单无法实现的功能,而且还支持拖拽上传!现在我们开始学习.. 一.File Api 浏览器支持检测 File Api给js提供了以下几个接口来访问本地文件系统: 1.File - 单个文件:提供了诸如name.file size.mimetype(媒体类型)等只读文件属性.2.FileList - 一个类数组File对象集合:3.

我们在实际应用中经常希望能把文件域给清空,比如使用change事件时,因为不清空再次选择同一文件时将不在触发change事件. 但是在IE中,由于安全设置的原因,是不允许更改文件域的值的,也就是不能使用val('')设置为空. 因此我们就只能换个思路,把这个input元素复制一个,然后将原来的删除.在IE下复制元素的时候,其中的值是不会被复制的,所以就达到了清空文件域的目的了.而在Firefox.Chrome下,其中的值也会被一同复制,但可以使用val('')来清空. 那么我们来简单些个插件吧:

使用jQuery清空file文件域的解决方案 var file = $("#file") file.after(file.clone().val("")); file.remove();

html结构: <div id="fileImage"></div> <input type="file" value="upload" id="fileInput"> <p id="fileInfo"></p> css样式: #fileImage{width: 300px;height: 300px; margin: 20px auto;back

file是文本域,我们一般都会使用它来上传文件,在上传文件时我们需要验证,验证完成后,如果存在错误,为了防止将错误信息也上传上去,我们总是希望能够将其清空.但是在IE中,为了安全起见它是不允许我们改变其中的值.Firefox可以.为了兼容,我们就必须来考虑其他的方式. 我们可以这样考虑,先将该元素复制下来,然后将该值清空.在IE下,我们复制该元素时,他的值是不会复制下来得,这样就可以达到清空的目的.但是firefox会将值给复制下来,所以为了兼容,可以得到如下这个: var file = $("

对一个文件域(input type=file)使用了验证后,我们总会希望把文件域中的值给清空了,在IE中,由于安全设置的原因,是不允许更改文件域的值的(也就是不能使用val("")) ,接下来为大家介绍一下解决方法: 那么很显然,我们就只能换个思路,把这个input元素复制一个,然后将原来的删除. 在IE下复制元素的时候,其中的值是不会被复制的,所以就达到了清空文件域的目的了. 而在Firefox下,其中的值也会被一同复制,那么我们就顺便清空一下就做到兼容了.  var file =

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

测试环境:OS --> winXPBrowsers --> IE6+, FF 3.0.11, FF 3.5, Opera 9.64, Opera 10 beta 2, Safari 4, Chrome 2.0.172 xhtml:<input type="file" value="选择文件" id="fileInput" /><button type="button" id="btnCl

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>简单的html5 File测试 for pic2base64</title> <style> </style>

测试环境:OS --> winXPBrowsers --> IE6+, FF 3.0.11, FF 3.5, Opera 9.64, Opera 10 beta 2, Safari 4, Chrome 2.0.172 xhtml:<input type="file" value="选择文件" id="fileInput" /><button type="button" id="btnCl

在文件上传控件(input type='file')中,可以通过accept属性实现对文件类型的过滤. 一.相关代码: 下面给出对应的文件上传控件代码: <input type="file" id="myFile" accept="image/jpeg,image/gif,application/msword"/><br/> 上面的代码表示限制文件上传类型为.jpg/.gif/.doc. 二.限制规则: 在文件上传控件的a

一 File对象与FileList对象 当将input元素的type类型设置为file时,web页面上会显示一个选择文本按钮和一个文本显示框,单击文件按钮可以选择一个文件,文本显示框中会显示选中的文件名称. input元素设置multiple属性,可以选择多个文件,文本显示框中会显示选中了几个文件. 在这个过程中,用户选中的每一个对象都是一个file对象,用户选中的对个对象的集合就是fileList对象.File对象有两个属性,name属性表示文件名,但不包含文件的路径: lastModifie

ylbtech-HTML5: input:file上传类型控制   1. 一.input:file 属性返回顶部 一.input:file属性 属性值有以下几个比较常用: accept:表示可以选择的文件MIME类型,多个MIME类型用英文逗号分开,常用的MIME类型见下表. multiple:是否可以选择多个文件,多个文件时其value值为第一个文件的虚拟路径. 1.accept 只能选择png和gif图片 <input id="fileId1" type="file

目前市场上大多数的网站的断点上传都是需要安装浏览器插件的,本文就针对高级浏览器的环境下,通过HTML5 File api实现断点上传进行说明 一.实现文件多选 HTML5的<input>新增了"multiple"属性,该属性可接受多个值的文件上传字段 <input type="file" multiple="multiple" name="file" id="file"> 添加了该属

这篇文章主要介绍了JavaScript+html5 canvas实现本地截图教程,对截图功能感兴趣的小伙伴们可以参考一下 最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canvas实现截图的,加之前段时间了解了下html5的File API使用File API 之FileReader实现文件上传<JavaScript File API文件上传预览>,更加觉得html5好玩了,想着也试试写写这功能权当学习canvas吧.下面奉上我自己写的一个demo,代码写得比较少,很多细

HTML5的FILE api,有一个slice方法,可以将BLOB对象进行分割.前端通过FileList对象获取到相应的文件,按照指定的分割方式将大文件分段,然后一段一段地传给后端,后端再按顺序一段段将文件进行拼接. 断点续传原理 目前比较常用的断点续传的方法有两种,一种是通过websocket接口进行文件上传,另一种是通过ajax,两种方法各有千秋,虽然websocket听起来比较高端些,但是除了用了不同的协议外其他的算法基本上都是很相似的,并且服务端要开启ws接口,这里用相对方便的ajax来

hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把选择的文件显示在img标签中, 实现图片预览功能.请选择支持HTML API的浏览器,比如谷歌Chrome和火狐等. <!DOCTYPE html><html><head><title>HTML5上传图片预览</title><meta http

一.HTML5离线缓存技术 支持离线缓存是HTML5中的一个重点,离线缓存就是让用户即使在断网的情况下依然可以正常的运行应用.传统的本地存储数据的方式有 localstorage,sessionstorage和cookie.但是这些传统的方式有着致命的弊端.首先这些传统的存储方式的最大使用空间有 限,最多不超过5M;其次它们处理大规模的结构化数据的能力有限.鉴于传统方式的局限性,HTML5提出了三种新的离线缓存解决方案:Web SQL,indexedDB和File System. 其中Web S

在HTML表单中,可以上传文件的唯一控件就是<input type="file">. 注意:当一个表单包含<input type="file">时,表单的enctype必须指定为multipart/form-data,method必须指定为post,浏览器才能正确编码并以multipart/form-data格式发送表单的数据. 出于安全考虑,浏览器只允许用户点击<input type="file">来选择本地