Heim >Web-Frontend >js-Tutorial >js 实现 input type="file" 文件上传示例代码_javascript技巧

js 实现 input type="file" 文件上传示例代码_javascript技巧

WBOY
WBOYOriginal
2016-05-16 17:26:352256Durchsuche

在开发中,文件上传必不可少, 是常用的上传标签,但是它长得又丑、浏览的字样不能换,我们一般会用让,隐藏,点其他的标签(图片等)来时实现选择文件上传功能。
看代码:

复制代码 代码如下:







js 实现 input file 文件上传 />




选择图片










但是在火狐和一些高版本的浏览器中后台可以获取到要上传的文件,一些低版本的浏览器压根就获取不到Request.Files
查阅资料,有说改成这样的:
复制代码 代码如下:







js 实现 input file 文件上传 />




选择图片










加了一个return关键字,兼容性提高了不少,但是有的浏览器还是不好用。
我们发现只有手动点击后台就一定能获取到要上传的文件
于是我们可以透明
修改代码如下:
复制代码 代码如下:





js 实现 input file 文件上传 />






选择图片






我们点击选择图片实际点击了不透明度为0的 ,单用户切看不到 后台亦可以获取到要上传的文件了。
ok
总结:
用一个不透明度为0的 盖在要用户可见的标签(或图片等)上,让用户点击。
用 width height line-height font-size 来控制右侧浏览按钮的大小。
用 left top (right 、 bottum)来控制右侧浏览按钮的位置,可以设置为负值。
用z-index来设置它们的层覆盖关系。
form 必须有enctype="multipart/form-data"标记才能上传文件
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn