js implementation input type='file' file upload sample code_javascript skills

In development, file uploading is essential. is a commonly used upload tag, but it is ugly and cannot be changed. We usually use Hide, when you click on other tags (pictures, etc.), you can select the file upload function.
Look at the code:

Copy the code The code is as follows:

Select image

But in Firefox and some higher version browsers The files to be uploaded can be obtained in the background of the browser. Some lower version browsers cannot obtain Request.Files at all.
Check the information. Some people say that it should be changed to this:

Copy code The code is as follows:

< ;form id="form1" runat="server" method="post" enctype="multipart/form-data">

Select image

A return keyword has been added, which improves the compatibility a lot, but some browsers are still difficult to use.
We found that we can definitely get the file to be uploaded by manually clicking in the background
So we can transparently
Modify the code as follows:

Copy the code The code is as follows:

选择图片

我们点击选择图片实际点击了不透明度为0的 ，单用户切看不到 后台亦可以获取到要上传的文件了。
ok
总结：
用一个不透明度为0的 盖在要用户可见的标签（或图片等）上，让用户点击。
用 width height line-height font-size 来控制右侧浏览按钮的大小。
用 left top （right 、 bottum）来控制右侧浏览按钮的位置，可以设置为负值。
用z-index来设置它们的层覆盖关系。
form 必须有enctype="multipart/form-data"标记才能上传文件