UIkit CSS Datei-Upload-Komponente per Drag & Drop

Question

Ich habe Probleme, die UIkit-Upload-Komponente in meiner Webanwendung zu verwenden. Ich habe die Upload-Komponente JS, Platzhalter CSS und Formular-Datei CSS enthalten.

Der Code direkt aus den Beispielen in der Dokumentation nicht für mich selbst arbeiten. (Mit einigen geringfügigen Änderungen)

HTML

<div id="upload-drop" class="uk-placeholder"> 
    <i class="uk-icon-cloud-upload uk-icon-medium uk-text-muted uk-margin-small-right"></i> 
    <input class="uk-form-file" id="upload-select" type="file" accept="image/*"> 
</div> 

JS

$(function(){ 
    var settings = { 
     action: 'app/components/Parts/upload.php' 
    }; 

    var select = UIkit.uploadSelect($("#upload-select"), settings), 
     drop = UIkit.uploadDrop($("#upload-drop"), settings); 
    }); 
}); 

uploaded.php

<script> 
    document.location.href = "/test/#/; 
</script> 

Answer 1

Ich glaube, Sie können PHP-Logiken von this article implementieren, um mit UiKit Javascript zu arbeiten.

Ich hatte das gleiche Problem, und es hat mir geholfen.

Answer 2

Ok, das ist der alte. Neue Version von UIkit 3 hat auch eine Komponente hochgeladen und es ist recht einfach zu benutzen. Nehmen Sie die Markierung direkt aus dem docs und platzieren Sie den URL-Skriptpfad im URL-Parameter.

UIkit.upload(".test-upload", { 
    url: "upload.php",//your upload script can be some kind of route f.e. user/upload 
    multiple: true, 
... 

Und der PHP-Code könnte so einfach wie folgt aussehen:

if(isset($_FILES['files'])){ 

    for($i=0;$i<count($_FILES['files']['name']);$i++){ 
     foreach($_FILES['files'] as $v=>$file) { 
      $errors = array(); 
      $file_name = $_FILES['files']['name'][$i]; 
      $file_size = $_FILES['files']['size'][$i]; 
      $file_tmp = $_FILES['files']['tmp_name'][$i]; 
      $file_type = $_FILES['files']['type'][$i]; 
      $file_ext = strtolower(end(explode('.',$_FILES['files']['name'][$i]))); 

      $extensions = array("jpeg","jpg","png","docx","doc","pdf"); 

      if(in_array($file_ext,$extensions) === true){ 
       move_uploaded_file($file_tmp,"../../site/assets/files."/".strtolower($sanitizer->name($file_name))); 

      } 
     } 
    } 
}