js input file文件上传图片并展示
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js input file文件上传图片并展示相关的知识,希望对你有一定的参考价值。
参考技术A 1 页面html内容
2 获取input[file]元素
3 对获取的file元素操作,也就是操作fileReader属性
1:Blob
2: File
3: FileList
4: FileReader
FileList :
这里,默认状态下选择文件 每次files属性上FileList对象里只有一个file文件。
file对象中包含了name 文件名; size ; type 文件类型; lastModified 最后修改时间;
FileReader:异步读取本地文件内容;包括File 和Blob ;
创建FileReader对象;读取file文件
关于fileReader的几个属性:
FileReader.error 只读一个 DOMException 代表在读取文件中出现的错误。 FileReader.readyState 只读一个数字表明的状态FileReader。这是以下之一:
FileReader.result 只读文件的内容。该属性仅在读取操作完成后才有效,并且数据的格式取决于使用哪种方法来启动读取操作。
fileReader的几个事件处理程序:
1 . FileReader.onbort:在读取操作中止时触发。
2 . FileReader.onerror:在读取操作遇到错误时触发。
3 . FileReader.onload:在读取操作成功完成时触发。
4 . FileReader.onloadstart:在开始阅读时触发。
5 . FileReader.onloadend:无论是否成功 只要读取操作完成都会触发。
6 . FileReader.onprogress:阅读Blob内容时触发。
FileReader的方法:
1 . FileReader.abort();中止读取操作
2 . FileReader.readAsArrayBuffer();完成时result属性包含ArrayBuffer表示文件数据
3 . FileReader.readAsBinaryString();完成时result属性将包含来自文件的原始二进制数据作为字符串。
4 . FileReader.readAsDataURL();完成时result属性包含data:表示文本数据的URL;
5 . FileReader.readAsText();完成时result属性包含文本的内容作为文本字符串。
js 实现 input type="file" 文件上传示例代码
在开发中,文件上传必不可少但是它长得又丑、浏览的字样不能换,一般会让其隐藏点其他的标签(图片等)来时实现选择文件上传功能
在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但是它长得又丑、浏览的字样不能换,我们一般会用让,<input type="file" />隐藏,点其他的标签(图片等)来时实现选择文件上传功能。
看代码:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery/jquery-1.8.2.min.js" type="text/javascript"></script> <style type="text/css"> ._box { width: 119px; height: 37px; background-color: #53AD3F; background-image: url(images/bg.png); background-repeat: no-repeat; background-position: 0 0; background-attachment: scroll; line-height: 37px; text-align: center; color: white; cursor: pointer; } .none { width: 0px; height: 0px; display: none; } </style> <title>js 实现 input file 文件上传 /></title> </head> <body> <form id="form1" runat="server" method="post" enctype="multipart/form-data"> <div> <div class="_box">选择图片</div> </div> <div class="none"> <input type="file" name="_f" id="_f" /> </div> </form> </body> </html> <script type="text/javascript"> jQuery(function () { $("._box").click(function () { $("#_f").click(); }); }); </script>
但是在火狐和一些高版本的浏览器中后台可以获取到要上传的文件,一些低版本的浏览器压根就获取不到Request.Files
查阅资料,有说改成这样的:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery/jquery-1.8.2.min.js" type="text/javascript"></script> <style type="text/css"> ._box { width: 119px; height: 37px; background-color: #53AD3F; background-image: url(images/bg.png); background-repeat: no-repeat; background-position: 0 0; background-attachment: scroll; line-height: 37px; text-align: center; color: white; cursor: pointer; } .none { width: 0px; height: 0px; display: none; } </style> <title>js 实现 input file 文件上传 /></title> </head> <body> <form id="form1" runat="server" method="post" enctype="multipart/form-data"> <div> <div class="_box">选择图片</div> </div> <div class="none"> <input type="file" name="_f" id="_f" /> </div> </form> </body> </html> <script type="text/javascript"> jQuery(function () { $("._box").click(function () { return $("#_f").click(); }); }); </script>
加了一个return关键字,兼容性提高了不少,但是有的浏览器还是不好用。
我们发现只有手动点击<input type="file" />后台就一定能获取到要上传的文件
于是我们可以透明<input type="file" />
修改代码如下:
代码如下:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> ._box { position: relative; width: 119px; height: 37px; background-color: #53AD3F; background-image: url(images/bg.png); background-repeat: no-repeat; background-position: 0 0; background-attachment: scroll; line-height: 37px; text-align: center; color: white; cursor: pointer; overflow: hidden; z-index: 1; } ._box input { position: absolute; width: 119px; height: 40px; line-height: 40px; font-size: 23px; opacity: 0; filter: "alpha(opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; left: -5px; top: -2px; cursor: pointer; z-index: 2; } </style> <title>js 实现 input file 文件上传 /></title> </head> <body> <form id="form1" runat="server" method="post" enctype="multipart/form-data"> <div> <div class="_box"> <input type="file" name="_f" id="_f" /> 选择图片 </div> </div> </form> </body> </html>
我们点击选择图片实际点击了不透明度为0的 <input type="file" />,单用户切看不到 <input type="file" />后台亦可以获取到要上传的文件了。
ok
总结:
用一个不透明度为0的 <input type="file" />盖在要用户可见的标签(或图片等)上,让用户点击。
用 width height line-height font-size 来控制<input type="file" />右侧浏览按钮的大小。
用 left top (right 、 bottum)来控制<input type="file" />右侧浏览按钮的位置,可以设置为负值。
用z-index来设置它们的层覆盖关系。
form 必须有enctype="multipart/form-data"标记才能上传文件
以上是关于js input file文件上传图片并展示的主要内容,如果未能解决你的问题,请参考以下文章
使用jquery.form.js实现文件上传及进度条前端代码
js 实现 input type="file" 文件上传示例代码
input file 文件上传,js控制上传文件的大小和格式