input标签file类型,去除不同浏览器“未选择文件”字样办法

之前的样式,这个“未选择文件”很想把它去掉吧?

这段代码的运行结果,去掉了“未选择文件”

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

#file{ width:226px; height:25px;  position:relative;}

#filetxt{}

#filebtn{ position:absolute; right:0px; }

#upfile{ width:70px; position:absolute; right:0px; top:0px; opacity:0;}

</style>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" ></script>

</head>

<body>

<div id="file">

<input id="filetxt" type="text" value="未选择文件" />

<input id="filebtn" type="button" value="SELECT"/>

<input id=‘upfile‘ type="file" />

</div>

<script>

$(function(){

$(‘#upfile‘).change(function(){

$(‘#filetxt‘).val($(‘#upfile‘).val());

});

});

</script>

</body>

</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-08-28 03:21:54

input标签file类型,去除不同浏览器“未选择文件”字样办法的相关文章

将input type=&quot;file&quot; 类型的图片文件转成base64

带有图片的form表单上传数据是很麻烦的,因为图片通常都是和文字分开上传,这是很麻烦的,所有吧图片转成base64就可以和当成文字上传了.话不多少,看代码: 首先定义一个类型为file的input标签还要定义一个onchange事件,并传入一个event参数. <div> <input type="file" id="imgTest" type="file" onchange="imgChange(event)&quo

input标签file文件上传图片,获取base64

<input type="file" name="img-up" id="img-up" value="" /> $("#img-up").on("change",function () { if(this.files[0]){ getImgBase64Data(this.files[0], function (result) { console.log(result); }

安卓打开文件浏览器,选择文件后得到返回路径

新手,写的不对还望指正! 在安卓应用开发中经常会遇到需要打开系统文件管理器选择文件后返回路径的操作.例如点击一个导入的Button按钮,首先在根目录下寻找所需要的文件,若文件不存在就弹出对话框是否选择文件,选择文件后返回文件路径,给Button注册监听: public void onClick(View arg0) { if (mFilePath.equals("没有找到相关文件")) { AlertDialog.Builder builder = new AlertDialog.Bu

自定义input[type=&quot;file&quot;]的样式

input[type="file"]的样式在各个浏览器中的表现不尽相同: 1. chrome: 2. firefox: 3. opera: 4. ie: 5. edge: 另外,当我们规定 input[type="file"] 的高度,并把它的行高设置成与其高度相等后,chrome中难看的样式出现了: “未选择任何文件”这一行并没有竖直居中. 似乎在 firefox 中好看一些,嗯,我比较喜欢用 firefox.但是这些浏览器中的表现不一致,我们必须做兼容处理. 思

input type=file 标签禁止让用户手动输入

常规的Web应用程序中涉及到文件上传的部分都不可避免地会使用到<input type="file"/>控件,在上传文件的时候通过点击“浏览”按钮,在弹出的文件选择对话框中选择本地要上传的文件.当然,如果你已经知道要上传的文件的本地路径,也可以复制路径到控件的输入框中(例如要选择的文件的路径特别长).这就存在一个问题,如果你所复制的文件路径根本不存在,那么上传的时候就无法正确获取到文件,而且在javascript中没有判断该控件所选择的文件是否存在的方法,涉及到浏览器的安全性

js 实现 input type=&quot;file&quot; 文件上传示例代码

在开发中,文件上传必不可少但是它长得又丑.浏览的字样不能换,一般会让其隐藏点其他的标签(图片等)来时实现选择文件上传功能 在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但是它长得又丑.浏览的字样不能换,我们一般会用让,<input type="file" />隐藏,点其他的标签(图片等)来时实现选择文件上传功能. 看代码: 代码如下: <!DOCTYPE html> <html x

Form和input标签的使用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>input的使用</title></head><body> <!--复选框,如果需要用户输入多个就选用这个--> <!--<input type="checkbox">--> <

Android:让WebView支持&lt;input type=”file”…&gt;元素

在Android中,当我们通过WebView打开一个页面时,如果里面有元素是<input type=”file”…>类型的,WebView只能正常的显示样式,但是是无法点击的.要解决这个问题,我们需要重写WebChromeClient. 下面直接给出Demo代码: Activity文件: public class MainActivity extends Activity { private final String host = "demo.com"; private f

javascript input type=file 文件上传

在JS中,input type=file 是常用的文件上传API,但感觉W3C说的不是很清楚,同时网上的资料也比较乱. 由于做微信开发,所以网页打算尽量少用第三方库或者插件,以加快网页的加载速度.因为微信企业号本身想实现的功能也很纯粹,不需要太多乱七八糟的东西. 我这里只用了JQuery. 总结如下: 1.用户选择文件后,一般只显示一个fakepath,不会显示一个完整的文件目录.用$("input[type='file']")[0].files[0].name即可显示出文件名. 2.