bootstrap 逼死人的 input file multiple 多文件post只能接收到一个

最新推荐文章于 2023-08-15 16:14:43 发布

原创最新推荐文章于 2023-08-15 16:14:43 发布 · 2.3k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#bootstrap #file

bootstrap 专栏收录该内容

0 篇文章

订阅专栏

Bootstrap 的 input file 多文件上传在实际使用中可能遇到只能接收到一个文件的问题。解决办法是在 file input 的 name 属性后加上 []，并设置 multiple="multiple"。JavaScript 中需配置 uploadUrl 为上传地址，同时确保 uploadAsync 设为 false，限制最大文件数 maxFileCount: 5，并隐藏上传按钮，只显示浏览按钮。

html

<div class="input-append">
     <div class="uneditable-input">
              <i class="fas fa-file fileupload-exists"></i> <span class="fileupload-preview"></span>
     </div>
      <span class="btn btn-default btn-file"> <span class="fileupload-exists">更换</span>

<span  class="fileupload-new">选择文件</span>
 <input type="file" name="file1[]" id="file1" multiple="multiple" />
         </span> <a href="#" class="btn btn-default fileupload-exists"   data-dismiss="fileupload">删除</a>
</div>

<script>
                                $(document).on('ready', function() {
                                $("#file1").fileinput({
                                    uploadUrl: "your url", // server upload action
                                    uploadAsync: false,
                                    maxFileCount: 5,
                                    showBrowse: true,
                                    showUpload : false,
                                    browseOnZoneClick: true
                                });
                                });
                                </script>

划重点：

file1[] fileinput的name需要加[] 和 multiple="multiple"

JS中注意：

uploadUrl:里填入你自己的上传的地址

uploadAsync: false,
maxFileCount: 5,
showBrowse: true,
showUpload : false,

php

$numfile=count($_FILES["file1"]["name"]);
	$rand=date("YmdHis");
	for($i=0;$i<$numfile;$i++){
		//判断上传的图片类型是否支持
		if($numfile==1){
				if(!in_array($_FILES["file1"]["type"],$array_pictype)){
				show_msgbox("这张图片类型不支持");exit();
			}
			//查询所上传图片的格式后缀
			$filenameext=explode('.',$_FILES["file1"]["name"]);
			$filename[]="genjin".$rand.'.'.$filenameext[1];
		}else{
			if(!in_array($_FILES["file1"]["type"][$i],$array_pictype)){
				$ii=$i+1;
				show_msgbox("第{$ii}张图片类型不支持");exit();
			}
			//查询所上传图片的格式
			$filenameext[]=explode('.',$_FILES["file1"]["name"][$i]);
			$filename[]="genjin".$rand.$i.'.'.$filenameext[$i]["1"];
		}
		
	}
	$filenamestr= implode(",", $filename);