bootstrap fileinput 实现文件上传

今天做了文件上传的功能，因为项目采用了bootstrap的框架做的，首先想到的是bootstrap是否有支持的上传文件的插件，所有找到了fileinput插件。
参考实例： http://plugins.krajee.com/file-input/demo

一.在前端页面上的操作，代码如下：

首先引用css和js文件：fileinput.css和fileinput.min.js （在官网下载即可）

<div id="company_detail" class="form-group">
	<label class="col-sm-2 control-label  no-padding-right">营业执照</label>
	<div class="col-sm-4">
		<input id="company_card" name="file_name" type="file" class="file-loading" accept="image/*">
		<input name="company_card" type="text" hidden="hidden">
	</div>
</div>

jQuery(function($) {
 
        $(".form-group input[name='user_nature']").click(function(){
 
            var natureValue = $(this).val();
            if(natureValue == 2){
                $('#user_identity').css({display:'block'});
                $('#company_detail').css({display:'none'});
            }
 
            if(natureValue == 3){
                $('#user_identity').css({display:'none'});
                $('#company_detail').css({display:'block'});
            }
 
        });
 
        var initFileParam = {
             uploadUrl: "/member/user/file-upload",
             autoReplace: true,
             maxFileCount: 1,
             allowedFileExtensions: ["jpg", "png", "gif"],
             browseClass: "btn btn-sm btn-warning", //按钮样式
             cancelClass: "btn btn-sm disabled", //按钮样式
             uploadClass: "btn btn-sm btn-success",
			 dropZoneTitle: "可以将图片拖拽到这里哦...",
             browseLabel:'选择',
             removeLabel:'删除',
             uploadLabel:'上传',
             removeClass: "btn btn-sm btn-danger fileinput-remove fileinput-remove-button",
             previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
             showUpload:true,
             showCancel:false,
             showRemove:true,
             showCaption: false
         };
 
        $("#company_card")
             .fileinput(initFileParam)
             .on("fileuploaded", function (e, data) {
                 var res = data.response;
                 $("input[name='company_card']").val(res.path);
        });
});

二、后台采用的是php yii2框架开发的，代码如下：

//先引用所用到的类库
use Yii;
use yii\web\Controller;
use yii\web\UploadedFile;

//具体方法上传文件的方法：

public function actionFileUpload(){
 
	if (Yii::$app->request->isPost) {
	$res = [];
	$initialPreview = [];
	$initialPreviewConfig = [];
 
	$images = UploadedFile::getInstancesByName("file_name");
//      print_r($images);
//      exit;
	if (count($images) > 0) {
 
		foreach ($images as $key => $image) {
 
			if ($image->size > 2048 * 1024) {
				$res = ['error' => '图片最大不可超过2M'];
				return json_encode($res);
			}
			if (!in_array(strtolower($image->extension), array('gif', 'jpg', 'jpeg', 'png'))) {
				$res = ['error' => '请上传标准图片文件, 支持gif,jpg,png和jpeg.'];
				return json_encode($res);
			}
			$dir = './upload/'; //该目录是在 yii框架下的web目录下，如果没有，请新建
			//生成唯一uuid用来保存到服务器上图片名称
			$pickey = md5(uniqid(microtime(true),true));
			$filename = $pickey . '.' . $image->getExtension();
 
			$file = $dir . $filename;
 
			if ($image->saveAs($file)) {
				$res = [
					'state' => 1,
					'name' => $filename,
					'path' => $file,
				];
			}else{
				$res = [
					'state' => 0,
					'name' => '',
					'path' => '',
				];
			}	
		}
	}
	return json_encode($res);
}

三、上传截图：

好了，大功告成，有不懂的，可以下方留言哦