js上傳插件

後臺時經常用到上傳插件,這裏收集了兩個常用的:

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