php 应用 bootstrap-fileinput 上传文件插件操作的方法

最新推荐文章于 2025-10-12 22:01:01 发布

原创最新推荐文章于 2025-10-12 22:01:01 发布 · 1.4w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#php #插件 #fileinput #上传

本文介绍了一种基于fileinput.js的多图上传插件配置方法。通过设置属性`accept=image/*`来实现自动过滤非图片类型的文件，并通过`name=image_data[]`属性将文件属性放入数组中以便于批量上传。文章还提供了PHP端的上传示例代码，展示了如何使用同步上传方式及限制文件大小与类型。

//先加载插件所需要的 js 、css 文件

<link href="css/fileinput.css" rel="stylesheet" type="text/css" />
<script src="js/fileinput.js"type="text/javascript"></script>
<script src="js/fileinput_locale_zh.js" type="text/javascript"></script>

//然后页面上代码

accept="image/*" 配置这个属性（当点击选择文件时，自动过滤不是图片类型的文件） name="image_data[]" 此属性（多图片上传时，可以将文件属性放到一个数组中）如图所示：

注：多图上传要将ajax设置成同步

<input type="file" class="file"id="img_url1" name="image_data[]"accept="image/*" multiple>

$("#img_url1").fileinput({
   language: 'zh',
   uploadUrl: "upload", //上传后台操作的方法
   uploadAsync: false, //设置上传同步异步 此为同步
   maxFileSize: 200,
   allowedFileExtensions: ['jpg'] //限制上传文件后缀
});//初始化 后 上传插件的样子

php中方法

public function upload(){
	if(IS_AJAX)
	{
		$images_name = '';
		$img_name = time();
		foreach($_FILES['image_data']['tmp_name'] as$k=>$v)
		{
			move_uploaded_file($v,$img_path.$img_name.$k.'.jpg');
			$images_name  .=  $img_name.$k.'.jpg'.',';
		}
	}
	return 1; //这个返回值必须要
}

了解更多请参考 http://plugins.krajee.com/file-input/demo#image-management