input file实现多选和限制文件上传类型

最新推荐文章于 2025-09-23 22:24:18 发布

转载最新推荐文章于 2025-09-23 22:24:18 发布 · 1.8w 阅读

博客介绍了在input标签中加入multiple属性，可在一个输入框选择多个文件上传。同时给出了示例代码，包含JavaScript函数用于处理所选文件，还展示了一个表单，用户可尝试选取多个文件进行上传。


<!-- accept 并未真正的实现限制上传文件类型，只是在选文件的时候有限制，
如果选文件的时候手动修改上传文件的类型，还是可以上传其他文件的。
因此，要实现只上传accept属性指定的文件类型，还必修结合js来实现-->
<input type="file" accept=".doc,.docx" multiple>

//取出上传文件格式的后缀名
var fileAccept = $("#id").val().split(".")[1];//获取上传文件的后缀
if( fileAccept!="doc" && fileAccept!="docx" ){
alert("只能上传.doc和.docx的文件！");
}

//获取多文件上传的所有文件名
var filePaths = $("#id")[0].files;//或者这样写 document.getElementById("id").files;
for( var i=0;i<filePaths.length; i++ ){
filePaths[i].name;
}

1.在input标签中加入 multiple 属性，可以在一个输入框中选择多个文件进行上传

<input type="file" name="img" multiple="multiple" />
当然，这样也是一样的：

<input type="file" name="img" multiple />

2.很多时候上传的时候，我们要限制一下上传文件类型（

在windows中主要是限制后缀名

），或者是把选择的文件名（路径）输出到当前页面，，
这需要用js取得选择文件的名字：

　　document.getElementById("input").files[i].name

最后注意：Internet Explorer 9及更早 IE 版本不支持 input 标签的 multiple 属性。
附一段Demo：

<!DOCTYPE HTML>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<body>
<script type="text/javascript">
function onc(){
var files = document.getElementById("input").files;
for(var i=0; i< files.length; i++){
alert(input.files[i].name);
}
}
</script>
<form action="/example/html5/demo_form.asp" method="get">
选择图片：<input type="file" id="input" name="input" οnchange="onc()" multiple="multiple" />
<input type="submit" />
</form>
<p>请尝试在浏览文件时选取一个以上的文件。</p>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <title>测试文件上传</title>
      <script type="text/javascript" src="js/jquery%20v3.3.1.js"></script>
      <script type="text/javascript">
            //③创建fileLoad方法用来上传文件
            function fileLoad(ele){
                  //④创建一个formData对象
                var formData = new formData();
                //⑤获取传入元素的val
                var name = $(ele).val();
                  //⑥获取files
                var files = $(ele)[0].files[0];
                //⑦将name 和 files 添加到formData中，键值对形式
                formData.append("file", files);
                formData.append("name", name);
                $.ajax({
                    url: "test.php",
                    type: 'POST',
                    data: formData,
                    processData: false,// ⑧告诉jQuery不要去处理发送的数据
                    contentType: false, // ⑨告诉jQuery不要去设置Content-Type请求头
                    beforeSend: function () {
                       //⑩发送之前的动作
                        alert("我还没开始发送呢");
                    },
                    success: function (responseStr) {
                       //11成功后的动作
                        alert("成功啦");
                    }
                    ,
                    error : function (responseStr) {
                        //12出错后的动作
                        alert("出错啦");
                    }
                });
            }
            $(function () {
                var $input =  $("#upLoad");
                // ①为input设定change事件
                $input.change(function () {
                //    ②如果value不为空，调用文件加载方法
                    if($(this).val() != ""){
                        fileLoad(this);
                    }
                })
            })
      </script>
</head>
<body>
      <form action="">
            <input type="file" id="upLoad">
      </form>
</body>

</html>