获取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/
目录
相关文章
|
前端开发 Java 程序员
el-upload上传组件accept属性限制文件类型(案例详解)
案例分享el-upload上传组件accept属性!欢迎留言沟通交流!
3277 0
el-upload上传组件accept属性限制文件类型(案例详解)
|
3月前
input file 设置文件选择类型
input file 设置文件选择类型
|
5月前
|
前端开发
input file上传文件改变默认样式
input file上传文件改变默认样式
48 0
|
5月前
HTML <input> 标签的 autocomplete 属性
HTML <input> 标签的 autocomplete 属性
30 0
|
7月前
input type=file过滤图片
input type=file过滤图片
28 0
|
9月前
|
前端开发
ajax 通过move_uploaded_file函数上传图片获取$_FILES['file']对象的属性内容
ajax 通过move_uploaded_file函数上传图片获取$_FILES['file']对象的属性内容
38 0
|
10月前
|
JavaScript 前端开发 Python
brython | 获取input等标签的内容
brython | 获取input等标签的内容
93 0
|
前端开发 JavaScript
自定义按钮样式选择文件button“实现”file功能
前端渣渣在用到文件上传的时候,html的input file的选择文件样式太丑,更改也很不如意,很想用自定义按钮实现替代,特作笔记
460 0
自定义按钮样式选择文件button“实现”file功能
HTML5+CSS3 为 input 添加一键删除按钮
版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82620115 ...
2347 0

热门文章

最新文章