后台时经常用到上传插件,这里收集了两个常用的:
1.kindeditor:
引入三个:
<link rel="stylesheet" href="/static/admin/kind/themes/default/default.css" />
<link rel="stylesheet" href="/static/admin/kind/plugins/code/prettify.css" />
<script charset="utf-8" src="/static/admin/kind/kindeditor-all-min.js"></script>
然后界面操作:
KindEditor.ready(function(K) {
var editor = K.editor({
allowFileManager : true,
uploadJson : '/kphp/upload_json.php',
fileManagerJson : '/index/file_manager_json.php',
});
K('#ke-upload-button').click(function() {
editor.loadPlugin('insertfile', function() {
editor.plugin.fileDialog({
//fileUrl : K('#url').val(),
clickFn : function(url, title) {
//K('#url').val(url);
$("#path").val(url)
editor.hideDialog();
}
});
});
});
});
这个网上很多的。
下面说一个推荐的:
bootstrap实现多文件上传:
引入插件和样式:
<link type="text/css" rel="stylesheet" href="/static/admin/lib/bootstrap-fileinput-master/css/fileinput.min.css" />
<script charset="utf-8" src="/static/admin/lib/bootstrap-fileinput-master/js/fileinput.min.js" /></script>
然后html如下:
<div class="form-group has-warning">
<div class="col-lg-10">
<input type="hidden" name="paths" id="paths">
<div><input id="file-fr" name="file_fr" type="file" multiple></div>
</div>
</div>
js初始化:
<script>
var fdata = [];
$(function(){
$("select[name='type']").change(function(){
if(parseInt($(this).val())==11){
$("#mb").show()
}else{
$("#mb").hide()
}
})
$("#sub").click(function(){
var _paths = []
for(e in fdata){
if('' != $.trim(fdata[e])){
_paths.push(fdata[e])
}
}
if(_paths.length == 0){
alert('请先上传文件')
return
}
$("#paths").val(_paths.toString())
$.post("/index/index/subnews.html",$("#form").serialize(),function(status){
if(status==1){
$(".alert-danger").show()
$(".alert-success").hide()
} else {
$(".alert-success").show()
$(".alert-danger").hide()
setTimeout("location.reload()",2000);
}
},'json');
})
})
$('#file-fr').fileinput({
theme: 'fas',
language: 'fr',
uploadUrl: '/index/index/doFile.html',
//我上传html文件时因为预览会导致整个界面错乱,加了这句指定预览类型就对了。这里类型不能用成txt.
allowedPreviewTypes: ['text', 'html'],
allowedFileExtensions: ['txt', 'html', 'htm']
}); // 监听事件
$("#file-fr").on("fileuploaded", function (event, data, previewId, index) {
if(data.response.uploaded!='' && typeof(data.response.uploaded)!="undefined"){
var upload_img_name = previewId.substring(previewId.indexOf("_", index+1));
fdata[previewId] = data.response.uploaded
//console.log(fdata);
// 上传地址
//document.getElementById("paths").value=document.getElementById("paths").value+','+data.response.uploaded
}
});
$("#file-fr").on("filesuccessremove",function(event, data, msg){
delete fdata[data];
console.log(fdata);
});
</script>
这是实现多文件上传,还有实现了取消事件.后台直接用$_FILES获取。后台处理程序:
public function doFile(){
$file = request()->file('file_fr');
$dirSep = '/';//DIRECTORY_SEPARATOR
if ($file) {
$name = $_FILES['file_fr']['name'];
$extends = strrchr($name,'.');
if(!in_array(trim($extends), ['.html','.htm','.txt'])){
echo json_encode(['error'=>'不正确的文件类型']);
}
// 移动到框架应用根目录/public/uploads/ 目录下
$rand = $this->rand(20).$extends;
$pName = $_SERVER['DOCUMENT_ROOT']. $dirSep . 'upload'.$dirSep.$rand;
$info = $file->move($_SERVER['DOCUMENT_ROOT']. $dirSep . 'upload',$rand);
//var_dump($pName);var_dump($info);exit;
if($info&&file_exists($pName)){
// 输出 42a79759f284b767dfcb2a0197904287.jpg
echo json_encode(['uploaded' => $pName]);
}else{
echo json_encode(['error'=>'上传失败']);
}
} else {
echo json_encode(['error'=>'No files found for upload.']);
}
}
源码下载链接:
bootstrap-fileinput源码:https://github.com/kartik-v/bootstrap-fileinput
bootstrap-fileinput在线API:http://plugins.krajee.com/file-input
bootstrap-fileinput Demo展示:http://plugins.krajee.com/file-basic-usage-demo