Home > Article > Web Front-end > js implementation input type="file" file upload sample code

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

高洛峰Original: 2016-12-24 17:14:271421browse

In development, file uploading is essential. 61b9b53f6d762f7c3b14ccfc7d4eaf40 is a commonly used upload tag, but it is ugly and cannot be changed when browsing. We usually use, 61b9b53f6d762f7c3b14ccfc7d4eaf40Hide, click on other tags (pictures, etc.) to realize the file upload function.
Look at the code:

<!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>

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 :

<!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>

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 61b9b53f6d762f7c3b14ccfc7d4eaf40 in the background
So we can transparently 61b9b53f6d762f7c3b14ccfc7d4eaf40
Modify the code as follows:

<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>

When we click to select the picture, we actually click on the 61b9b53f6d762f7c3b14ccfc7d4eaf40 with an opacity of 0. A single user cannot see the 61b9b53f6d762f7c3b14ccfc7d4eaf40 and can also get the information to be uploaded in the background. file.
ok
Summary:
Use an 61b9b53f6d762f7c3b14ccfc7d4eaf40 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 61b9b53f6d762f7c3b14ccfc7d4eaf40.
Use left top (right, bottum) to control the position of the browsing button on the right side of 61b9b53f6d762f7c3b14ccfc7d4eaf40, 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：

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

Previous article：Example of calling js function from iframe sub-parent pageNext article：Example of calling js function from iframe sub-parent page

See more

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

Related articles