获取input标签中file的内容

时间:2023-03-09 18:49:30
获取input标签中file的内容

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>