HTML5/JS一款不错的文件上传界面组件

File Upload Widget 可以选择文件类型，自定义的带图标按钮，可显示文件上传列表和进度动画。

widget, upload

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3258
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

let files = [];

const UPLOAD_LIMIT = 3;

const $filesList = $('.files-list');
const $destinationDropdown = $('#destination');
const $fileTemplate = $('#file-template').html();

$(document).on('upload:progress', (e, file, progress, speed) => {
    updateUploadStatus(file, progress, speed);
});

$(document).on('upload:done', (e, file) => {
    let $file = updateUploadStatus(file, 1, 0);
    $file.find('.upload-speed').addClass('hidden');
    $file.addClass('uploaded');

if (files.length) {
        uploadFile(files.shift());
    }
});

$('#upload[data-action="browse"]').on('click', function() {
    if ($(this).data('action') === 'browse') {
        $('#browse').trigger('click');
    }
});

$('#browse').on('change', function() {
    for (let i = 0; i < this.files.length; i++) {
        let file = this.files[i];
        files.push({
            id: btoa(file.name + file.size),
            name: file.name,
            size: file.size,
            thumbnail: 'https://unsplash.it/45/35'
        });
    }
    $('#upload').attr('data-action', 'upload');
    uploadFiles(files);
});

function uploadFiles(files) {
    emptyFilesList();
    renderFiles(files);

let i = 0;
    while (i++ < UPLOAD_LIMIT) {
        let file = files.shift();
        if (file) {
            uploadFile(file);
        }
    }
}

function uploadFile(file) {
    fakeUploadProgress(file);
}

function updateUploadStatus(file, progress, speed) {
    let uploadedSize = readableFilesize(Math.floor(file.size * progress));
    let totalSize = readableFilesize(file.size);
    let uploadSpeed = `${readableFilesize(speed)}/sec`;

return $file;
}

function emptyFilesList() {
    $filesList.empty();
}

function getUploadDestination() {
    return $destinationDropdown.find('option:selected').text();
}

function readableFilesize(size) {
    let extension = 'KB';
    if (size >= 1000) {
        size = (size / 1000).toFixed(1);
        extension = 'MB';
    }
    return `${size} ${extension}`;
}

function fakeUploadProgress(file) {
    let speed = randomBetween(50, 300);
    let total = 0;

ticktock();
    setTimeout(ticktock, 1000);
}

function randomBetween(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
}

uploadFiles(files);

编译

CSS

/** ce-select.css **/

.ce-select-original {
    position: fixed;
    top: 100vh;
    left: 100vw;
}
.ce-select-container {
    position: relative;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    line-height: 1;
    color: #333;
    cursor: pointer;
    -webkit-user-select: none;
}
.ce-select-widget {
    display: flex;
    align-items: center;
    width: 200px;
    padding: 0.75em 1em;
    background-color: #c8c8c8;
}
.ce-select-container--focus .ce-select-widget {
    outline: auto 3px #5e9ed7;
    outline: auto 3px -webkit-focus-ring-color;
}
.ce-select-value {
    margin-right: 1em;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}
.ce-select-toggle {
    flex-shrink: 0;
    width: 0.5em;
    height: 0.5em;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    margin-left: auto;
    transform: translateY(-2px) rotate(45deg);
}
.ce-select-container--open .ce-select-toggle {
    transform: translateY(2px) rotate(-135deg);
}
.ce-select-dropdown {
    display: none;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    position: absolute;
    top: calc(14px + 1.5em);
    left: 0;
    right: 0;
    list-style: none;
    background-color: #d8d8d8;
}
.ce-select-container--open .ce-select-dropdown {
    display: block;
}
.ce-select-option {
    padding: 0.5em 1em;
}
.ce-select-option--focus {
    background-color: #c8c8c8;
}
.ce-select-option--disabled {
    color: #777;
}
.ce-select-option--disabled.ce-select-option--focus {
    background-color: transparent;
}
/** end of ce-select.css **/
/** base styles **/

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    font-size: 62.5%;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: "Open Sans", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1;
    background: url("http://i1067.photobucket.com/albums/u422/arnellebalane/background_zpsqhxecqsu.png") center center no-repeat;
    background-size: cover;
}
ul {
    list-style: none;
}
.hidden {
    display: none !important;
}
/** base widget **/

