造型inputtypes=“文件”button
如何设置inputtype="file"button的样式。
样式文件input是非常困难的，因为大多数浏览器不会改变从CSS或JavaScript的外观。
即使input的大小也不会响应如下内容：
<input type="file" style="width:200px">
相反，您将需要使用size属性：
<input type="file" size="60" />
对于任何比这更复杂的样式（例如，改变浏览button的外观），您将需要看看在本机文件input上重叠样式化button和input框的技巧方法。 rm在www.quirksmode.org/dom/inputfile.html上已经提到的文章是我见过的最好的。
你不需要JavaScript！ 这是一个跨浏览器的解决scheme：
看这个例子！ – 它可以在Chrome / FF / IE中使用 – （IE10 / 9/8/7）
最好的方法是将自定义标签元素的属性附加到隐藏文件input元素。 （标签的for属性必须与文件元素的id相匹配才能工作）。
<label for="file-upload" class="custom-file-upload"> Custom Upload </label> <input id="file-upload" type="file"/>
作为替代方法，您也可以直接使用标签来包装文件input元素：（ 示例）
<label class="custom-file-upload"> <input type="file"/> Custom Upload </label>
就样式而言，只需使用属性select器隐藏input元素即可。
input[type="file"] { display: none; }
然后，所有你需要做的是风格的自定义label元素。 （例子） 。
.custom-file-upload { border: 1px solid #ccc; display: inline-block; padding: 6px 12px; cursor: pointer; }
1 – 值得注意的是，如果您使用display: none隐藏该元素，则在IE8及其以下版本中将不起作用。 另外要注意的事实，jQueryvalidation不会validation默认情况下隐藏的字段 。 如果这些事情中的任何一个都是你的问题，这里有两种不同的方法来隐藏在这些情况下工作的input（ 1,2 ）。
请按照以下步骤操作，然后您可以为file upload表单创build自定义样式：
1.）这是简单的html表单（请阅读我在下面写的html注释）
<form action="#type your action here" method="POST" enctype="multipart/form-data"> <div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" onclick="getFile()">Click to upload!</div> <!-- this is your file input tag, so i hide it!--> <div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div> <!-- here you can have file submit button or you can write a simple script to upload the file automatically--> <input type="submit" value='submit' > </form>
2.）然后使用这个简单的脚本将点击事件传递给文件input标签。
function getFile(){ document.getElementById("upfile").click(); }
现在，您可以使用任何types的样式，而无需担心如何更改默认样式。 我知道这一点很好，因为我一直在试图改变一个半月的默认样式。 相信我很难，因为不同的浏览器有不同的上传input标签。 所以使用这一个来build立你自定义的file uploadforms.Here是完整的AUTOMATED UPLOAD代码。
<html> <head> <style> #yourBtn{ position: relative; top: 150px; font-family: calibri; width: 150px; padding: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border: 1px dashed #BBB; text-align: center; background-color: #DDD; cursor:pointer; } </style> <script type="text/javascript"> function getFile(){ document.getElementById("upfile").click(); } function sub(obj){ var file = obj.value; var fileName = file.split("\\"); document.getElementById("yourBtn").innerHTML = fileName[fileName.length-1]; document.myForm.submit(); event.preventDefault(); } </script> </head> <body> <center> <form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm"> <div id="yourBtn" onclick="getFile()">click to upload a file</div> <!-- this is your file input tag, so i hide it!--> <!-- i used the onchange event to fire the form submission--> <div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" value="upload" onchange="sub(this)"/></div> <!-- here you can have file submit button or you can write a simple script to upload the file automatically--> <!-- <input type="submit" value='submit' > --> </form> </center> </body> </html>
请享用！
祝你今天愉快，
用css隐藏它，用$（selector）.click（）来激活浏览button。 然后设置一个时间间隔来检查文件inputtypes的值。 间隔可以显示用户的值，以便用户可以看到上传的内容。 当表单被提交时，间隔将会清除[编辑]对不起，我一直很忙是有意更新这个post，这里是一个例子
<form action="uploadScript.php" method="post" enctype="multipart/form-data"> <div> <!-- filename to display to the user --> <p id="file-name" class="margin-10 bold-10"></p> <!-- Hide this from the users view with css display:none; --> <input class="display-none" id="file-type" type="file" size="4" name="file"/> <!-- Style this button with type image or css whatever you wish --> <input id="browse-click" type="button" class="button" value="Browse for files"/> <!-- submit button --> <input type="submit" class="button" value="Change"/> </div>
$(window).load(function () { var intervalFunc = function () { $('#file-name').html($('#file-type').val()); }; $('#browse-click').on('click', function () { // use .live() for older versions of jQuery $('#file-type').click(); setInterval(intervalFunc, 1); return false; }); });
HTML
<div class="new_Btn">SelectPicture</div><br> <input id="html_btn" type='file'" /><br>
CSS
.new_Btn { // your css propterties } #html_btn { display:none; }
jQuery的
$('.new_Btn').bind("click" , function () { $('#html_btn').click(); }); //edit: 6/20/2014: Be sure to use ".on" not ".bind" for newer versions of jQuery
小提琴 ： http : //jsfiddle.net/M7BXC/
没有普通JavaScript的jQuery，你也可以达到你的目标。
现在newBtn与html_btn链接，你可以像你想要的样式你的新btn：D
所有渲染引擎在创build<input type="file">时自动生成一个button。 从历史上看，该button已经完全不可风格。 但是，Trident和WebKit通过伪元素添加了钩子。
三叉戟
从IE10开始，可以使用::-ms-browse伪元素对文件inputbutton进行样式设置。 基本上，您应用于常规button的任何CSS规则都可以应用于伪元素。 例如：
::-ms-browse { background: black; color: red; padding: 1em; }
<input type="file">
<label> <input type="file" /> </label>
您可以将inputtypes=“文件”包装在input标签中。 设置标签的样式，然后用display：none;
如果你正在使用Bootstrap 3，这对我有效：
见http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
.btn-file { position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block; }
<link href="bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <span class="btn btn-primary btn-file"> Browse...<input type="file"> </span>
我能够用纯CSS使用下面的代码。 我用bootstrap和字体真棒。
<link href="bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" /> <label class="btn btn-default btn-sm center-block btn-file"> <i class="fa fa-upload fa-2x" aria-hidden="true"></i> <input type="file" style="display: none;"> </label>
这很简单，jQuery。 稍微修改一下Ryanbuild议的代码示例。
基本的html：
<div id="image_icon"></div> <div id="filename"></div> <input id="the_real_file_input" name="foobar" type="file">
准备就绪时，请务必在input上设置样式： opacity: 0不能将display: none设置为可点击。 但是，如果你愿意的话，你可以把它放在“新build”button的下面，或者用z-index的其他东西放在其他的东西下面。
设置一些jquery点击图片时点击真实的input。
$('#image_icon').click(function() { $('#the_real_file_input').click(); });
现在你的button正在工作。 只需剪切并粘贴更改后的值。
$('input[type=file]').bind('change', function() { var str = ""; str = $(this).val(); $("#filename").text(str); }).change();
大啊！ 您可能需要将val（）parsing为更有意义的内容，但应该全部设置。
可见度：隐藏的TRICK
我通常去看visibility:hidden把戏
这是我的风格的button
<div id="uploadbutton" class="btn btn-success btn-block">Upload</div>
这是inputtypes=文件button。 请注意visibility:hidden规则
<input type="file" id="upload" style="visibility:hidden;">
这是将它们粘合在一起的JavaScript位。 有用
<script> $('#uploadbutton').click(function(){ $('input[type=file]').click(); }); </script>
我能想到的唯一方法是在呈现javascript后findbutton，并为其分配样式
你也可以看看这个写法
<input type="file" name="media" style="display-none" onchange="document.media.submit()">
我通常会使用简单的JavaScript来自定义文件input标签。一个隐藏的input字段，点击button，JavaScript调用隐藏的领域，简单的解决scheme与任何CSS或jQuery的一堆。
<button id="file" onclick="$('#file').click()">Upload File</button>
下面是一个解决scheme，它不是真正地devise<input type="file" />元素的样式，而是在其他元素（可以是样式）的顶部使用<input type="file" />元素。 <input type="file" />元素并不是真的可见的，因此，整体错觉是一个很好的风格的file upload控制。
最近我遇到了这个问题，尽pipe堆栈溢出的答案很多，但似乎没有什么可以满足这个要求。 最后，我最终定制了一个简单而优雅的解决scheme。
我也testing了Firefox，IE（11,10和9），Chrome和Opera，iPad和一些Android设备。
这里是JSFiddle链接 – > http://jsfiddle.net/umhva747/
$('input[type=file]').change(function(e) { $in = $(this); $in.next().html($in.val()); }); $('.uploadButton').click(function() { var fileName = $("#fileUpload").val(); if (fileName) { alert(fileName + " can be uploaded."); } else { alert("Please select a file to upload"); } });
body { background-color:Black; } div.upload { background-color:#fff; border: 1px solid #ddd; border-radius:5px; display:inline-block; height: 30px; padding:3px 40px 3px 3px; position:relative; width: auto; } div.upload:hover { opacity:0.95; } div.upload input[type="file"] { display: input-block; width: 100%; height: 30px; opacity: 0; cursor:pointer; position:absolute; left:0; } .uploadButton { background-color: #425F9C; border: none; border-radius: 3px; color: #FFF; cursor:pointer; display: inline-block; height: 30px; margin-right:15px; width: auto; padding:0 20px; box-sizing: content-box; } .fileName { font-family: Arial; font-size:14px; } .upload + .uploadButton { height:38px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <form action="" method="post" enctype="multipart/form-data"> <div class="upload"> <input type="button" class="uploadButton" value="Browse" /> <input type="file" name="upload" accept="image/*" id="fileUpload" /> <span class="fileName">Select file..</span> </div> <input type="button" class="uploadButton" value="Upload File" /> </form>
本周我还需要定制button，并将选定的文件名显示在旁边，所以在阅读上面的一些答案（谢谢BTW），我想出了以下实现：
HTML：
<div class="browse"> <label id="uploadBtn" class="custom-file-upload">Choose file <input type="file" name="fileInput" id="fileInput" accept=".yaml" ngf-select ngf-change="onFileSelect($files)" /> </label> <span>{{fileName}}</span> </div>
CSS
input[type='file'] { color: #a1bbd5; display: none; } .custom-file-upload { border: 1px solid #a1bbd5; display: inline-block; padding: 2px 8px; cursor: pointer; } label{ color: #a1bbd5; border-radius: 3px; }
Javascript（Angular）
app.controller('MainCtrl', function($scope) { $scope.fileName = 'No file chosen'; $scope.onFileSelect = function ($files) { $scope.selectedFile = $files; $scope.fileName = $files[0].name; }; });
基本上我正在使用ng-file-upload lib，Angular-wise我将文件名绑定到我的$ scope，并给它初始值'No file selected'，我还将onFileSelect（）函数绑定到我的范围，所以当一个文件被选中我得到的文件名使用ng-upload API并将其分配给$ scope.filename。
TLDR; 使用本地拖放支持工作示例： https ： //jsfiddle.net/ms3bbazv/4/
在搅拌文件input时，不应该破坏input提供的任何本地交互。
display: none方法打破了原生的拖放支持。
为了不破坏任何东西，你应该使用opacity: 0方法进行input，并使用相对/绝对模式将其定位在包装中。
使用这种技术，您可以轻松地为用户设置点击/放置区域，并在dragenter事件的javascript中添加自定义类以更新样式，并向用户提供反馈，让他看到他可以放置文件。
HTML：
<label for="test"> <div>Click or drop something here</div> <input type="file" id="test"> </label>
CSS：
input[type="file"] { position: absolute; left: 0; opacity: 0; top: 0; bottom: 0; width: 100%; } div { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; display: flex; align-items: center; justify-content: center; background: #ccc; border: 3px dotted #bebebe; border-radius: 10px; } label { display: inline-block; position: relative; height: 100px; width: 400px; }
这是一个工作的例子（用额外的JS来处理dragover事件和丢弃的文件）。
https://jsfiddle.net/ms3bbazv/4/
希望这有助于！
css可以在这里做很多…有一点小小的诡计
<div id='wrapper'> <input type='file' id='browse'> </div> #wrapper { width: 93px; /*play with this value */ height: 28px; /*play with this value */ background: url('browseBtn.png') 0 0 no-repeat; border:none; overflow:hidden; } #browse{ margin-left:-145px; /*play with this value */ opacity:0; /* set to .5 or something so you can better position it as an overlay then back to zero again after you're done */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); }
:: reference： http ://site-o-matic.net/?viewpost =19
-abbey
我发现了一个非常简单的方法来将文件button切换到图片。 您只需标记一张照片并将其放在文件button的顶部。
<html> <div id="File button"> <div style="position:absolute;"> <!--This is your labeled image--> <label for="fileButton"><img src="ImageURL"></label> </div> <div> <input type="file" id="fileButton"/> </div> </div> </html>
点击标签图片时，select文件button。
这是一个解决scheme，它也显示了所选的文件名： http : //jsfiddle.net/raft9pg0/1/
HTML：
<label for="file-upload" class="custom-file-upload">Chose file</label> <input id="file-upload" type="file"/> File: <span id="file-upload-value">-</span>
JS：
$(function() { $("input:file[id=file-upload]").change(function() { $("#file-upload-value").html( $(this).val() ); }); });
CSS：
input[type="file"] { display: none; } .custom-file-upload { background: #ddd; border: 1px solid #aaa; border-top: 1px solid #ccc; border-left: 1px solid #ccc; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; color: #444; display: inline-block; font-size: 11px; font-weight: bold; text-decoration: none; text-shadow: 0 1px rgba(255, 255, 255, .75); cursor: pointer; margin-bottom: 20px; line-height: normal; padding: 8px 10px; }
只有CSS
使用这个非常简单和简单
HTML：
<label>Attach your screenshort</label> <input type="file" multiple class="choose">
CSS：
.choose::-webkit-file-upload-button { color: white; display: inline-block; background: #1CB6E0; border: none; padding: 7px 15px; font-weight: 700; border-radius: 3px; white-space: nowrap; cursor: pointer; font-size: 10pt; }
也许很多的awnsers。 但我喜欢用纯CSS的fa-buttons：
.divs { position: relative; display: inline-block; background-color: #fcc; } .inputs { position:absolute; left: 0px; height: 100%; width: 100%; opacity: 0; background: #00f; z-index:999; } .icons { position:relative; }
<div class="divs"> <input type='file' id='image' class="inputs"> <i class="fa fa-image fa-2x icons"></i> </div> <div class="divs"> <input type='file' id='book' class="inputs"> <i class="fa fa-book fa-5x icons"></i> </div> <br><br><br> <div class="divs"> <input type='file' id='data' class="inputs"> <i class="fa fa-id-card fa-3x icons"></i> </div> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
不要被那些实际上特定于浏览器的“伟大的”纯CSS解决scheme所迷惑，或者将真正的button叠加在真实button的顶部，或者强迫您使用<label>而不是<button> ，或任何其他这样的黑客。 JavaScript是必要的，以使其工作的一般用法。 如果你不相信我，请研究一下gmail和DropZone是如何做的。
只需要设置一个普通的button，然后调用一个简单的JS函数来创build隐藏的input元素并将其链接到您的样式化button。
<!DOCTYPE html> <meta charset="utf-8"> <style> button { width : 160px; height : 30px; font-size : 13px; border : none; text-align : center; background-color : #444; color : #6f0; } button:active { background-color : #779; } </style> <button id="upload">Styled upload button!</button> <script> function Upload_On_Click(id, handler) { var hidden_input = null; document.getElementById(id).onclick = function() {hidden_input.click();} function setup_hidden_input() { hidden_input && hidden_input.parentNode.removeChild(hidden_input); hidden_input = document.createElement("input"); hidden_input.setAttribute("type", "file"); hidden_input.style.visibility = "hidden"; document.querySelector("body").appendChild(hidden_input); hidden_input.onchange = function() { handler(hidden_input.files[0]); setup_hidden_input(); }; } setup_hidden_input(); } Upload_On_Click("upload", function(file) { console.log("GOT FILE: " + file.name); }); </script>
注意每次用户select一个文件后，上面的代码是如何重新链接它的。 这很重要，因为只有在用户更改文件名时才会调用“onchange”。 但是，您可能希望每次用户提供文件时都要获取该文件。
以下是一个简单的CSS解决scheme，它可以创build一个一致的目标区域，并允许您根据自己的喜好来devise人造元素。
基本的想法是这样的：
- 有两个“假”元素（文本input/链接）作为您的真实文件input的兄弟姐妹。 绝对放置它们，使它们完全位于目标区域之上。
- 用div封装你的文件input。 将溢出设置为隐藏（所以文件input不会溢出），并将其设置为您希望目标区域的大小。
- 在文件input中将不透明度设置为0，以便隐藏但仍可点击。 给它一个很大的字体大小，所以你可以点击目标区域的所有部分。
这里是jsfiddle： http : //jsfiddle.net/gwwar/nFLKU/
<form> <input id="faux" type="text" placeholder="Upload a file from your computer" /> <a href="#" id="browse">Browse </a> <div id="wrapper"> <input id="input" size="100" type="file" /> </div> </form>
我在这里find了一个非常聪明的解决scheme，使用jQuery，可以在所有旧版浏览器以及新版浏览器中运行。 它使用实际的文件浏览button来处理所有样式和click（）问题。 我做了一个简单的JavaScript版本： 小提琴解决scheme就像天才一样简单：使文件input不可见，并使用一段代码将它放在mousecursor下。
<div class="inp_field_12" onmousemove="file_ho(event,this,1)"><span>browse</span> <input id="file_1" name="file_1" type="file" value="" onchange="file_ch(1)"> </div> <div id="result_1" class="result"></div> function file_ho(e, o, a) { e = window.event || e; var x = 0, y = 0; if (o.offsetParent) { do { x += o.offsetLeft; y += o.offsetTop; } while (o = o.offsetParent); } var x1 = e.clientX || window.event.clientX; var y1 = e.clientY || window.event.clientY; var le = 100 - (x1 - x); var to = 10 - (y1 - y); document.getElementById('file_' + a).style.marginRight = le + 'px'; document.getElementById('file_' + a).style.marginTop = -to + 'px'; } .inp_field_12 { position:relative; overflow:hidden; float: left; width: 130px; height: 30px; background: orange; } .inp_field_12 span { position: absolute; width: 130px; font-family:'Calibri', 'Trebuchet MS', sans-serif; font-size:17px; line-height:27px; text-align:center; color:#555; } .inp_field_12 input[type='file'] { cursor:pointer; cursor:hand; position: absolute; top: 0px; right: 0px; -moz-opacity:0; filter:alpha(opacity: 0); opacity: 0; outline: none; outline-style:none; outline-width:0; ie-dummy: expression(this.hideFocus=true); } .inp_field_12:hover { background-position:-140px -35px; } .inp_field_12:hover span { color:#fff; }
如果你正在寻找一个JavaScript库 – 开箱即用的解决scheme， jquery-fileinput工作正常。
更新 Nevermind，这不适用于IE或它的新兄弟FF。 按预期工作在其他types的元素上，但不能用于文件input。 更好的方法是创build一个文件input和一个链接到它的标签。 使文件input无显示和繁荣，它在IE9 +无缝工作。
警告：这下面的一切都是废话！
通过使用定位/大小的伪元素来对付它们的容器，我们可以只用一个input文件（不需要额外的标记）和样式按照惯例。
演示
<input type="file" class="foo"> .foo { display: block; position: relative; width: 300px; margin: auto; cursor: pointer; border: 0; height: 60px; border-radius: 5px; outline: 0; } .foo:hover:after { background: #5978f8; } .foo:after { transition: 200ms all ease; border-bottom: 3px solid rgba(0,0,0,.2); background: #3c5ff4; text-shadow: 0 2px 0 rgba(0,0,0,.2); color: #fff; font-size: 20px; text-align: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; content: 'Upload Something'; line-height: 60px; border-radius: 5px; }
享受家伙！
旧更新
把它变成一个Stylus mixin。 应该很容易让你们中的一个很酷SCSS猫来转换它。
file-button(button_width = 150px) display block position relative margin auto cursor pointer border 0 height 0 width 0 outline none &:after position absolute top 0 text-align center display block width button_width left -(button_width / 2)
用法：
<input type="file"> input[type="file"] file-button(200px)
正如JGuo和CorySimmons所提到的那样，您可以使用可风化标签的可点击行为，隐藏不太灵活的文件input元素。
<!DOCTYPE html> <html> <head> <title>Custom file input</title> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head> <body> <label for="upload-file" class="btn btn-info"> Choose file... </label> <input id="upload-file" type="file" style="display: none" onchange="this.nextElementSibling.textContent = this.previousElementSibling.title = this.files[0].name"> <div></div> </body> </html>
这些答案很好，它们都适用于非常具体的用例。 也就是说，他们是有见地的。
所以，这里是一个没有任何假设的答案，但无论你如何修改它，它都可以工作。 你可以改变devise与CSS，添加JavaScript，也许显示更改文件名等，它仍然会一直工作。
码：
这是核心的CSS
.file-input{ pointer-events: none; position: relative; overflow: hidden; } .file-input > * { pointer-events: none; } .file-input > input[type="file"]{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; pointer-events: all; cursor: pointer; height: 100%; width: 100%; }
and the core html:
<div class="file-input"> <input type="file"/> </div>
As you can see, we are forcing any pointer event(click) that happens on the .file-input element, or any of its children, to be proxied to the file input. This is because the file input is positioned absolute and will consume the width/height of the container always. You can therefore customize to fit your need. style the wrapper into a button, use some js to display file name on select, etc. nothing will break so long as the above core code remains intact.
As you will see in the demo, i have added a span with text "Select file" and a class with extra styles to style the .file-input div. This should be the canonical starting point for anyone intending to create a custom file upload element.
Demo: JSFIDDLE
Put upload file button over your nice button or element and hide it.
Very simple and will work on any browser
<div class="upload-wrap"> <button type="button" class="nice-button">upload_file</button> <input type="file" name="csv_file" class="upload-btn"> </div>
样式
.upload-wrap { position: relative; } .upload-btn { position: absolute; left: 0; opacity: 0; }
jquery version of teshguru script for automatically detect input[file] and style
<html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <style> #yourBtn{ position: relative; top: 150px; font-family: calibri; width: 150px; padding: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border: 1px dashed #BBB; text-align: center; background-color: #DDD; cursor:pointer; } </style> <script type="text/javascript"> $(document).ready(function() { $('input[type=file]').each(function() { $(this).attr('onchange',"sub(this)"); $('<div id="yourBtn" onclick="getFile()">click to upload a file</div>').insertBefore(this); $(this).wrapAll('<div style="height: 0px;width: 0px; overflow:hidden;"></div>'); }); }); function getFile(){ $('input[type=file]').click(); } function sub(obj){ var file = obj.value; var fileName = file.split("\\"); document.getElementById("yourBtn").innerHTML = fileName[fileName.length-1]; } </script> </head> <body> <?php var_dump($_FILES); ?> <center> <form action="" method="post" enctype="multipart/form-data" name="myForm"> <input id="upfile" name="file" type="file" value="upload"/> <input type="submit" value='submit' > </form> </center> </body> </html>
