获取input标签中file的内容

简介: 1、直接获取文件中的内容: 获取内容 $("#button").click(function () { console.log(document.getElementById("input").

1、直接获取文件中的内容:

复制代码
<form id="form" method="post" enctype="multipart/form-data">
    <input type="file" id="input">
</form>
<button id="button">获取内容</button>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    $("#button").click(function () {
        console.log(document.getElementById("input").files[0]);
    });
</script>
复制代码

2、动态添加input,并分别获得每个input中的file内容(此处不能用id获取内容)

复制代码
<div id="div"></div>
<button id="button">添加</button>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    $("#button").click(function () {
        var $add = $('<div id="div2" style="border: 1px solid red;">' +
                '<input class="input" type="file">' +
                '<button class="upload">upload</button>' +
                '</div>');
        $("#div").append($add);
        $add.find('.upload').click(function () {
            console.log($add.find('.input')[0].files[0]);
        });
    });
</script>
复制代码
如何联系我:【万里虎】www.bravetiger.cn 【QQ】3396726884 (咨询问题100元起,帮助解决问题500元起) 【博客】http://www.cnblogs.com/kenshinobiy/
目录
相关文章
uniapp的touchstart与click
uniapp的touchstart与click
644 0
|
Web App开发 安全
navigator.mediaDevices是undefined怎么办
navigator.mediaDevices是undefined怎么办
2141 1
|
开发工具 git druid
解决Git中fatal: refusing to merge unrelated histories
Git的报错 在使用Git的过程中有时会出现一些问题,那么在解决了每个问题的时候,都需要去总结记录下来,下次不再犯。 一、fatal: refusing to merge unrelated histories 今天在使用Git创建项目的时候,在两个分支合并的时候,出现了下面的这个错误。
109472 6
|
12月前
|
JSON 数据格式
Blob格式转json格式,拿到后端返回的json数据
文章介绍了如何将后端返回的Blob格式数据转换为JSON格式,并处理文件下载和错误提示。
866 0
Blob格式转json格式,拿到后端返回的json数据
|
11月前
|
存储 前端开发 UED
uni-app:icon&修改tabber&unu-ui (四)
本文介绍了如何从阿里巴巴下载矢量图标并使用 `iconfont`,包括创建项目、下载文件、引入 `font.css` 到项目中以及在 `app.vue` 中引用的方法。同时,还详细说明了如何修改 `tabbar` 的样式和配置,以及如何在项目中导入和使用 `uni-ui` 组件库,包括简单的弹出框 `popup` 和带有头部或尾部图标的输入框 `input`。
515 0
|
前端开发 JavaScript
使用CSS中的cursor属性值,常用的可设置参数,以及其他16中参数值的使用场景和示例代码
使用CSS中的cursor属性值,常用的可设置参数,以及其他16中参数值的使用场景和示例代码
401 0
|
缓存 JavaScript API
vue3 生命周期(生命周期钩子 vs 生命周期选项 vs 缓存实例的生命周期)
vue3 生命周期(生命周期钩子 vs 生命周期选项 vs 缓存实例的生命周期)
324 0
|
数据采集 机器学习/深度学习 数据可视化
R实战| PCA、tSNE、UMAP三种降维方法在R中的实现
R实战| PCA、tSNE、UMAP三种降维方法在R中的实现
638 0
|
监控 数据可视化 Java
如何在Java中优化垃圾回收(GC)性能
如何在Java中优化垃圾回收(GC)性能
|
Unix Shell Docker
部署Fabric遇到问题和解决方法总结
Fabric遇到问题和解决方法总结
546 1
部署Fabric遇到问题和解决方法总结