JS：input上传如何获取文件名并显示在另一个文本框中

最新推荐文章于 2022-12-30 14:55:15 发布
置顶 最新推荐文章于 2022-12-30 14:55:15 发布
阅读量2k 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42364204/article/details/80582749
版权
按上传pp文件就上传文件并在文件名字框内显示文件名字求代码案例                谢谢大神了急
zcm春明吖
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
expandable-input:用于在文本框聚焦时展开文本框的 jQuery 插件
07-13
【expandable-input】是一个基于jQuery的插件，其主要功能是在用户聚焦到文本框时自动扩展文本框的大小，提供更好的用户体验。这种交互设计常见于输入较多文本的场景，如评论、留言或搜索框，使得用户可以更方便地...
Egg.js 中 AJax 上传文件获取参数的方法
12-11
在Egg.js中，使用AJAX上传文件并获取参数的过程涉及到多个关键步骤和技术。首先，前端需要使用HTML和JavaScript来构建文件上传表单，并通过AJAX实现异步提交。然后，后端使用Node.js和Egg.js框架处理上传请求，解析...
一个简单的上传附件,并显示附件的方法.(JS的DOM操作取得input file的值.)
Jeremiah's Wikipedia
10-21 1501
     function addAttachment()        ...{            var strAttachPathArray;            var strFileName="";            var strAttachPath=""; //the path of the file...            var attach = "";      
JS中Input上传文件获取文件名并显示在另一文本框中
zuo_zuo_blog的博客
03-31 1982
功能： 1.上传多个文件 2.获取文件名 3.显示在右边文本框中 4.带有删除功能 在这里插入代码片 ```<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> ...
js获取input上传文件的文件名和扩展名的方法
caishijian2008的专栏
12-30 2353
文件名："+fileName+"");$("#div").append("扩展名"+fileExt+"
【Web】JS：input上传如何获取文件名并显示在另一个文本框中
热门推荐
小白兔的窝
01-10 1万+
问题描述： input上传如何获取文件名并显示在另一个文本框中？如何用JS写？ 类似优酷 搜狐上传视频，选择了文件上传后，会自动将文件名显示在标题文本框中。**<input type="file"。。。选择文件后。被选择文件名将自动显示在另一个 <input type="text" 。。。 先贴代码： html代码 <input type="file" i...
js获取input file的扩展名和文件名（支持IE8）
知行合一
12-11 9582
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;/he
jQuery input文本框点击下拉选择特效代码
03-20
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了JavaScript的DOM操作，事件处理，动画制作和Ajax交互。本篇文章将详细讲解如何利用jQuery实现一个点击input文本框后出现下拉选择的特效代码。 ...
css3 input文本框动画特效.zip
10-14
在CSS3中，文本框（input）的动画特效是一个引人注目的设计元素，它可以提升网页的用户体验并增加视觉吸引力。这个"css3 input文本框动画特效.zip"压缩包包含了实现此类效果的代码示例，适合于那些希望为自己的网站...
Simple-JS-Calculator:我的第一个Javascript项目只是一个简单的计算器
03-20
此外，"我的第一个Javascript项目" 也暗示了开发者可能在学习过程中创建了这个项目，以此来实践和理解JavaScript的基本概念。 **标签分析：** 虽然没有提供具体的标签，但我们可以推测这个项目可能涉及到以下...
js实现上传文件添加和删除文件选择框
11-29
本文这里给大家说个用javascript实现的很实用的功能，是在上传附件的时候，可以动态地添加和删除文件选择框，然后一次性上传。 从理论上看，实现起来比较容易，但实际工作的时候还是遇到两个难点，这些难点归结起来都是一个原因造成的，那就是浏览器的兼容性。在脚本中要用到两个函数：insertAdjacentHTML和removeChild，而恰好这两个函数在Firefox下都不能正常使用。几乎花费了一天的时候，在网上搜索着解决的方法，还好被找到了，也让我大松一口气。 具体两个函数是这样的： [removed] //删除文件选择框 functi
input file选择文件之后自动上传（样式自定义美化）
09-01
自动上传文件，样式美化，input file选择文件之后自动上传（样式自定义美化），$.ajaxFileUpload自动上传文件。不会包教会。你值得拥有！
JavaScript实现将文本框的值插入指定位置的方法
10-23
主要介绍了JavaScript实现将文本框的值插入指定位置的方法,涉及javascript节点添加操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
js自动获取input file的文件名称
小半的博客
12-28 7616
HTML代码： JS代码： function getfilename(){ var file = $("#fileid").val(); var pos=file.lastIndexOf("\\"); return file.substring(pos+1); 方法二：正则表达式 var strFileName=file.replace(/^.+?\\([
js获取input[type=file]上传文件名称
weixin_34364071的博客
08-19 682
2019独角兽企业重金招聘Python工程师标准>>> ...
获取input上传文件名
Rey
09-29 6033
function changeName(e){ var span = document.getElementById('span'); span.innerHTML = e.currentTarget.files[0].name; } e.currentTarget.files[0] 是一个对象 文件名 name 类型 type 大小（字节）size 上次修改时间 lastMod
input上传一个文件如何获取文件名并显示在另一个text文本框中?
Anhk丶
04-26 1698
input上传一个文件如何获取文件名并显示在另一个text文本框中 <html> <body> <input type="file" id="f" onchange="show()"/> <input type="txt" id="des"/> //调用方法 <script type="text/javascript">...
jsp关于input file 因为文件名太长显示省略号不能换行的解决办法
hlvy
06-13 2365
解决代码:  提示可以利用div来覆盖file显示的字体&lt;div style="position: absolute;left:87px; width: 300px;background-color:white; display: block;" id="txtvalue"&gt;&lt;/div&gt; &lt;input type="file" id="f ncg_PM_file&quo
数据分析的核心技能和方法
最新发布
07-19
数据分析的核心技能和方法
vue在弹窗中选择商品后在另一个文本框显示供应商并锁定文本框
05-12
你可以在弹窗中的商品选择事件中获取供应商信息，然后将供应商信息填充到另一个文本框中，并设置该文本框为只读或禁用状态，从而达到锁定的效果。具体可以按照如下示例代码实现： ```html <template> <div> <button @click="showDialog">选择商品</button> <input type="text" v-model="selectedProduct" readonly> <input type="text" v-model="selectedSupplier" readonly disabled> <dialog :open="dialogVisible"> <select v-model="selectedProductId" @change="onProductSelect"> <option value="">请选择商品</option> <option v-for="product in products" :value="product.id">{{ product.name }}</option> </select> <button @click="closeDialog">确定</button> </dialog> </div> </template> <script> export default { data() { return { dialogVisible: false, products: [ { id: 1, name: '商品A', supplier: '供应商A' }, { id: 2, name: '商品B', supplier: '供应商B' }, { id: 3, name: '商品C', supplier: '供应商A' }, ], selectedProductId: '', selectedProduct: '', selectedSupplier: '', }; }, methods: { showDialog() { this.dialogVisible = true; }, closeDialog() { this.dialogVisible = false; }, onProductSelect() { const selectedProduct = this.products.find(p => p.id === Number(this.selectedProductId)); if (selectedProduct) { this.selectedProduct = selectedProduct.name; this.selectedSupplier = selectedProduct.supplier; } else { this.selectedProduct = ''; this.selectedSupplier = ''; } }, }, }; </script> ``` 在上述代码中，我们首先在模板中添加了一个按钮，点击后会显示一个弹窗，用于选择商品。在弹窗中，我们使用了一个下拉框来显示可选的商品列表，当用户选择了一个商品时，会触发 `onProductSelect` 方法，该方法会从选中的商品中获取供应商信息，并更新到另一个文本框中。同时，为了达到锁定的效果，我们将该文本框设置为只读和禁用状态，从而防止用户手动修改其内容。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值