fileinput异步上传图片

admin
2021-05-04
41

tp5

thinkphp5

fileinput

1.fileinput图片上传插件

    https://www.jq22.com/jquery-info5231

2.异步代码

<link href="__STATIC__/assembly/fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />

<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>

<script src="__STATIC__/assembly/fileinput/js/fileinput.js" type="text/javascript"></script>

<form class="tab-content tabs-flat" role="form" method="post" action="{:url('configure/edit')}">

<div class="form-group">

<label for="exampleInputEmail2">栏目图片</label>

<input type="file" multiple type="files" id="fileinput" class="form-control" name="files">

<input type="hidden" name="img" id="img_id">

</div>

<button type="submit" class="btn btn-blue">提交</button>

</form>

<script>

$('#fileinput').fileinput({

    language: 'zh',

    uploadUrl: "{:url('files/fileinput')}",

    allowedFileExtensions : ['jpg', 'png','gif'],

dropZoneTitle: '可以将图片拖放到这里 支持单文件上传',

}).on('fileuploaded', function (event, data) { //异步上传成功结果处理

$("#img_id").val(data.response.val);

});

</script>


3.tp5上传图片

    

<?php 

namespace app\admin\controller;

use think\Request;

class Files extends Error{

public function fileinput(){

$file=request()->file('files');

// 移动到框架应用根目录/uploads/ 目录下

$info = $file->move( './static/uploadsimg');

if($info){

// 成功上传后 获取上传信息

// 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg

echo \json_encode(['res'=>1,'val'=>$info->getSaveName()]);

}else{

// 上传失败获取错误信息

echo $file->getError();

}

}

}

?>