.widget {
    display: flex;
    flex-direction: column;
    width: 35rem;
    height: 48rem;
    background-color: #fff;
}
/** widget header **/

.widget__header {
    display: flex;
    flex-shrink: 0;
    padding: 3rem;
    background-color: #333;
}
#browse {
    position: fixed;
    top: 200vh;
}
#upload {
    flex-shrink: 0;
    width: 6rem;
    height: 6rem;
    border: 1px dashed #484848;
    margin-left: 3rem;
    font-size: 0;
    background: transparent url("http://i1067.photobucket.com/albums/u422/arnellebalane/upload_zpsypw4opxz.png") center center no-repeat;
    cursor: pointer;
}
#upload[data-action="browse"] {
    background-image: url("http://i1067.photobucket.com/albums/u422/arnellebalane/plus_zps69hgs4df.png");
    background-size: 45%;
}
/** upload destination dropdown **/

.ce-select-container {
    width: 100%;
}
.ce-select-widget {
    padding: 0 2rem;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
}
.ce-select-value {
    font-weight: bold;
    line-height: 6rem;
}
.ce-select-toggle {
    border-color: #646464;
    border-width: 2px;
}
.ce-select-dropdown {
    top: 6rem;
}
.ce-select-option {
    padding: 1rem 2rem;
}
/** files list **/

.files-list {
    padding: 3rem;
    overflow: auto;
}
/** file widget **/

.file {
    display: flex;
    flex-wrap: wrap;
}
.file:not(:last-of-type) {
    margin-bottom: 3rem;
}
.file__thumbnail {
    width: 4.5rem;
    height: 3.5rem;
    object-fit: cover;
    object-position: center center;
}
.file__details {
    margin-left: 1rem;
}
.file__name {
    font-size: 1.6rem;
    color: #333;
}
progress {
    flex-shrink: 0;
    width: 100%;
}
/** upload info **/

.upload-info {
    margin-top: 0.5rem;
    font-size: 1.4rem;
}
.upload-status {
    color: #666;
}
.upload-speed {
    margin-left: 0.5rem;
    color: #999;
}
.upload-speed::before {
    content: "( ";
}
.upload-speed::after {
    content: " )";
}
.upload-progress {
    -webkit-appearance: none;
    height: 2px;
    margin-top: 2rem;
}
.upload-progress::-webkit-progress-bar {
    background-color: #e5e5e5;
}
.upload-progress::-webkit-progress-value {
    background-color: #a3d39c;
}

HTML

<div class="widget">
    <header class="widget__header">
        <input id="browse" type="file" multiple="multiple" />
        <select id="destination" name="destination" class="ce-select">
            <option value="1">100 Days UI Challenge</option>
            <option value="2">Pictures</option>
            <option value="3">Documents</option>
        </select>
        <button id="upload" data-action="browse">Upload Files</button>
    </header>
    <ul class="files-list"></ul>
</div>
<template id="file-template">
    <li data-file-id="{{ id }}" class="file"><img src="{{ thumbnail }}" alt="{{ name }}" class="file__thumbnail" />
        <div class="file__details">
            <h3 class="file__name">{{ name }}</h3>
            <p class="upload-info"><span class="upload-status">{{ size }}</span><span class="upload-speed">{{ speed }}</span>
            </p>
        </div>
        <progress min="0" max="100" value="{{ progress }}" class="upload-progress"></progress>
    </li>
</template>

File Upload Widget 可以选择文件类型，自定义的带图标按钮，可显示文件上传列表和进度动画。

widget, upload

编辑器支持Emmet

快捷键

File Upload Widget 可以选择文件类型，自定义的带图标按钮，可显示文件上传列表和进度动画。

widget, upload

HTML5一款很不错的响应式导航栏界面组件（Night Tabs）

HTML5 一款很棒的球形把手（旋钮）界面交互组件

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：