input标签file类型，选择多个文件进行上传

最新推荐文章于 2023-09-22 16:47:53 发布
最新推荐文章于 2023-09-22 16:47:53 发布
阅读量607 收藏 2
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tianjingang1/article/details/52948544
版权

第一步:html页面

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8"/>  
  5.         <title>xhr2</title>  
  6.     </head>  
  7.     <body>      
  8.         <div style="text-align:center;margin:100px">        
  9.             <input type="file" id="file" name="file" multiple="multiple"><progress id="uploadprogress" min="0" max="100" value="0">0</progress>  
  10.             <button onclick="xhr2()">多文件上传</button>  
  11.         </div>          
  12.         <script>  
  13.         function xhr2(){  
  14.             var xhr = new XMLHttpRequest();//第一步  
  15.             //定义表单变量  
  16.             var file = document.getElementById('file').files;  
  17.             //console.log(file.length);  
  18.             //新建一个FormData对象  
  19.             var formData = new FormData(); //++++++++++  
  20.             //追加文件数据  
  21.             for(i=0;i<file.length;i++){    
  22.                  formData.append("file["+i+"]", file[i]); //++++++++++  
  23.             }   
  24.             //formData.append("file", file[0]); //++++++++++  
  25.               
  26.             //post方式  
  27.             xhr.open('POST', 'xhr2.php'); //第二步骤  
  28.                         xhr.upload.onprogress = function (event) {  
  29.             　　if (event.lengthComputable) {  
  30.             　　　　var complete = (event.loaded / event.total * 100 | 0);  
  31.         　　　　　　     var progress = document.getElementById('uploadprogress');  
  32.             　　　　progress.value = progress.innerHTML = complete;  
  33.             　　}  
  34.             };  
  35.             //发送请求  
  36.             xhr.send(formData);  //第三步骤  
  37.             //ajax返回  
  38.             xhr.onreadystatechange = function(){ //第四步  
  39.         　　　　if ( xhr.readyState == 4 && xhr.status == 200 ) {  
  40.         　　　　　　console.log( xhr.responseText );  
  41.         　　　　}  
  42.         　　};  
  43.             //设置超时时间  
  44.             xhr.timeout = 100000;  
  45.             xhr.ontimeout = function(event){  
  46.         　　　　alert('请求超时！');  
  47.         　　}   
  48.         }  
  49.         </script>  
  50.     </body>  
  51. </html> 
第二步:php页面

  1. <?php  
  2. print_r($_FILES["file"]);  
  3.   
  4. for($i=0;$i<count($_FILES["file"]['name']);$i++){  
  5. $name=$_FILES["file"]["name"][$i];  
  6. move_uploaded_file($_FILES["file"]["tmp_name"][$i],iconv("UTF-8","gb2312",$name));  
  7. }  
  8.   
  9. ?> 

