兼容ie8的文件上传美化 input type="file"

最新推荐文章于 2024-04-12 10:00:02 发布
最新推荐文章于 2024-04-12 10:00:02 发布
阅读量4.4k 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 问题解决记录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_35419734/article/details/79663075
该博客展示了如何在IE8中实现文件上传的样式美化，并处理上传文件格式的验证。通过HTML、CSS和JavaScript代码示例，博主详细解释了实现这一功能的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

先上效果图：

上传文件格式正确：


上传文件格式错误：

最低0.47元/天 解锁文章

200万优质内容无限畅学
兼容IE8的file单文件上传（jquery.form+formdata）
qq_42708369的博客
05-30 3909
文章链接：https://blog.youkuaiyun.com/spw55381155/article/details/79891297 IE8后台返回json串会弹框要下载，所以要将响应头设置成‘text/html’. 一、HTML //防止表单重复提交，看需求 //高版本只选...
ie8 文件上传
eggplantmoon的博客
01-08 539
jQuery.extend({ //创建 iframe 元素,接受提交及响应 createUploadIframe: function(id, uri) { //create frame var frameId = 'jUploadFrame' + id; if (window.ActiveXObject) { //...
IE8 下更改input[file] file文件选择框样式
weixin_33691817的博客
12-24 459
1/使用绝对定位，将文件选择框固定，并且隐藏该选择框（文件选择框可调整宽高），设置该文件选择框 z-index 调高 比如 999。 2/使用任意标签，调整为与上面选择框相同宽高，目的为使用该标签样式覆盖选择框，但是实际触发事件依然是在选择框上，     因为z-index级别比该元素高。又因为大小相同，多以点击该标签任何位置都是在点击文件选择框。     从而达到自定义文本选择框样式的目的。  ...
文件上传按钮input[type="file"]按钮美化时在IE8中的bug【兼容至IE8】
Alisa的博客
08-08 234
文件上传按钮input[type="file"]按钮美化时在IE8中的bug【兼容至IE8】转载以下地址 转载以下地址 完成后的效果，鼠标移入可改变为手指的效果。 在此就不加图标了 　　上传附件 　　 　　在IE8中需要将input透明后还不能完全达到效果，还需要将字体设大一些，撑开input，这是IE自带的兼容问题。 .file-upload{ display: inline-block; ...
ie8及其以下版本兼容性问题之input file隐藏上传文件
06-23 448
文件上传时，默认的file标签很难看，而且每个浏览器下都有很大差距。因此我们基本都把真正的file标签给隐藏，然后创建一个标签来替代它。但是由于IE出于安全方面的考虑上传文件时必须点击file的浏览按钮选择文件才可以把文件上传上去。此时我们可以将file input透明化, 遮罩在自定义的button input 上面。这样用户看到的是我们自定义button的外观而实际上点击的还是fil...
CSS美化 input type=file 兼容各个浏览器
09-25
在网页设计中，CSS美化`<input type="file">`元素常常是一项挑战，因为不同的浏览器对这个元素的默认样式和行为处理方式各异。为了解决这个问题，开发者们需要找到一种跨浏览器的解决方案来统一表现。这里介绍一种纯...
文件上传input file简便美化方案(css)
01-19
文件上传input在各个浏览器里表现形式都不一样： ie6   ie7,8,9 ff chrome 这里介绍一种简单实用的，在各种浏览器下表现一致的美化方法，效果如下： ie6无法美化，只能应用部分效果，如下： 选择文件后（以ff...
type=file的inpu美化，自定义上传按钮样式代码
09-24
其中，`<input type="file">` 是一个典型的例子，它用于创建文件上传功能，但在不同浏览器中，其默认样式差异较大，且不易通过CSS直接控制。本文将详细介绍如何对type=file的input进行美化以及自定义上传按钮的样式...
解决IE8下上传文件问题，无需flash，无需html5
weixin_42306221的博客
06-12 2114
解决IE8下上传文件问题 场景：实现上传文件功能，重写上传按钮样式，并需要得到后台返回的数据来动态修改页面。 要求：不需要flash以及其他额外需要的东西。 尝试过的方法：1.webuploader.js 2.uploadifive.js 3.纯原生 4.jquery.form.js 第一种：失败，webuploader需要安装flash才能生效。 <div class="fileUpload" id="fileInput" style="display: none"> <span
以input=file方式，获取文件时，在IE下8无法通过某个按钮click事件间接触发input=file的change事件...
weixin_30337251的博客
09-18 583
最近在项目中遇到了许多上传问题，公司内部的组件，通过form上传，需要使用input=file触发选择文件， 因为input=file在各个浏览器中显示的样式是不同的，谷歌，火狐，IE都有所不同，而且不太美观，所以为了解决 这一个问题，一开始采用了隐藏input=file 然后通过一个显示的button间接触发input=file的click事件如下 <inpu...
上传插件支持ie8
03-26
上传插件支持ie8，用于pc端或h5页支持ie8、ie9、ie10、ie11
ie浏览器下HTML上传控件input=file的美化
08-22 161
　　近期写东西用到了input=file这个按钮，给其添加背景，在其它浏览器上都可以正常的显示，可一到ie上便不听话了，完全没有添加上，显的很难看。今天在网上找到一方法，试过后感觉很好，终于把这个问题给解决了，现将其记录一下。 　　美化的原理：将input到一个div框里，opacity设置为0，这样input表现为全透明，不可见，但覆盖在文字之上，div里的内容就可以显示出来，这时你...
input file图片预览 兼容ie8+(1)
最新发布
2401_84097996的博客
04-12 280
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料分享给大家，戳这里即可领取做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料分享给大家，
CSS美化 input type=file 兼容各个浏览器（转）
weixin_33674437的博客
11-18 155
HTML代码： &lt;FORM&gt; &lt;A class=btn_addPic href="javascript:void(0);"&gt;&lt;SPAN&gt;&lt;EM&gt;+&lt;/EM&gt;添加图片&lt;/SPAN&gt; &lt;INPUT class=filePrew title=支持jpg、jpeg、gif、
php input file更改选择文件,IE8 下更改input[file] file文件选择框样式
weixin_39604280的博客
04-15 193
1/使用绝对定位，将文件选择框固定，并且隐藏该选择框(文件选择框可调整宽高)，设置该文件选择框 z-index 调高 比如 999。2/使用任意标签，调整为与上面选择框相同宽高，目的为使用该标签样式覆盖选择框，但是实际触发事件依然是在选择框上，因为z-index级别比该元素高。又因为大小相同，多以点击该标签任何位置都是在点击文件选择框。从而达到自定义文本选择框样式的目的。代码如下：style="p...
input type="file" 选取文件路径时出现fakepath问题IE浏览器解决办法
热门推荐
Wion Wan
04-06 1万+
今天写代码时需要用户选取一个文件然后提交，因为需要用到文件的绝对路径，所有我用一个 text文本框接住地址，于是我发现了问题 高版本的浏览器为了安全期间，会将路径的进行隐藏，并且加上fakepath取代其中的地址，这样就与我想要的结果不一样了，我查了很多资料，但是只解决了ie浏览器的问题。谷歌的Chrome内核的貌似是禁止 input file 获取绝对路径的。 那么IE浏览器怎么解决
input file在IE浏览器上的样式兼容问题
LegHair的博客
09-03 3327
开发需求上传文件给后台，而&amp;amp;lt;input type=&amp;quot;file&amp;quot;&amp;amp;gt;样式在不同浏览器上的兼容实在的英文惨不忍睹，特意写下此贴以便日后参考。 HTML如下： &amp;amp;lt;a class=&amp;quot;fileOne&amp;quot; href=&amp;quot;#&amp;quot;&amp;amp;gt; &am
file文件域的美化（未美化精简版），兼容IE，firefox火狐，chrome谷歌浏览器
kfcman的专栏
12-21 221
前面的测试说明用css直接控制文件域的样式表现是不好实现的，使用替代方法可以实现。 代码如下： css样式部分： 文件域美化 .input_text{width:250px;} .input_file{width:300px; margin-left:-300px; filter:alpha(opacity=0); opacity:0;} html部分： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值