Home > Web Front-end > HTML Tutorial > How to use pure HTML to implement an upload file button that is the same in all browsers

How to use pure HTML to implement an upload file button that is the same in all browsers

零下一度
Release: 2017-05-09 15:19:28
Original
2895 people have browsed it

If you've ever tried it, you'll know that implementing a unified Upload file button using pure CSS styling plus HTML can be cumbersome. Take a look at the screenshots from different browsers below. It's obvious that they look very different.

Our goal is to create a simple, pure CSS upload file button that looks and layouts the same in all browsers. We can do this:

Step 1. Create a simple HTML tag

<p class="fileUpload btn btn-primary">
    <span>Upload</span>
    <input type="file" class="upload" />
</p>
Copy after login

Step 2: CSS: A little tricky

.fileUpload {
	position: relative;
	overflow: hidden;
	margin: 10px;
}
.fileUpload input.upload {	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	font-size: 20px;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
}
Copy after login

For the sake of simplicity, I used the application BootstrapCSS style button (p.file-upload).

Demo:

Upload button to display the selected file

Unfortunately, pure CSS cannot do this. However, if you really want to display the selected file, the JavaScript code snippet below can help you.

JavaScript:

document.getElementById("uploadBtn").onchange = function () {
    document.getElementById("uploadFile").value = this.value;
};
Copy after login

DOM:

<input id="uploadFile" placeholder="Choose File" disabled="disabled" />
<p class="fileUpload btn btn-primary">
    <span>Upload</span>
    <input id="uploadBtn" type="file" class="upload" />
</p>
Copy after login

Demo:

##【Related recommendations】

1.

Free html online video tutorial

2.

html development manual

3.

php.cn original html5 video tutorial

The above is the detailed content of How to use pure HTML to implement an upload file button that is the same in all browsers. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template