`
Relucent
  • 浏览: 209260 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

HTML通过button触发input-file控件上传文件的问题

    博客分类：
  • JS
HTML浏览器JavaScriptF# 
阅读更多

出于安全方面的考虑，通过JS修改input-file的value是无法正确上传文件的。

只有当鼠标真正单击在上传控件的浏览按钮所添加的文件才可以上传。

使用按钮触发input-file需要通过模拟实现。

方法是：在button上方添加浮动的file控件，使用户点击button时，实际上点击file控件的按钮。

这个方法需要浏览器支持滤镜效果。

 

<html>
 <head>
  <title>添加附件</title>
 </head>
 <body class="body">
  <script type="text/javascript">
   function fclick(obj){
    obj.style.posTop=event.srcElement.offsetTop
     var x=event.x-obj.offsetWidth/2
     if(x<event.srcElement.offsetLeft)x=event.srcElement.offsetLeft
     if(x>event.srcElement.offsetLeft+event.srcElement.offsetWidth-obj.offsetWidth)x=event.srcElement.offsetLeft+event.srcElement.offsetWidth-obj.offsetWidth
     obj.style.posLeft=x
   }
  </script>
  <style>
   input{border:1px solid #333333;color:#666666;background:#eeeeee;font:normal 12px Tahoma;height:18px}
  </style>
  <form method="post" action="" enctype="multipart/form-data">
   <input id="f_file" type='text'>
   <input type="button" onmouseover="fclick(t_file)" value="选择上传文件">
   <input name="upload" type="file" style="position:absolute;filter:alpha(opacity=20);width:30px;" id="t_file" onchange="f_file.value=this.value" hidefocus>
   <!-- opacity是透明度  这里写20是为了方便浏览，使用时应设置为0 -->
   <input type="submit" value="提交">
  </form>
 </body>
</html>

 

分享到：
| 模拟线程Timer(JS)
评论
1 楼 harborgang 2009-05-04  
好像很有问题
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    美化File控件-图片按键上传文件

    【标题】"美化File控件-图片按键上传文件"涉及的知识点主要集中在前端网页的文件上传功能上，尤其是如何在用户界面中实现美观且实用的文件上传组件。在这个主题下，我们将探讨HTML5的File API、CSS样式美化、...

    使用HTML开发商业网站-表单控件-input课件.pptx

    10. **文件域 (file)**: `&lt;input type="file"&gt;` 允许用户从本地计算机选择文件上传。 示例: ```html &lt;input type="file" name="uploadFile"&gt; ``` 除了上述属性外，还有其他一些控制输入行为的属性，例如 `...

    上传控件input file 样式美化

    在网页设计中，上传控件`&lt;input type="file"&gt;`是必不可少的元素，它允许用户选择本地文件并上传到服务器。然而，由于浏览器的安全限制，这个控件的默认样式通常非常简陋，无法直接通过CSS进行大幅度的美化。本教程将...

    Android-解决在webview中input标签type="file"不能使用的问题

    然而，在实际使用中，我们可能会遇到一些问题，比如在WebView中使用`&lt;input type="file"&gt;`标签时，用户无法选择本地文件。这个现象主要是由于Android的安全机制和权限控制导致的。本文将详细讲解如何解决这个问题。 ...

    html修改FileUpload控件的浏览按钮的文字改为自定义

    - `&lt;input type="file" id="f" ...&gt;`：这是实际的文件输入控件，通过设置`style="position:absolute;filter:alpha(opacity=0);"`使其不可见。 2. **自定义按钮**： - `&lt;input type="button" ...&gt;`：这是一个...

    关于input的file 控件及美化

    为了使file控件不可见，同时让它能够正常工作，可以设置其透明度为0，这样file控件虽然在页面上不可见，但仍然可以触发文件选择对话框。 以下是用CSS进行样式的定义以及美化后的HTML结构： ```css .file-box { ...

    Ext上传文件控件

    在给定的"Ext上传文件控件"中，我们关注的是ExtJS如何处理文件上传的功能。ExtJS 提供了一个名为`Ext.form.FileField`（也称为`Ext.form.field.File`）的组件，允许用户在Web表单中选择和上传文件。这个控件通常与`...

    jquery+ajaxfileupload+html文件上传

    在文件上传中，我们需要一个`&lt;form&gt;`元素来收集用户选择的文件，通常包含一个`&lt;input type="file"&gt;`标签，用户可以通过这个控件选择要上传的文件。 ```html &lt;input type="file" id="fileInput" name="fileTo...

    SilverLight上传 文件

    - **创建上传控件**：在XAML中定义一个用户界面元素，如Button，作为触发文件上传的控件。 - **JavaScript交互**：使用`HtmlPage.RegisterScriptableObject`注册一个对象，以便在JavaScript和Silverlight之间进行...

    swfupload控件实现flash文件上传

    这个控件最初由Vinterwebb.se开发，旨在超越传统HTML `&lt;input type="file"&gt;` 标签的上传体验。SWFUpload支持多种浏览器，兼容jQuery、Prototype等JavaScript库，同时适用于Flash 9和10播放器。 主要特性： 1. **多...

    自定义的file标签

    在网页开发中，`&lt;input type="file"&gt;`标签是一个常用元素，用于让用户选择本地文件进行上传。然而，浏览器默认的文件选择控件样式通常较为简单，无法满足设计师们对界面美观度和交互体验的高要求。为了实现自定义的...

    input file上传文件样式支持html5的浏览器解决方案

    本文将深入探讨两个关键问题及其解决方案，这些问题分别是：在Firefox下无法通过CSS改变File上传控件的width，以及在不同浏览器中File上传控件的外观和行为不一致。 首先，让我们关注第一个问题：在Firefox下，File...

    某马机构----表单和表单控件.rar

    8. **文件上传**（`&lt;input type="file"&gt;`）：让用户选择本地文件进行上传。 9. **标签**（`&lt;label&gt;`）：与表单控件配合使用，提供更好的用户体验，用户可以通过点击标签触发对应控件。 此外，还有`&lt;textarea&gt;`用于...

    文件上传代码C#版ASP.NET

    - `&lt;input type="file"&gt;`：HTML中的文件输入控件，允许用户选择一个或多个文件进行上传。 - `enctype="multipart/form-data"`：设置表单的编码类型为`multipart/form-data`，这是必须的，因为它能够正确地传输文件...

    常用HTML表单控件

    六、文件上传输入（`&lt;input type="file"&gt;`） 文件上传控件让用户选择本地文件并将其上传到服务器。例如： ```html &lt;input type="file" name="uploadFile"&gt; ``` 可以结合JavaScript进行文件类型和大小的验证。 七、...

    ASP.Net中FileUpLoad控件内容清空

    当用户点击按钮触发事件时，可以利用JavaScript删除原有的`&lt;input type="file"&gt;`元素，并重新创建一个新的`&lt;input type="file"&gt;`元素来替代它，从而达到清空文件选择的效果。 示例代码如下： ```html &lt;input ...

    前端-HTML-Web Excel导入

    `&lt;input type="file"&gt;`标签用于创建文件选择控件，用户可以通过这个控件选择本地的Excel文件。 ```html &lt;form enctype="multipart/form-data"&gt; &lt;input type="file" id="excelFile" accept=".xls, .xlsx"&gt; ...

    单击按钮就添加的控件

    而“文件上传”则可能涉及到`&lt;input type="file"&gt;`，用户可以通过它选择本地文件进行上传，通常会与Ajax或FormData结合使用，以实现无刷新的文件上传。 在压缩包子文件的文件名称“添加控件Add.html”中，“Add”很...

    clear file value (清除文件框中的值)

    当用户点击这个按钮时，`inputFile.value`被设置为一个空字符串，这会让浏览器认为文件选择已经被取消，从而清除了文件输入框中的显示。注意，这种方法仅适用于现代浏览器，对于一些旧版本或非标准浏览器，可能需要...

    定义input type=file 样式的方法

    在这个结构中，`&lt;input type="text"&gt;`用于显示用户选择的文件名，`&lt;input type="button"&gt;`则作为点击触发文件选择对话框的按钮。`&lt;input type="file"&gt;`被定位在模拟的文本框和按钮之上，通过CSS设置`opacity: 0`或`...

Magicbox
Global site tag (gtag.js) - Google Analytics