tjg888888
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js input file多个文件上传功能.zip
07-04
js input file多个文件上传功能是一款可input上传图片和input file多个文件上传功能特效代码
判断多个input type=file是否有已经选择好文件的代码
12-10
在网页表单设计中，`<input type="file">`元素用于让用户选择本地文件上传到服务器。当有多个这样的输入字段时，有时我们需要确保至少有一个输入框被用户选择了文件。这个场景常见于允许用户上传多份文件的情况。...
HTML5的 input:file上传类型控制
Zoe_Wang_ing的专栏
01-06 2587
form：http://www.haorooms.com/post/input_file_leixing 一、input:file属性 属性值有以下几个比较常用： accept：表示可以选择的文件MIME类型，多个MIME类型用英文逗号分开，常用的MIME类型见下表。 multiple：是否可以选择多个文件，多个文件时其value值为第一个文件的虚拟路径。 1、a
input file 多文件上传
weixin_42053840的博客
11-21 1699
最近做多文件上传input file遇到许多坑 多文件上传可以选择文件夹或者按住ctrl选择几个文件 <input value="上传文件夹" type="file" id="file" name="file" class="file" accept="image/jpeg,image/png" webkitdirectory="true"/> 这种就是上传文件夹，关键属性是web...
vue中使用input[type=”file”]实现文件上传功能
12-29
注意:input[type=file] 标签中的属性accept=application/msword,application/pdf 在pc上正常,但是在手机ios和android上这个文件格式限制会被忽略,所以需要在js中增加格式的判断,以及对应显示样式的设置.(我也是刚...
教你如何改变上传文件input的file属性.doc
10-21
首先，HTML部分通常会包含一个`<input type="file">`元素，它用于让用户选择本地文件进行上传。在这个例子中，它被包裹在一个`<a>`标签内，以便通过CSS实现更美观的样式： ```html ;" class="file">选择文件 <input...
用file标签实现多图文件上传预览
08-31
首先，我们需要在HTML中创建一个`<input>`元素，类型为`file`，并设置`multiple`属性，让用户可以一次选择多个文件。同时，添加`accept`属性限制用户只能选择特定类型的图片文件，如`.png`, `.gif`, `.jpg`, 和 `....
读取input:file的路径并显示本地图片的方法
09-05
在网页开发中，`<input type="file">` 是一个常见的文件上传控件，它允许用户选择本地的文件，如图片。然而，由于安全原因，现代浏览器并不直接提供所选文件的完整路径，而是返回一个相对安全的文件名或者一个沙箱内...
如何用input标签和jquery实现多图片的上传和回显功能
10-18
需要注意的是，这个示例并未包含实际的图片上传到服务器的逻辑，这部分通常需要与后端API进行交互，比如使用Ajax发送文件数据。 总结起来，使用HTML的`<input type="file">`标签配合jQuery，可以轻松地实现多图片的...
asp.net html控件的File控件实现多文件上传实例分享
10-27
在`<form>`标签中，`enctype="multipart/form-data"`属性是必不可少的，因为这是处理文件上传所必需的MIME类型。在HTML代码中，可以看到一个动态添加File输入框的功能，通过JavaScript的`addFile()`和`resetFile()`...
input type=file 选择图片并且实现预览效果的实例
08-29
在上面的HTML代码中，我们使用了一个input标签，type类型为file，accept属性指定了上传文件类型为image/*，multiple属性指定了可以选择多个文件。 接下来，让我们看看CSS样式文件： ```css #box{ width: 300px; ...
False 多上传 弹出框可以选择多个文件
12-19
在IT行业中，"False 多上传 弹出框可以选择多个文件"这个标题和描述涉及到的是一个文件上传功能的实现，特别是在Web开发中的交互设计。在许多网页应用中，用户可能需要上传多份文件，比如图片、文档或者视频，而传统...
struts2中实现多个文件同时上传代码
09-05
首先，我们需要在JSP页面上创建表单，让用户可以选择多个文件进行上传。在`upload.jsp`页面中，我们可以看到有三个`<input type="file">`标签，它们的name属性都设为"upload"。这样做是因为Struts2会根据相同的name...
input File实现多文件上传
maosheng1988的博客
02-19 1351
input Fileinput File实现同时上传多个文件 input File实现同时上传多个文件 默认的调用方式： &amp;lt;input type=&quot;file&quot; name=&quot;filename&quot;/&amp;gt; 这种方式可实现上传单个文件，但无法多选确认。 多选上传 &amp;lt;input type=&quot;file&quot; name=&quot;file
HTML - input type=file 允许用户选择多个文件
最新发布
qq_29761395的博客
09-22 2463
允许用户选择多个文件
layui多个file与提交同时进行_layui.upload实现文件上传控制
06-01
您好，关于多个文件上传和提交同时进行的控制，可以使用 layui.upload 的 before 函数来实现。 示例代码如下： ``` layui.use('upload', function(){ var upload = layui.upload; //多文件列表示例 var demoListView = $('#demoList'), uploadListIns = upload.render({ elem: '#testList', url: '/upload/', accept: 'file', multiple: true, auto: false, bindAction: '#testListAction', choose: function(obj){ var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列 //读取本地文件 obj.preview(function(index, file, result){ var tr = $(['<tr id="upload-'+ index +'">', '<td>'+ file.name +'</td>', '<td>'+ (file.size/1014).toFixed(1) +'kb</td>', '<td>等待上传</td>', '<td>', '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>', '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>', '</td>', '</tr>'].join('')); //单个重传 tr.find('.demo-reload').on('click', function(){ obj.upload(index, file); }); //删除 tr.find('.demo-delete').on('click', function(){ delete files[index]; //删除对应的文件 tr.remove(); uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选 }); demoListView.append(tr); }); }, before: function(obj){ layer.load(); //上传loading //模拟loading setTimeout(function(){ layer.closeAll('loading'); }, 2000); }, done: function(res, index, upload){ if(res.code == 0){ //上传成功 var tr = demoListView.find('tr#upload-'+ index), tds = tr.children(); tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>'); tds.eq(3).html(''); //清空操作 return delete this.files[index]; //删除文件队列已经上传成功的文件 } this.error(index, upload); }, error: function(index, upload){ var tr = demoListView.find('tr#upload-'+ index), tds = tr.children(); tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>'); tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传 } }); }); ``` 其中，before 函数用于上传之前的处理，这里可以添加 loading 等提示信息，确保上传过程中用户可以看到正在处理。 另外，由于 layui.upload 是基于 layui.form 实现的，所以在页面中需要有一个 form 标签，同时需要设置一个 bindAction 参数指向提交按钮，这样在上传完成后才能触发表单提交。 希望这个示例代码能够帮助到您。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值