input的file一些实用属性

  file自带一些有用的属性,今天整理一下

  html:

  1.multiple:是否多选,如果在html上面写上multiple="multiple"或者multiple就可以实现多选

  2.accept:文件格式,这个可以控制文件格式,比如jpeg和gif还有Png之类的,写法是这样的<input type="file" accept="image/png,image/gif,image/jpeg" />

  js:

  1.name:文件名字,一般写法是这样的

  console.log(img.files[0].name) //img2.jpg

  2.size:选择文件的大小,写法如下

  console.log(img.files[0].size) //15781

时间: 2024-10-08 20:17:43

input的file一些实用属性的相关文章

input type=file上传控件老问题

// 1.用INPUT控制上传文件时,点击INPUT控件出现文件选择框. // 2.如果在手机上使用时,一般不会出现这种较丑的 // 3.于是就自然想到将控件隐藏,然后用一个按钮代替,点击按钮时在函数里使用脚本触发INPUT控件的 // 4.结果发现无效,无法使用JS触发INPUT的控件.(在PC端有的浏览器可以,在手机浏览器中有的安卓机可以,苹果机不行) <form> <input name="photos" type="file" accept

html5的FormData对象和input的file属性以及window.URL.createObjectURL( ) 方法(转载)

/** FormData ==>表单数据 能自动把表单数据拼接打包 当ajax发送数据时,发送打包的数据; 还可以使用FormData对象的append(key,value)添加数据 FormData还可以自动帮忙打包文传送件数据,后台通过$_FILES数组接收 说明FormData对象既可以打包发送表单的数据,也可以手动append数据 注意,input Dom对象有一个files属性 十一哥文件数组 **/ <!doctype html> <html> <head&

关于利用input的file属性在页面添加图片的问题

在页面添加图片涉及到兼容的问题怎么解决兼容问题呢?请看下面分析: 在IE浏览器上面我们能直接通过获取其input的value值来获取其图片的路径. 在火狐和谷歌需要用createObjectURL((input的元素).files.item(0))来获取其路径: 现在请看代码: css设置样式部分(可以自己设置好看的样式): *{ margin: 0; padding:0; } #img{ width:50px; } .box{ width: 100px; margin:20px auto; }

&lt;input type=&quot;file&quot; /&gt;浏览时只显示指定文件类型

<input type="file" />浏览时只显示指定文件类型 <input type="file" accept="application/msword" ><br><br>accept属性列表<br> 1.accept="application/msexcel"2.accept="application/msword"3.accept=&q

解决input[type=file]打开时慢、卡顿问题

为什么在input标签类型为file上传文件时在标签中设置属性 accpet="image/*",打开本地文件夹的速度特别慢? 经过测试发现,在mac里面safari.Firefox.Chrome(opera不知道为啥老闪退)都没有卡顿问题 在windows里面,Firefox不卡顿,只有Chrome卡顿. 于是我决定先去掉accpet试试……果然就没有了卡顿的问题.那么本包在试试accpet="image/jpg"果然也不卡卡的了!!看来问题的所在就是"

input type=&quot;file&quot;多图片上传

单个的input type="file"表单也是可以实现多图片上传的 代码如下: <form action="manypic.php" method="post" enctype="multipart/form-data">        <input type="file" name="manypic[]" multiple>        <input

input type=&quot;file&quot; 的一些问题

file可以上传文件,但通常 情况下大家都会需要设置文件上传的格式 上传文件的格式由一个 accept 属性来控制 列如: <input type="file" id="file" accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"  name="uploadFile"/&

原生HTML5 input type=file按钮UI自定义

原生<input type="file" name="file" />长得太丑 提升一下颜值 实现方案一.设置input[type=file]透明度为0,使用绝对定位遮罩在自定义的按钮标签层的之上. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>原生HTML5 input typ

HTML5学习笔记(2):input type file的特性

一. input type=file与文件上传 本文所说的input type=file指的是type类型是file的input元素,最简HTML代码如下: <input type=file> 但是,为了习惯,我们多写成: <input type="file"> 在HTML5出现之前(XHTML),我们的闭合规则则有些出入: <input type="file" /> 顾名思义,选择文件,并上传文件. 在HTML5还没有出现之前,