UIKIT 3获取上传文件名求助：实现上传图片至div预览功能

别担心，UIkit 3其实完全可以获取到上传的文件对象，只是需要通过它的事件监听来实现，下面我给你一步步拆解实现方法：

1. 先搭建基础的HTML结构 #

首先我们需要一个支持点击选择和拖放的文件上传区域，以及一个用来展示预览图的容器div：

<!-- 文件上传区域 -->
<div uk-upload="target: #upload-input">
    <button class="uk-button uk-button-default">选择或拖拽图片到这里</button>
    <input id="upload-input" type="file" multiple accept="image/*" hidden>
</div>

<!-- 预览图容器 -->
<div id="preview-container" class="uk-grid uk-grid-small uk-child-width-1-4 uk-margin-top"></div>

2. 通过UIkit的事件监听获取文件 #

UIkit的Upload组件会在文件被选中或者拖放完成时触发select事件，我们可以通过这个事件拿到完整的文件列表：

// 获取上传组件实例
const upload = UIkit.upload('#upload-input');

// 监听文件选择/拖放完成事件
upload.on('select', function (e) {
    // e.detail.files 就是选中的所有文件对象数组
    const files = e.detail.files;
    // 遍历文件，只处理图片类型
    Array.from(files).forEach(file => {
        if (file.type.startsWith('image/')) {
            previewImage(file);
        }
    });
});

3. 实现图片预览函数 #

接下来写一个previewImage函数，用FileReader把文件转换成可直接预览的Data URL，然后创建img元素插入到预览容器中：

function previewImage(file) {
    const reader = new FileReader();
    reader.onload = function (e) {
        // 创建img元素并设置属性
        const img = document.createElement('img');
        img.src = e.target.result;
        img.className = 'uk-width-1-1';
        // 用div包裹图片，适配UIkit的网格样式
        const item = document.createElement('div');
        item.appendChild(img);
        // 添加到预览容器
        document.getElementById('preview-container').appendChild(item);
    };
    // 读取文件为Data URL格式
    reader.readAsDataURL(file);
}

额外小提示 #

如果你需要更细致地处理拖放过程，UIkit还提供了dragenter、dragover、dragleave这些事件，但上面的select事件已经同时覆盖了点击选择和拖放两种场景，日常使用完全足够。

另外，要是你不想用UIkit的Upload组件，直接监听原生input[type=file]的change事件也能拿到文件，只是UIkit帮我们封装了更美观的拖放交互样式，用起来更省心。

这样就能轻松实现上传后自动在div里展示图片预览啦，亲测有效哦！

内容的提问来源于stack exchange，提问作者Jiuzhen Pan