input（file）点击选择图片后，图片附件名称在另一个input（text）出现的实现

最新推荐文章于 2022-09-19 15:46:04 发布

椰角科技

最新推荐文章于 2022-09-19 15:46:04 发布

阅读量965

点赞数

分类专栏： html 文章标签： input 图片附件

本文链接：https://blog.csdn.net/yeyinshi/article/details/50409398

版权

html 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

input（file）点击选择图片后，图片附件名称在另一个input（text）出现的实现

代码：

<input type='text' name='pic' id='textfield' class="inp_w250" value="<{$v.designer_pic}>"/>

<input name="designer_pic" id="image" type="file" value="浏览" οnchange="document.getElementById('textfield').value=this.value" />

分析：两个input的关联熟悉是textfield，也就是第一个input的id

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

椰角科技

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

记——django的admin管理页面添加jquery代码实现自动读取上传图片的名称并填写到input输入框中

Shiliang1995

06-18

327

一、需求上传图片的时候，将图片的名称自动读取出来写入到name字段对应的input输入框中

bootStrap file input 工具实现图片上传/删除/预览/保存等功能

weixin_44774570的博客

08-06

2772

参考资料： BootStrap官方文档（哎，根本看不懂）：http://plugins.krajee.com/file-input CSDN：https://blog.csdn.net/github_36086968/article/details/72830855 ........ 完成功能：第一页图片添加页：图片添加，预览，压缩（图片1-1）第二页图片编辑页：将添加页图片显...

参与评论您还未登录，请先登录后发表或查看评论

在另一个文本框显示input file选择的文件名字

weixin_30697239的博客

09-09

434

javascript 获取文件域 (type=file) 的完整路径一直是很麻烦的问题，问题主要出在一些浏览器基于安全性考虑而不能正常获取到文件域中选中图片的决对路径，尤其一些基于webkit的浏览器比如 Chrome, Safire等浏览器，下面是一个可以兼容 IE 6 , 7, 8 和 firefox 的获取 input file 完整路径的方法，该方法不支持 Chrome 和 Safire，...

input上传图片之获取图片名字

大海无量的博客

05-08

4898

1.： <input id="img_file" type="file" onchange="preview(this)" placeholder="选择图片" />2.获取名字： var str=$("#img_file").val(); var arr=str.split('\\');//注split可以用字符或字符串分割 var my=ar

获取input上传文件名

Rey

09-29

6061

function changeName(e){ var span = document.getElementById('span'); span.innerHTML = e.currentTarget.files[0].name; } e.currentTarget.files[0] 是一个对象文件名 name 类型 type 大小（字节）size 上次修改时间 lastMod

input框选择多个照片并且回显

qq_41898220的博客

07-06

867

function (typeArr, isImg) { if (!typeArr) { typeArr = ['jpg', 'jpeg', 'png']; }; if (isImg == null) { isImg = true } $("input[type='file']").on('change', function (

HTML input file控件限制上传文件类型_动力节点Java学院整理

09-28

HTML中的`<input type="file">`控件用于在网页上实现文件上传功能。默认情况下，用户可以选择任何类型的文件进行上传。然而，为了提高用户体验和安全性，常常需要限制用户只能选择特定类型的文件，例如Word文档、...

H5标签input标签上传文件（图片）

ass_ace

08-12

3925

简单版的图片附件上传实现如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>H5-input标签上传文件</title> <script type="text/javascript" src="jquery.min.js"></script> </head&gt

原生js文件上传，input如何实现文件（图片）上传与预览

zzqz的博客

05-31

9845

效果说明首先文件上传得需要后台支持，我这里用的node写的后端服务，篇幅有限，这里就不贴后端代码了，有需要的留言联系 dom部分由于form表单自动关联input文件上传按钮，故点击上传文件按钮时会自动往 action 路径提交文件 <h3>文件上传：</h3> 选择一个文件上传: <br /> <form action=...

Flask实现图片的上传、下载及展示示例代码

09-20

在Flask中，我们可以创建一个HTML表单来让用户选择图片并提交。以下是一个简单的HTML代码示例，用于实现这个功能： ```html <!DOCTYPE html> <title>Title <input type="file" size="30" name="photo"/...

MultipartFormDataInput 获取图片名称

Rok728的博客

09-19

928

MultipartFormDataInput 获取图片名称

点击上传图片并显示文件名和图片及获取input file的值和路径

robin_sky的博客

06-28

3万+

原本的input type='file' 样式真的很丑，毫无美感而言，一直想写一个点击图片就显示的界面，现在终于研究出来了。原本的input type='file'样式：改变后的样式：样式代码： <style type="text/css"> .img{opacity:0;} .imgs{border:1px solid #78C3F3;backg...

获取input上传文件文件名及扩展名

热门推荐

xuexizhe88的博客

08-09

4万+

1、使用input标签的type=“file”，上传文件，获取上传文件的文件名和扩展名；代码如下： #mybtn{ width: 100px; height: 30px; font-size: 18px; background-color: lightcoral; text-align: center; }

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

小白兔的窝

01-10

1万+

问题描述： input上传如何获取文件名并显示在另一个文本框中？如何用JS写？类似优酷搜狐上传视频，选择了文件上传后，会自动将文件名显示在标题文本框中。**<input type="file"。。。选择文件后。被选择文件名将自动显示在另一个 <input type="text" 。。。先贴代码： html代码 <input type="file" i...

input文件框选择本地图片后页面预览图片并获取图片长宽以及大小图片上传前预览

Tonv 的专栏

03-26

1万+

前面有转过一篇通过HTML5来实现图片上传前预览，现在借助FileReader也实现了这个需求。并且同时还可以获得图片的长宽相素以及图片文件的大小。demo如下： $(function(){ $("#pstimg").change(function(){ var file = this.files[0]; alert("文件大小:"+(file.size / 10

jquery如何获取input(file)控件上传的图片名称，即"11111.jpg"

weixin_30924239的博客

04-15

1624

html代码：<input name=file" type="file" id="file"/> Jquery代码：var file;$('#file').change(function(){ file=$(this).val(); }) var arr = file.split('\\');//注split可以用字符或字符串分割 var fileName = arr[arr...

在输入框左边加一个小图标，css样式应该怎么写？

戈多

09-23

2万+

无标题文档 .text{border:solid 2px #ccc;width:400px;height:40px;background:url(http://d.lanrentuku.com/down/png/1211/blueberry/user_friend.png) no-repeat 0 center;} .text input{float:left;border:none;backg

input的选择框由图片代替点击是否选中(仅仅三行)

CheckMate_Room的博客

02-01

1022

全选

【技巧】input选择图片预览

zuncle的博客

03-15

5556

预览效果见下图：HTML代码如下：<html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta charset="utf-8" /> </head> <body> <div class="content" style="margin-top:100px;height:200px;"> <

编写上传页面：编写一个帖子上传页面，用户可以在该页面输入帖子标题和内容等信息，并且可以选择上传图片或附件等附加内容。