file 的类型 input
上传你选择的文件和相关信息。
在 HTML 文档中 <input type="file"> 标签每出现一次,一个 FileUpload 对象就会被创建。
该元素包含一个文本输入字段,用来输入文件名,还有一个按钮,用来打开文件选择对话框以便图形化选择文件。
该元素的 value 属性保存了用户指定的文件的名称,但是当包含一个 file-upload 元素的表单被提交的时候,浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名。
<div class="form-group">
<label class="col-sm-2 control-label">上传图片</label> <div class="col-sm-10">
<div id="upimg" style="width: 300px; height: 200px; background-color: aquamarine; text-align: center; line-height: 200px;" onclick="UpLode()">
<span><i class="glyphicon glyphicon-open"></i>上传图片</span>
</div> </div>
</div>
在写一个隐藏的Input file上传按钮 加一个隐藏代码 display: none
<input id="FImg" onchange="GetFile()" type="file" style="display: none" />
点击框架会触发方法
function UpLode() {
//触发Fil的 点击事件
$("#FImg").trigger("click");
}
勾选图片后点击提交后会给下面隐藏的FImg追加一个onchange事件 onchange事件是将上传的图片显示到框架内
//图片上传后onchang触发的事件
function GetFile() { //2 取上传后图片的值
//event.target.files[0] 获取指定上传控件内的第一个文件
var a = event.target.files[];
//取文件的路径 注意 浏览器的保密协议
var url = window.URL.createObjectURL(a);
//上传图片后让图片显示到上传框
$("#upimg").css('background', 'url(' + url + ')0% 0% / cover')
}
注;trigger() 方法触发被选元素的指定事件类型。
成品演示为
然后点击卢瑟的框触发隐藏的 file 即可显示上传文件框
通常这个配合 上传图片后将图片显示到上传框上的方法使用
上传图片后将图片显示详细链接https://www.cnblogs.com/yutang-wangweisong/p/12076510.html
file 的类型 input的更多相关文章
- file类型input框设置上传相同文件,并都可以触发change事件。
在使用file类型input框是,删除了第一次上传到文件,再次上传相同文件,无法触发change事件,所以在删除的js上添加如下js代码: document.getElementById('fileU ...
- dpdk EAL: Error reading from file descriptor 23: Input/output error
执行test程序时输出: EAL: Error reading from file descriptor 23: Input/output error 原因: 在虚拟机添加的网卡,dpdk不支持导致的 ...
- LoadRunner中,File参数类型--文本参数显示问题
默认情况,File参数类型,参数数据量只能显示100(参数从0开始,99之后的不显示,但不影响正常取数据) 但是可以修改D:\Program Files (x86)\HP\LoadRunner\con ...
- h5自带的日期类型input
在很多页面和web应用中都有输入日期和时间的地方,最典型的是订飞机票,火车票,酒店,批萨等网站. 在HTML5之前,对于这样的页面需求,最常见的方案是用Javascript日期选择组件.这几乎是无可争 ...
- org.xml.sax.SAXParseException: 元素类型 "input" 必须由匹配的结束标记 "</input>" 终止。
错误记录 Spring Boot推荐使用thymeleaf作为视图,按照SpringBoot实战一书的案例写Demo. 发生错误: org.xml.sax.SAXParseException: 元素类 ...
- input file accept类型
Valid Accept Types: For CSV files (.csv), use: <input type="file" accept=".csv&quo ...
- vuetify | vue | 文件上传组件 | file | upload | form input[type="file"]
今天无聊地写vuecli3听歌的时候,遇到了上传文件到Django的自我需求,然后就到vuetify的表单组件里找upload btn,发现居然没有!!! 顿时惊了个呆,要知道之前用element做操 ...
- 不同类型input尺寸设置区别
最近发现为不用类型的input设置相同的尺寸,却得到了不一样的尺寸结果.发现不同类型的input的height和width竟然含义不同.在此小整理一下. (1)button类型 规律 button类型 ...
- 输入类型<input type="number"> / input标签的输入限制
输入限制 属性 描述 disabled 规定输入字段应该被禁用. max 规定输入字段的最大值. maxlength 规定输入字段的最大字符数. min 规定输入字段的最小值. pattern 规定通 ...
随机推荐
- DRF框架(三)——media资源路径设置、多表设计复习及补充、序列化组件(ModelSerializer)操作多表(序列化与反序列化)、多表序列化与反序列化整合(重点)
media资源路径设置 (设置好后把图片放在这个文件夹中,通过链接能访问到图片) 1.先在根目录设置一个media文件夹 2.配置settings.py,加上下面的 MEDIA_URL = '/me ...
- LInux基础(04)项目设计一(理解链表管理协议的代码架构)
要设计好一个项目必须要有一个健全的代码框架 一个结构体内有数据域和处理数据的函数指针, 先实现管理链表的函数 增加节点 删除节点 清空链表 遍历节点对每个节点进行操作 再实现协议的注册 把对象s ...
- Kafka重启出错:Corrupt index found
日志记录 FATAL Fatal error during KafkaServerStable startup. Prepare to shutdown (kafka.server.KafkaServ ...
- Charles配置https
1. 安装Charles ,破解将Charles.jar 覆盖安装路径的\lib 中的文件 2. 查看本机IP 3. 设置手机代理 4. 设置: 5. 手机安装证书 手机浏览器输入网址:chls.pr ...
- Flexbox布局入门笔记
1.display:flex 设定为Flexbox布局容器. 2.flex-direction: row表示在水平方向展开可伸缩项:column表示在垂直方向展开可伸缩项:总之就是定义主轴(侧轴方向) ...
- vim插件(vim-emmet)安装步骤
vim安装插件 vim-emmetvim-emmet网址 https://www.vim.org/scripts/script.php?script_id=2981pathogen.vim网址 ...
- springCloud学习6(Spring Cloud Sleuth 分布式跟踪)
springcloud 总集:https://www.tapme.top/blog/detail/2019-02-28-11-33 前言 在第四篇和第五篇中提到一个叫关联 id的东西,用这个东西来 ...
- Android为TV端助力之点击Textview无效
记录一下如果有两个Textview都有点击事件,那么不能给Textview同时设置 android:focusable="true"android:focusableInTouch ...
- linux ftp虚拟用户的创建
学习目标: 匿名用户的登录,添加用户的登录,虚拟用户的创建. 虚拟用户的创建: 1.安装:yum -y install vsftpd 服务端 yum -y install ftp ...
- [LeetCode] 78. 子集 ☆☆☆(回溯)
描述 给定一组不含重复元素的整数数组 nums,返回该数组所有可能的子集(幂集). 说明:解集不能包含重复的子集. 示例: 输入: nums = [1,2,3]输出:[ [3], [1], [2] ...