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

最新推荐文章于 2021-06-09 10:58:52 发布
最新推荐文章于 2021-06-09 10:58:52 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： JS 文章标签： HTML 浏览器 JavaScript F# ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/relucent/article/details/83292356
版权

出于安全方面的考虑，通过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" οnmοuseοver="fclick(t_file)" value="选择上传文件">
   <input name="upload" type="file" style="position:absolute;filter:alpha(opacity=20);width:30px;" id="t_file" οnchange="f_file.value=this.value" hidefocus>
   <!-- opacity是透明度  这里写20是为了方便浏览，使用时应设置为0 -->
   <input type="submit" value="提交">
  </form>
 </body>
</html>

 

relucent
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
点击按钮触发file标签并把文件名显示在文本框
weixin_44548147的博客
06-09 2434
（作者：ヤ青春ゞ滋味，撰写时间：2019年6月9日） 下面我们来讲一下，当我们点击浏览的按钮的时候，我们需要它触发file弹出文件选择框后，我们需要它选择了文件之后，把我选择中的文件名称，给回填到我的另一个input标签里。 下面是我的HTML代码： 这样我们已经把HTML代码给完成了。 那么下一步就是Jquery方法。我们需要分析一下思路，因为我们需要的是当我们点击按钮的时候才...
解决button无法触发input类型为file的方法
zhangyingji
05-14 7171
situation 默认input[type=file]太丑，做了个美化的button，对其添加click事件后发现只能选择文件，而点击提交按钮是无法真正上传文件的 task 进行伪装，当点击button时实际上点在input[type=file]上 action 通过CSS，使input[type=file] - 位于按钮上层 - 大小与button相同 - opacit...
input file 文件上传控件隐藏后用button触发它的click事件文件传不上去的解决方案...
weixin_34040079的博客
07-14 830
&lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt;upload&lt;/TITLE&gt; &lt;style&gt; &lt;!-- .addfileA{ position:relative; cursor:hand; text-decoration:none; background-image: url('C:\WI...
html 路径选择按钮,类型File的Input按钮功能研究
weixin_30222083的博客
06-03 434
类型File的Input按钮功能研究互联网 发布时间：2008-10-17 18:47:13 作者：佚名 我要评论在一些网站进行上传时，当单击了“浏览”按钮之后会弹出【选择文件】的对话框。很多时候我们需要只上传图像文件，那么在弹出的【选择文件】对话框中只显示了相关图片格式的文件，此外其余格式文件一律过滤不被显示。比如 http://www.youku.com/v1.0.0326/v/...
html页面点击按钮上传文件,点击按钮实现文件上传及控制文件上传类型
weixin_35775608的博客
06-09 4407
1.原生js实现文件上传html部分:上传文件js部分：upload(event) { //代替执行上传功能let it = event.target;$(it).next().click();},UploadFile() { //上传文件let msg = new FormData();msg.append('file', $('#uploadBillsInp')[0].files[0...
使用HTML开发商业网站-表单控件-input课件.pptx
07-10
10. **文件域 (file)**: `<input type="file">` 允许用户从本地计算机选择文件上传。 示例: ```html <input type="file" name="uploadFile"> ``` 除了上述属性外，还有其他一些控制输入行为的属性，例如 `...
Android-解决在webview中input标签type="file"不能使用的问题
08-13
然而，在实际使用中，我们可能会遇到一些问题，比如在WebView中使用`<input type="file">`标签时，用户无法选择本地文件。这个现象主要是由于Android的安全机制和权限控制导致的。本文将详细讲解如何解决这个问题。 ...
美化File控件-图片按键上传文件
04-21
【标题】"美化File控件-图片按键上传文件"涉及的知识点主要集中在前端网页的文件上传功能上，尤其是如何在用户界面中实现美观且实用的文件上传组件。在这个主题下，我们将探讨HTML5的File API、CSS样式美化、...
input file上传文件样式支持html5的浏览器解决方案
09-28
本文将深入探讨两个关键问题及其解决方案，这些问题分别是：在Firefox下无法通过CSS改变File上传控件的width，以及在不同浏览器中File上传控件的外观和行为不一致。 首先，让我们关注第一个问题：在Firefox下，File...
定义input type=file 样式的方法
12-14
在这个结构中，`<input type="text">`用于显示用户选择的文件名，`<input type="button">`则作为点击触发文件选择对话框的按钮。`<input type="file">`被定位在模拟的文本框和按钮之上，通过CSS设置`opacity: 0`或`...
点击图片触发input是file的事件
07-21
window.createObjectURL 上传图片，实现web预览
HTML5异步上传图片（支持预览和进度条），使用其他按钮触发file onclick事件，解决某些浏览器无法触发的问题
Clement-Xu的专栏
11-09 3974
很多情景下，都要求不要直接点击html的file标签，而是点击另外一个更加美观的图片，然后触发file标签的onclick事件打开系统的文件选择器。然而，某些低版本的浏览器为了安全，不支持onclick事件传递给file标签。百度搜索了半天，都是介绍把file标签透明化，然后覆盖再另外一个图片上面。可是这种非但比较复杂，还难以扩展和维护。 感谢万能的stackoverflow，终于在某个问题的某
改变input的type类型是file的button样式
C_hydar的博客
01-10 3259
&lt;input type="file" name=""&gt; &lt;input&gt;标签的type是file就会有上面选择文件的button，点击button可以选择本地文件进行上传。但是默认的button样式太一般了，就会有人想要改变样式。但是这个button的样式是不能修改的，这时候要改变样式只能加上一个外部标签。 /* CSS */ &lt;style type="te...
修改input file的样式（或用按钮button替代file）
热门推荐
仰望星空
11-09 2万+
问题：        我们在使用时，会发现它的样式不好修改，页面浏览字样也不可以修改，后面还会有出现”文件名“的属性，这样会严重影响页面效果。 解决方法：我们使用“button”按钮来替代"file"按钮: （1）书写HTML代码 （2）修改按钮的样式 .se2{ width:100
html file文本框,HTML元素 - input type=file控件上传文件的问题
weixin_39589693的博客
06-04 427
今同事问了个关于触发inputtype=file控件的问题，当时看似简单可是一下子又没搞定，百思不得其解，回来试了一下，终于找到问题，赶紧整理篇文章说道说道。其实很简单，哈哈！这个控件是创建文件上载用的，该控件带有一个文本框和一个浏览按钮。一般我们要涉及到这方面的开发的时候都会用到这个控件。简单实现：像如下代码片段，我们轻松实现了这个上传文件的页面制作enctype="multipart/form...
使用按钮代替input file
weixin_33709609的博客
02-19 643
2019独角兽企业重金招聘Python工程师标准>>> ...
如何点击组件的el-button按钮触发的是原生的input上传文件的方法
小柠檬爱编程
06-01 5908
有一个上传本地文件的功能，老大觉得原生的上传文件样式不好看，想让我使用组件的el-upload上传文件方法，可是原生input,type="file"代码已经写完了，我就灵机一动，可不可以使用组件的样式来触发原生input上传的方法，果然，一试可以，代码如下： <el-form-item label="附件：" class="floatLeft"> <el-button size="mini" type="prima.
html选择文件用按钮,ASP.NET中通过Button按钮来触发HTML文件上传控件（INPUT（File））选择文件上传...
weixin_39925031的博客
06-03 299
客户选择文件而不是直接点击文件上传控件来获取文件?不明白?紅色標記處必須的。選擇文件後直接提交，你可以擴展一下，用iframe來實現無刷新的。未命名頁面// function btn_onclick(){var keyID=Math.round(Math.random()*100000)+"FILE";var text=document.createElement("input");text.se...
Html学习-File控件学习
weixin_30508241的博客
03-20 83
情况一：不设置enctype HTML内容 <form action="02Upload.ashx" method="post"> <input type="file" name="txt" /> <input type="submit" value="上传"/> </form> 请求报文头（报文体的...
html input type file 选中文件后 如何获取文件完整路径 让springmvc框架控制端获取
最新发布
06-10
由于出于安全考虑，HTML input type file 控件并不允许获取完整路径，只能获取文件名。如果要将选中的文件上传到服务器，可以通过以下步骤实现： 1. 在 HTML 页面中添加一个 input type="file" 控件，用户可以通过该控件选择文件。 2. 使用 JavaScript 监听 input 控件的 onchange 事件，当用户选择文件后，触发该事件。 3. 使用 JavaScript 从 input 控件中获取文件对象，可以使用 FileReader API 对文件进行读取和处理。 4. 将文件对象通过 AJAX 请求发送到服务器端，由 Spring MVC 框架进行处理。 以下是一个基本的实现过程： HTML 页面： ```html <form id="upload-form" enctype="multipart/form-data"> <input type="file" id="file-input" name="file"/> <button type="submit">上传</button> </form> ``` JavaScript 代码： ```javascript var fileInput = document.getElementById('file-input'); fileInput.addEventListener('change', function() { var file = fileInput.files[0]; var reader = new FileReader(); reader.onload = function() { // 处理读取到的文件内容 }; reader.readAsText(file); // 以文本方式读取文件内容 }); var form = document.getElementById('upload-form'); form.addEventListener('submit', function(event) { event.preventDefault(); // 阻止表单默认提交行为 var file = fileInput.files[0]; var formData = new FormData(); formData.append('file', file); var xhr = new XMLHttpRequest(); xhr.open('POST', '/upload'); xhr.send(formData); // 发送文件数据到服务器 }); ``` 后端 Spring MVC 控制器： ```java @RequestMapping(value = "/upload", method = RequestMethod.POST) @ResponseBody public String handleFileUpload(@RequestParam("file") MultipartFile file) { // 处理上传的文件 return "File uploaded successfully"; } ``` 在上述代码中，前端使用 JavaScript 监听 input 控件的 onchange 事件，读取选中的文件，并通过 AJAX 请求发送到服务器端。后端 Spring MVC 控制器通过 @RequestParam 注解获取上传的文件，并进行处理。需要注意的是，由于上传文件是一个耗时的操作，建议在服务器端使用异步方式处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值