js implementation input type='file' file upload sample code-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

js implementation input type='file' file upload sample code

Dec 24, 2016 pm 05:14 PM

In development, file uploading is essential. <input type="file" /> is a commonly used upload tag, but it is ugly and cannot be changed when browsing. We usually use, <input type="file" />Hide, click on other tags (pictures, etc.) to realize the file upload function.
Look at the code:

&lt;!DOCTYPE html&gt; 
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt; 
&lt;head runat=&quot;server&quot;&gt; 
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; 
&lt;script src=&quot;js/jquery/jquery-1.8.2.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt; 
&lt;style type=&quot;text/css&quot;&gt; 
._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; 
} 
&lt;/style&gt; 
&lt;title&gt;js 实现 input file 文件上传 /&gt;&lt;/title&gt; 
&lt;/head&gt; 
&lt;body&gt; 
&lt;form id=&quot;form1&quot; runat=&quot;server&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;&gt; 
&lt;div&gt; 
&lt;div class=&quot;_box&quot;&gt;选择图片&lt;/div&gt; 
&lt;/div&gt; 
&lt;div class=&quot;none&quot;&gt; 
&lt;input type=&quot;file&quot; name=&quot;_f&quot; id=&quot;_f&quot; /&gt; 
&lt;/div&gt; 
&lt;/form&gt; 
&lt;/body&gt; 
&lt;/html&gt; 
&lt;script type=&quot;text/javascript&quot;&gt; 
jQuery(function () { 
$(&quot;._box&quot;).click(function () { 
$(&quot;#_f&quot;).click(); 
}); 
}); 
&lt;/script&gt;

Copy after login

However, in Firefox and some high-version browsers, the files to be uploaded can be obtained in the background. Some low-version browsers cannot obtain Request.Files at all.
Looking up the information, some said it should be changed to this :

&lt;!DOCTYPE html&gt; 
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt; 
&lt;head runat=&quot;server&quot;&gt; 
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; 
&lt;script src=&quot;js/jquery/jquery-1.8.2.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt; 
&lt;style type=&quot;text/css&quot;&gt; 
._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; 
} 
&lt;/style&gt; 
&lt;title&gt;js 实现 input file 文件上传 /&gt;&lt;/title&gt; 
&lt;/head&gt; 
&lt;body&gt; 
&lt;form id=&quot;form1&quot; runat=&quot;server&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;&gt; 
&lt;div&gt; 
&lt;div class=&quot;_box&quot;&gt;选择图片&lt;/div&gt; 
&lt;/div&gt; 
&lt;div class=&quot;none&quot;&gt; 
&lt;input type=&quot;file&quot; name=&quot;_f&quot; id=&quot;_f&quot; /&gt; 
&lt;/div&gt; 
&lt;/form&gt; 
&lt;/body&gt; 
&lt;/html&gt; 
&lt;script type=&quot;text/javascript&quot;&gt; 
jQuery(function () { 
$(&quot;._box&quot;).click(function () { 
return $(&quot;#_f&quot;).click(); 
}); 
}); 
&lt;/script&gt;

Copy after login

Added a return keyword, the compatibility has been improved a lot, but some browsers are still not easy to use.
We found that we can definitely get the file to be uploaded by manually clicking <input type="file" /> in the background
So we can transparently <input type="file" />
Modify the code as follows:

&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt; 
&lt;head runat=&quot;server&quot;&gt; 
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; 
&lt;style type=&quot;text/css&quot;&gt; 
._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: &quot;alpha(opacity=0)&quot;; 
filter: alpha(opacity=0); 
-moz-opacity: 0; 
left: -5px; 
top: -2px; 
cursor: pointer; 
z-index: 2; 
} 
&lt;/style&gt; 
&lt;title&gt;js 实现 input file 文件上传 /&gt;&lt;/title&gt; 
&lt;/head&gt; 
&lt;body&gt; 
&lt;form id=&quot;form1&quot; runat=&quot;server&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;&gt; 
&lt;div&gt; 
&lt;div class=&quot;_box&quot;&gt; 
&lt;input type=&quot;file&quot; name=&quot;_f&quot; id=&quot;_f&quot; /&gt; 
选择图片 
&lt;/div&gt; 
&lt;/div&gt; 
&lt;/form&gt; 
&lt;/body&gt; 
&lt;/html&gt;

Copy after login

When we click to select the picture, we actually click on the <input type="file" /> with an opacity of 0. A single user cannot see the <input type="file" /> and can also get the information to be uploaded in the background. file.
ok
Summary:
Use an <input type="file" /> with an opacity of 0 to cover the label (or image, etc.) that you want the user to see, so that the user can click on it.
Use width height line-height font-size to control the size of the browse button on the right of <input type="file" />.
Use left top (right, bottum) to control the position of the browsing button on the right side of <input type="file" />, which can be set to a negative value.
Use z-index to set their layer coverage relationship.
form must have enctype="multipart/form-data" tag to upload files

For more js implementation input type="file" file upload sample code related articles, please pay attention to PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn