上传你选择的文件和相关信息。
在 HTML 文档中 <input type="file"> 标签每出现一次,一个 FileUpload 对象就会被创建。
该元素包含一个文本输入字段,用来输入文件名,还有一个按钮,用来打开文件选择对话框以便图形化选择文件。
该元素的 value 属性保存了用户指定的文件的名称,但是当包含一个 file-upload 元素的表单被提交的时候,浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名。

就如大家所知到的可以选择文件的file类型按钮,点击按钮即可以选择文件,文件选择后旁边会显示文件名字,但是这样的原始样式比较难看,且有些时候不需要那个文件名称,所以,下面我们来详细分析一下怎样让原始样式变得更好看以及怎样获取文件信息,我们以选取图片为例。
先编写一个框架 (给框架加一个onclick="UpLode())

<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的更多相关文章

  1. file类型input框设置上传相同文件,并都可以触发change事件。

    在使用file类型input框是,删除了第一次上传到文件,再次上传相同文件,无法触发change事件,所以在删除的js上添加如下js代码: document.getElementById('fileU ...

  2. dpdk EAL: Error reading from file descriptor 23: Input/output error

    执行test程序时输出: EAL: Error reading from file descriptor 23: Input/output error 原因: 在虚拟机添加的网卡,dpdk不支持导致的 ...

  3. LoadRunner中,File参数类型--文本参数显示问题

    默认情况,File参数类型,参数数据量只能显示100(参数从0开始,99之后的不显示,但不影响正常取数据) 但是可以修改D:\Program Files (x86)\HP\LoadRunner\con ...

  4. h5自带的日期类型input

    在很多页面和web应用中都有输入日期和时间的地方,最典型的是订飞机票,火车票,酒店,批萨等网站. 在HTML5之前,对于这样的页面需求,最常见的方案是用Javascript日期选择组件.这几乎是无可争 ...

  5. org.xml.sax.SAXParseException: 元素类型 "input" 必须由匹配的结束标记 "</input>" 终止。

    错误记录 Spring Boot推荐使用thymeleaf作为视图,按照SpringBoot实战一书的案例写Demo. 发生错误: org.xml.sax.SAXParseException: 元素类 ...

  6. input file accept类型

    Valid Accept Types: For CSV files (.csv), use: <input type="file" accept=".csv&quo ...

  7. vuetify | vue | 文件上传组件 | file | upload | form input[type="file"]

    今天无聊地写vuecli3听歌的时候,遇到了上传文件到Django的自我需求,然后就到vuetify的表单组件里找upload btn,发现居然没有!!! 顿时惊了个呆,要知道之前用element做操 ...

  8. 不同类型input尺寸设置区别

    最近发现为不用类型的input设置相同的尺寸,却得到了不一样的尺寸结果.发现不同类型的input的height和width竟然含义不同.在此小整理一下. (1)button类型 规律 button类型 ...

  9. 输入类型<input type="number"> / input标签的输入限制

    输入限制 属性 描述 disabled 规定输入字段应该被禁用. max 规定输入字段的最大值. maxlength 规定输入字段的最大字符数. min 规定输入字段的最小值. pattern 规定通 ...

随机推荐

  1. DRF框架(三)——media资源路径设置、多表设计复习及补充、序列化组件(ModelSerializer)操作多表(序列化与反序列化)、多表序列化与反序列化整合(重点)

    media资源路径设置  (设置好后把图片放在这个文件夹中,通过链接能访问到图片) 1.先在根目录设置一个media文件夹 2.配置settings.py,加上下面的 MEDIA_URL = '/me ...

  2. LInux基础(04)项目设计一(理解链表管理协议的代码架构)

    要设计好一个项目必须要有一个健全的代码框架 一个结构体内有数据域和处理数据的函数指针, 先实现管理链表的函数 增加节点  删除节点  清空链表  遍历节点对每个节点进行操作 再实现协议的注册 把对象s ...

  3. Kafka重启出错:Corrupt index found

    日志记录 FATAL Fatal error during KafkaServerStable startup. Prepare to shutdown (kafka.server.KafkaServ ...

  4. Charles配置https

    1. 安装Charles ,破解将Charles.jar 覆盖安装路径的\lib 中的文件 2. 查看本机IP 3. 设置手机代理 4. 设置: 5. 手机安装证书 手机浏览器输入网址:chls.pr ...

  5. Flexbox布局入门笔记

    1.display:flex 设定为Flexbox布局容器. 2.flex-direction: row表示在水平方向展开可伸缩项:column表示在垂直方向展开可伸缩项:总之就是定义主轴(侧轴方向) ...

  6. vim插件(vim-emmet)安装步骤

    vim安装插件  vim-emmetvim-emmet网址  https://www.vim.org/scripts/script.php?script_id=2981pathogen.vim网址  ...

  7. springCloud学习6(Spring Cloud Sleuth 分布式跟踪)

    springcloud 总集:https://www.tapme.top/blog/detail/2019-02-28-11-33 前言   在第四篇和第五篇中提到一个叫关联 id的东西,用这个东西来 ...

  8. Android为TV端助力之点击Textview无效

    记录一下如果有两个Textview都有点击事件,那么不能给Textview同时设置 android:focusable="true"android:focusableInTouch ...

  9. linux ftp虚拟用户的创建

    学习目标: 匿名用户的登录,添加用户的登录,虚拟用户的创建. 虚拟用户的创建: 1.安装:yum -y install vsftpd    服务端 yum -y install ftp         ...

  10. [LeetCode] 78. 子集 ☆☆☆(回溯)

    描述 给定一组不含重复元素的整数数组 nums,返回该数组所有可能的子集(幂集). 说明:解集不能包含重复的子集. 示例: 输入: nums = [1,2,3]输出:[ [3],  [1],  [2] ...