博文
bootstrap fileinput 插件 +PHP 文件上传
||
终于找到一个可以用的例子。
来自：https://hdtuto.com/article/ajax-multiple-image-upload-using-bootstrap-fileinput-in-php
把当前网站的两个index.php和imageUpload.php放在同一目录下。在该目录下建立一个upload文件夹。然后浏览器打开index.php即可使用。
index.php
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"/>
<style type="text/css">
.main-section{
margin:0 auto;
padding: 20px;
margin-top: 100px;
background-color: #fff;
box-shadow: 0px 0px 20px #c1c1c1;
}
.fileinput-remove,
.fileinput-upload{
display: none;
}
</style>
</head>
<body>
<div>
<div>
<div class="col-lg-8 col-sm-12 col-11 main-section">
<h1 class="text-center text-danger">File Input Example</h1><br>
<div>
<div>
<input id="file-1" type="file" name="file" multiple data-overwrite-initial="false" data-min-file-count="2">
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/js/fileinput.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/themes/fa/theme.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("#file-1").fileinput({
theme: 'fa',
uploadUrl: "imageUpload.php",
allowedFileExtensions: ['jpg', 'png', 'gif'],
overwriteInitial: false,
maxFileSize:2000,
maxFilesNum: 10,
slugCallback: function (filename) {
return filename.replace('(', '_').replace(']', '_');
}
});
</script>
</body>
</html>
imageUpload.php
<?php
if (!empty($_FILES['file'])) {
$target = "upload/". $_FILES["file"]["name"];
move_uploaded_file($_FILES['file']['tmp_name'], $target);
echo json_encode(['uploaded' => $target]);
} else {
echo json_encode(['error'=>'No files found for upload.']);
}
?>
示例引自：https://hdtuto.com/article/ajax-multiple-image-upload-using-bootstrap-fileinput-in-php
https://blog.sciencenet.cn/blog-3409972-1193606.html
上一篇：composer下载phpword
下一篇：pip 安装第三方包出错解决办法
