<
a
href
=
"
javascript:fclick();
"
>
浏览
</
a
>
<
p
>
</
p
>
<
input
type
=
"
file
"
>
//如果你想让用户选择多个文件，只需在 input 元素上使用 multiple 属性
<
script
>
document
.
querySelector
(
'input'
)
.
style
.
display
=
'none'
;
function
fclick
(
)
{
document
.
querySelector
(
'p'
)
.
innerHTML
=
"打开文件..."
;
document
.
querySelector
(
'input'
)
.
click
(
)
;
document
.
querySelector
(
'input'
)
.
onchange
=
function
(
)
{
files
=
this
.
files
[
0
]
;
if
(
files
)
{
console
.
log
(
"已选定文件"
,
files
.
name
)
}
else
{
console
.
log
(
'取消操作'
)
;
</
script
>
</
body
>
</
html
>
————————————————
版权声明：本文为CSDN博主「yxp_xa」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/yxp_xa/article/details/103696863
其他js操作input file文档资料：
https://developer.mozilla.org/zh-CN/docs/Web/API/File/Using_files_from_web_applications
做个记录代码详细请查看原文链接<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>input file</title></head><body> <a href="javascript:fclick();">浏览</a><p></p> <input ty
1.
input
表单会触发change事件
2.获取路径 触发这个事件的对象调用val()函数
3.
文件
名 触发事件后会有一个事件对象e.currentTarget.
file
s[0].name
4.
文件
大小 e.currentTarget.
file
s[0].size 字节
5.
文件
类型 e.currentTarget.
file
s[0].type
三、测试代码
<
input
type=
file
cl
同时实现
jQuery
-form.js附件上传功能
同时实现标准的
html
input
file
提交
同时实现easyui
File
Box与标准的ajax附件上传功能
有数据库，下载直接能运行
<title>test.
html
</title>
<meta http-equiv="content-type" content="text/
html
; charset=UTF-8">
[removed][removed]
[removed]
本文实例讲述了
jQuery
中:
input
选择
器用法。分享给大家供大家参考。具体分析如下：
此
选择
器匹配所有的
input
元素。例如：<
input
type=”text” />等等
语法结构:
代码如下:$(“:
input
”)
实例代码:
代码如下:
<!DOCTYPE
html
>
<meta charset=” utf-8″>
<meta name=”author” content=”//www.jb51.net/” />
<title>:
input
选择
器-软件开发网</title>
<script type=”text/javascript” src=”myte
var
file
Flag = false;
$("
input
[name='
file
Path']").each(function(){
if($(this).val()!="") {
file
Flag = true;
if(!
file
Flag) {
alert("请
选择
好
文件
!");
return;
<script src="https://cdn.bootcss.com/
jquery
/2.1.1/
jquery
.min.js"></script>
jquery
选择
后触发代码
//
jquery
<script>
$("#
file
1").change(function(e){
var
file
c = $("#
file
1").get(0).
file
s[0];
if(
file
c){
//
文件
已经
选择
好 下面可以写自己的上传代码了
<script type="text/javascript">
document.getElementById("f").onchange=function(){
this.value=""
</script>
在vue3中采用 ref 获取dom元素
<
input
type=
原本项目中使用elementUI，但是不太能满足需求；
选择
多个
文件
后，elementui upload的方法都会触发多次；比如使用auto-upload，network能看到发出了多个请求；或auto-upload="false"，自行定义上传方法，on-change事件也会触发多次，所以决定使用原生；
如果有大佬使用elementUI做到，可以分享下或者贴下链接~~~
由于安全性考虑，浏览器不允许通过JavaScript获取
input
type=
file
的
文件
内容。因此，你需要使用其他方法来获取该
文件
内容。
一种可行的方法是使用
HTML
5的
File
API。以下是一个使用
jQuery
和
File
API获取
文件
内容的示例：
HTML
代码：
<
input
type="
file
" id="
file
Input
">
<button id="btn">获取
文件
内容</button>
<div id="
file
Content"></div>
JavaScript代码：
$(function() {
$('#btn').click(function() {
var
file
= $('#
file
Input
')[0].
file
s[0];
if (
file
) {
var reader = new
File
Reader();
reader.onload = function(e) {
$('#
file
Content').text(e.target.result);
reader.readAsText(
file
);
} else {
$('#
file
Content').text('请
选择
文件
');
这段代码首先获取了
input
type=
file
元素的
文件
对象，然后使用
File
Reader对象读取该
文件
内容，并将其显示在页面上。请注意，由于安全性限制，该代码只能在本地运行，无法在某些环境中使用。
