[TOC] # 多文件上傳插件（bootstrap-fileinput） ## 一、插件介紹 文件上傳控件bootstrap-fileinput的使用 https://www.cnblogs.com/parker-yu/p/7207071.html JS組件系列——Bootstrap文件上傳組件：bootstrap fileinput https://www.cnblogs.com/landeanfen/p/5007400.html 源碼以及API地址： 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 ## 二、整合TP5 ### 1、插件位置 ~~~ static\admin\plugins\bootstrap-fileinput ~~~ ### 2、引入文件 ~~~ <input id="file-zh" name="file-zh[]" type="file" multiple> <link href="__ADMIN__/plugins/bootstrap-fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css" /> <script src="__ADMIN__/plugins/bootstrap-fileinput/js/fileinput.js" type="text/javascript"></script> <script src="__ADMIN__/plugins/bootstrap-fileinput/js/locales/zh.js" type="text/javascript"></script> ~~~ 注意：__ADMIN__路徑解析不一定正確 > 初始化 ~~~ <script type="text/javascript" > $('#file-zh').fileinput({ language: 'zh', uploadUrl: '#', allowedFileExtensions: ['jpg', 'png', 'gif'], }); </script> ~~~ ### 3、修改common.php 位置：\application\admin\common.php ~~~ function downfiles($fieldinfo){ //字段名 $field = $fieldinfo['field']; $url = url('upload_downfiles'); //反序列化設置項 $setting = unserialize($fieldinfo['setting']); $allowext = $setting['allowext']; //zip|rar $maxnumber = $setting['maxnumber']; //字符串格式調整 $allowext = str_replace("|","','",$allowext); $allowext = "'" . $allowext . "'"; $str = <<<EOF <input type="text" id="info_$field" name="info[$field]" class="input-large form-control"> <input id="file-zh" name="file[]" type="file" multiple> <link href="__ADMIN__/plugins/bootstrap-fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css" /> <script src="__ADMIN__/plugins/bootstrap-fileinput/js/fileinput.js" type="text/javascript"></script> <script src="__ADMIN__/plugins/bootstrap-fileinput/js/locales/zh.js" type="text/javascript"></script> <script type="text/javascript" > $('#file-zh').fileinput({ language: 'zh', uploadUrl: '$url', allowedFileExtensions: [$allowext], uploadAsync: true, //異步上傳 maxFileCount: $maxnumber }); $('#file-zh').on("fileuploaded", function(event, data, previewId, index){ var images_value = $('#info_$field').val()=='' ? '' : $('#info_$field').val() + ','; $('#info_$field').val( images_value + data.response); $('#file-zh').val(''); }); </script> EOF; return $str; } ~~~ ### 4、修改控制器 位置：\application\admin\Content.php ~~~ //多文件上傳 public function upload_downfiles(){ $files = request()->file('file'); foreach ($files as $file) { $info = $file->move(ROOT_PATH . 'public/uploads'); if($info) { return json_encode($info->getSaveName()); } } } ~~~ ## 三、完善Bootstrap fileinput插件功能 ### （一）上傳亂碼-升級插件 #### 1、修改js 位置：static\admin\plugins\bootstrap-fileinput\js\fileinput.js 行數： ~~~ 353：增加tRar 454：tRar = '<div class="kv-preview-data file-preview-other-frame">\n' + $h.DEFAULT_PREVIEW + '\n</div>\n'; 496：rar: tRar, 499：allowedPreviewTypes: ['image', 'html', 'text', 'video', 'audio', 'flash', 'pdf', 'rar', 'object'], 510：rar: {width: "160px", height: "160px"}, 522：rar: vDefaultDim, 551：rar: function (vType, vName) { return $h.compare(vType, 'application/octet-stream', true) || $h.compare(vName, /\.(rar|zip)$/i); }, 3634：'rar': 'rar', ~~~ ### （二）刪除功能 #### 1、自定義文件屬性 ~~~ $('#'+previewId).attr('studyfox_img',data.response); 上傳文件函數 $('#file-zh').on("fileuploaded", function(event, data, previewId, index){ var images_value = $('#info_$field').val()=='' ? '' : $('#info_$field').val() + ','; $('#info_$field').val( images_value + data.response); $('#file-zh').val(''); //在當前圖片DIV里添加圖片地址 $('#'+previewId).attr('studyfox_img',data.response); }); ~~~ #### 2、回調函數 思路：與多圖上傳類似 ~~~ $delete_url = url('delete_file'); //刪除文件 $('#file-zh').on("filesuccessremove", function(event, id){ var img_src = $('#'+id).attr('studyfox_img'); //后臺刪除文件 $.ajax({ url: '$delete_url', type: 'POST', data: {'img': img_src}, success: function(result, textStatus){ //圖片刪除成功后移除文本框圖片信息，三種情況 ,號位置在前 后 或沒有,號 var images_value = $('#info_$field').val();//隱藏文本框的值 images_value = images_value.replace(img_src+',', ''); //替換,號在右邊 images_value = images_value.replace(','+img_src, ''); //替換,號在左邊 images_value = images_value.replace(img_src, ''); //直接替換 //重新賦值 $('#info_$field').val(images_value); }, error: function(XMLHttpRequest, textStatus){ layer.alert('刪除失敗!', {icon:2}); } }); }); ~~~ #### 3、控制器處理 ~~~ //刪除文件或圖片 public function delete_file(){ $delete_url = input('img'); try { unlink(ROOT_PATH . 'public/uploads/' . $delete_url); //刪除成功返回1 } catch (Exception $e) { } } ~~~