-
<!-- input file accept 属性设置可上传文件的类型 multiple属性设置可多文件上传-->
-
<!-- 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" onchange="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>