Question

我无法在我的Web应用程序中使用UIkit上传组件。我已经包含了上传组件JS，占位符css和表单文件css。

直接来自文档中的示例的代码对我来说甚至都不起作用。（稍作修改）

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);
    });
});

upload.php的

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

Answer 1

我相信您可以从this article实现PHP逻辑以使用UiKit的Javascript。

我遇到了同样的问题，这帮助了我。

Answer 2

好的，这是旧的。新版本的UIkit 3也上传了组件，它非常易于使用。直接从docs获取标记，并将url脚本路径放在url参数中。

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

php代码可能很简单：

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)));

            }
        }
    }
}

UIkit CSS拖放文件上传组件

2 个答案: