问题描述:
一般情况下,利用file类型的input浏览选择文件,再配合form就可以实现文件的上传功能。实现出的效果如下图:(以csdn写博客上传图片时的浏览框为例)
在实际的开发情况中,为了配合整个网页的风格,也为了让浏览框更美观,需要对file类型的input进行样式修改。但由于input中的“浏览”按钮是由html根据input的type解析出来的,没办法直接使用css对齐进行位置上的修改,这就给开发带来一定的麻烦。为了解决这个问题,我们可以使用javascript配合html来进行处理。
主要思想:
(1)将file类型的input进行隐藏
(2)根据需要放置新的按钮和text型的input
(3)将新放置的按钮与input跟隐藏掉的file型input关联到一起,当点击新设置的按钮时会触发file型input的浏览按钮。并将所选文件名称显示在新设置的text型input上。
实现代码:
(1)HTML设置上传文件的form和input等元素
<form id="upload-form" action="" method="post" enctype="multipart/form-data" name="form"> <div style="float:left;width:100%"> <input id="fname" type="text" tabindex="1" style="float:left;width:80%;height:40px;border:1px solid #34495E"/><!--用于显示上传文件名的input--> <input id="up_file" name="up_file" type="file" style="display:none" required="required" onchange="document.getElementById('fname').value=this.value"/><!--实际起作用的file型input--> <input type="button" name="submit" style="float:left;width:10%;height:40px;border:1px solid #34495E;background-color:#34495E;color:#ffffff" value="浏览" onclick="select_file();"/><!--用于触发file型input浏览按钮的button--> <input type="submit" name="submit" style="float:left;width:10%;height:40px;border:1px solid #34495E;background-color:#34495E;color:#ffffff" value="上传"/> </div> </form>
(2)相关的js
function select_file(){
document.getElementById("up_file").click();
var name = document.getElementById("up_file").value;
}
给file型input添加一个onchange事件,当内容发生改变时将其中的值,也就是选择的文件名称传到text型input当中显示出来。给浏览按钮添加onclick事件,当点击新设置的“浏览”按钮时,触发js函数select_file,实际是让file类型的input被点击。从而浏览并选择文件。
(3)效果: