修改input type=file 标签默认样式的简单方法

<html>
<head>
<title></title>
</head>
<body>
<form id="uploadForm"  action="" method="post" enctype="multipart/form-data">
<input type="file" name="uploadFile" id="uploadFile" style="visibility:hidden;position:absolute;top:0px;width:0px"/><!--隐藏默认标签样式-->
</form>
<input type="button" value="上传" id="btn"/><!--修改为自己喜欢的样式即可，支持图片，对话框，按钮，DIV，注意id要和事件调取的ID一致-->
</body>
<script src="jquery183.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //按钮的点击事件
            $(‘#btn‘).click(function () {
                //触发file的点击事件
                $(‘#uploadFile‘).click();
            });
            //file的change事件
            $(‘#uploadFile‘).change(function () {
                //提交form表单的数据
                $(‘#uploadForm‘).submit();
　　　　　　　　　//清空file标签的value，否则再次提交此文件时，onchange事件就不触发了
　　　　　　　　　$(‘#uploadFile‘).val(‘‘); 
　　　　　　　　}); 
　　　　}); 
</script>
</html>

时间： 2024-10-22 15:21:50

修改input type=file 标签默认样式的简单方法的相关文章

&lt;input type=&#39;file&#39;/&gt;把默认样式改成框框

<!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" xml:lang="en"><head><meta http

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

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

input type file 获得用户选择的一般方法

<script type="text/javascript"> function ShowExcelFile() { var tempName = $("#selectOriginFile_CertificationTemplateSelect").val(); if (tempName != null && tempName != "") { window.open("/home/ReadExcelFile

input type=file 按钮的样式怎么改变?【转】

修改前样式: 这个貌似是不能直接改的,不过可以模拟: <input type=file name=message_img style="display: none;" onchange="ye.value=value" /> <input name=ye value="None file" /> <input type=button value="Select file" onclick=mess

美化input type=range标签滑动样式（带渐变效果）

input原来的样式就不在此赘述了: 下面看一下实际项目中用到的input输入框,同步绑定输入数据,实现输入框双向绑定(实际项目中使用的是vue框架): html部分: <div class="inputRatio"> 滑动条:<input type="range" name="ratio" :value="parseInt(ratio)" @input="ratio=$event.target.v

input type=file为什么不能通过js来修改值的出处

给客户解释,为什么不能通过javascript来修改input type=file这个控件的值. 最终从微软的msdn上找到了. https://msdn.microsoft.com/zh-cn/hh466236 input type=fileThe value, a file name, typed by the user into the control. Unlike other controls, this value is read-only.

关于去除input type=&#39;file&#39;改变组件的默认样式换成自己需要的样式的解决方案

在工作中时常会遇到如需要上传功能的按钮,而不像需要系统默认的样式时候,可以采取以下的解决方案: <img onclick="getElementById('file').click()" style="cursor:pointer;" title="点击添加图片" alt="点击添加图片" src="sc.png"><!--用来替换按钮的图片 --> <input type=&

修改默认input（file）的样式

以上是默认的 <input type="file" > 但是丑爆了啊同志们~~长久以来都是调用大神的代码,今天我也小试牛刀,做出了如下效果: 这样还是能接受的样子啦~ LOOK! html文件: <div class="divBox div1"> <div class="fileName"></div> <button>选择文件</button> <input type

css input[type=file] 样式美化，input上传按钮美化

我们在做input文本上传的时候,html自带的上传按钮比较丑,如何对其进行美化呢?同理:input checkbox美化,input radio美化是一个道理的,后面文章会总结. 思路: input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能. 代码如下: DOM结构: <a href="javascript:;" class="a-upload"> <input type=