jquery 上传文件并获取文件名称
程序员文章站
2022-05-24 11:07:49
...
总结:通过 [type = ‘files’ ] 的 附加属性files 获取文件信息
点击普通按钮触发文件上传按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件上传-自定义</title>
<style>
.container{
width: 100px;
height: 100px;
margin: 50px;
border: 1px solid #cccccc;
position: relative;
}
.dsn{
display: none;
}
</style>
</head>
<body>
<div class="container">
<input type="file" class="dsn">
<div class="upload_box">
<input type="button" value="点击上传" id="upload">
</div>
</div>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<script>
$(document).ready(function () {
$('#upload').on('click',function(){
$("input[type='file']").trigger('click')
})
})
</script>
</body>
</html>
文件上传-获取文件名称
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件上传-获取文件名称</title>
<style>
.container{
width: 500px;
height: 300px;
margin: 50px;
border: 1px solid #cccccc;
position: relative;
}
.dsn{
display: none;
}
</style>
</head>
<body>
<div class="container">
<input type="file" class="dsn" id="choosefile" multiple>
<div>
<input type="button" value="上传文件" id="upload">
<p class="file_name"></p>
</div>
</div>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<script>
$(document).ready(function () {
$('#upload').on('click',function(){
$("input[type='file']").trigger('click')
// 获取多个文件的名称
var obj = document.getElementById('choosefile');
var length = document.getElementById('choosefile').files[0].length;
var fileList = [];
for (var i=0;i<obj.files.length;i++){
var temp = obj.files[i].name
fileList.push(temp);
}
var str = fileList.join(',')
$('.file_name').html(str)
// 获取单个文件的名称
document.getElementById('choosefile').files[0].name
})
})
</script>
</body>
</html>
参考:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file
参考:https://blog.csdn.net/u010662647/article/details/79550307