1.只能在ie里用，firefox不行
[size=small]怎么样让button代替input file文件上传，下面一种方法不行（只能在ie里用，firefox不行）
<input id="upimg" name="product[photo]" type="file" style="display:none;" />
<input type="button" value="上传新图片" onclick="upimg.click()" class="bot_2words" align="absmiddle" />
2.兼容所有浏览器，button和text代替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=gb2312" />
<title>input file的另类做法</title>
<style type="text/css">
<!--
* { font-size:12px}
body { margin:0}
.line { position:relative; float:left; padding:8px 0}
.line span { float:left}
input { border:1px solid #888; vertical-align:middle}
.file { position:absolute; left:90px; top:8px; display:none;filter:alpha(opacity=0);opacity:0}
.file1 { padding:2px 10px; display:block; float:left; background:#FF66CC; color:#fff; z-index:1; margin-left:5px; vertical-align:middle; cursor: pointer}
.inputstyle { width:150px; border:1px solid #888; z-index:99}
-->
</style>
</head>
<body>
<div class="line"> <span>
<label>上传文件：</label>
<input name="" type="text" id="viewfile" onmouseout="document.getElementById('upload').style.display='none';" class="inputstyle" />
</span>
<input type='button' for="unload" onmouseover="document.getElementById('upload').style.display='block';" class="file1" value="上传图片" />
<input type="file" onchange="document.getElementById('viewfile').value=this.value;this.style.display='none';" class="file" id="upload" />
</div>
</body>
</html>
分享到：
相关推荐
这个方法可以用来预览图片，因为它可以将图片文件转换为一个可以在浏览器中访问的 URL。 知识点2：图片上传和预览 在上面的代码中，我们可以看到一个点击图片触发 input 是 file 的事件。在点击图片时，会触发 ...
在网页设计中，我们经常需要使用到`<input type="file">`标签来实现文件上传功能，但默认的上传控件样式通常较为简单，不符合现代网页的美观需求。本篇将探讨如何自定义`input file`的样式，打造个性化的上传界面。 ...
本主题聚焦于利用jQuery来改进文件上传功能，尤其是针对`<input type="file">`元素的样式和交互。在传统的HTML文件上传输入框中，用户通常会看到一个简单的文本按钮，点击后弹出文件选择对话框。然而，这样的设计...
在网页设计中，上传控件`<input type="file">`是必不可少的元素，它允许用户选择本地文件并上传到服务器。然而，由于浏览器的安全限制，这个控件的默认样式通常非常简陋，无法直接通过CSS进行大幅度的美化。本教程将...
### 如何使 input type=file 只读并实现文件上传 在网页开发中，有时我们需要让用户选择一个文件但不允许他们更改已选择的文件。这通常是为了防止用户在提交表单前临时更改文件，从而确保文件的一致性和安全性。...
在前端开发中，`<input type="file">`组件通常用于让用户选择本地文件并上传到服务器。不过，默认情况下，此组件的样式较为简单，不符合很多项目的视觉需求。为了提升用户体验，开发者经常需要自定义文件输入组件的...
本文将详细介绍如何使用`ajaxfileupload.js`这个jQuery插件，结合`input[type=file]`元素，实现无刷新的文件上传功能。 首先，`ajaxfileupload.js`是一个基于jQuery的轻量级插件，它允许开发者通过异步方式发送文件...
"图片代替文件浏览按钮样式"就是一个这样的实践，它通过CSS样式和图像资源来定制HTML中的`<input type="file">`元素，使其看起来更加友好且具有设计感。这个项目特别强调了兼容性，确保在IE、Firefox、Chrome等主流...
默认情况下，当我们在HTML中使用`<input type="file">`来创建一个文件选择器时，浏览器通常会显示一个默认样式的“浏览”按钮，用于打开文件选择对话框。然而，对于追求美观和统一界面风格的开发者来说，这样的默认...
表单通常包含一个`<input>`元素，其`type`属性设置为`file`，以便用户能够选择本地文件： ```html <input type="file" id="fileInput" /> <button type="button" id="uploadButton">上传</button> ``` 接下来...
根据给定文件内容，下面介绍有关于jQuery实现input[type=file]多图预览上传删除功能的知识点。 ### jQuery实现多图上传预览与删除功能 #### 1. 前端界面结构 在实现多图上传预览与删除功能时，首先需要布局一个...
在HTML中，文件上传功能通常使用`<input type="file">`元素来实现。这个元素在不同的浏览器下，默认样式会有差异，通常是简单的文本输入框样式，可能与网站的整体设计风格不匹配。为了满足用户界面的需求和提升用户...
【标题】"美化File控件-图片按键上传文件"涉及的知识点主要集中在前端网页的文件上传功能上，尤其是如何在用户界面中实现美观且实用的文件上传组件。在这个主题下，我们将探讨HTML5的File API、CSS样式美化、...
`input`元素的`type`属性应设置为`file`，并且可以添加`accept`属性来指定允许的文件类型，例如只允许上传.jpg和.png图片： ```html <input type="file" id="imageInput" accept=".jpg, .png" /> 预览图片" ...
在前端开发中，"ajax提交file文件"是一个常见的需求，特别是在现代Web应用中，用户可能需要上传图片、文档等文件而无需刷新整个页面。Ajax（Asynchronous JavaScript and XML）技术使得这种异步通信成为可能，它允许...
ASP JavaScript 文件上传是一种常见的Web开发技术，用于在用户端（客户端）通过网页向服务器端（服务端）提交文件。在ASP（Active Server Pages）环境中，JavaScript通常被用来处理客户端的交互，提供动态的用户界面...
<input type="file" id="fileInput" class="filestyle" data-input="false" data-buttonText="选择文件" /> ``` 在这里，`data-input="false"`表示隐藏默认的文件选择输入框，只显示按钮，而`data-buttonText`则用于...
lastModifiedDate: inputFile.lastModifiedDate.toLocaleString() }); const reader = new FileReader(); reader.readAsDataURL(inputFile); reader.onload = function(e) { that.imgSrc = this.result; } ...
总结来说，HTML5文件上传输入框样式代码的实现涉及到HTML的`<input type="file">`标签、CSS的样式设计以及JavaScript的事件监听和文件操作。通过这些技术，我们可以创建出符合网站整体风格、功能强大的文件上传组件...
当用户选择文件后，使用JavaScript监听File上传控件的“change”事件，将选中的文件路径显示在模拟的输入框中，从而保持一致的用户体验。 具体实现代码如下： ```html <div id="file"> <input type="text" value=...