jquery轻量级文件上传预览插件 | 苦力吧素材下载www.kuli8.com

Default Styling Single File

Basic setup using the class tower-file-button on the label for the default styling included in the plugin.

Select a File

Show/Hide Code

<div class="tower-file">
    <input type="file" id="demoInput1" />
    <label for="demoInput1" class="tower-file-button">
        Select a File
    </label>
</div>

$('#demoInput1').fileInput();

Default Styling Single File With a Font Icon

Add a font icon before the text when any files are selected. The icon when no files are selected has to be in the HTML of the label when the plugin is initialized.

Select a File

Show/Hide Code

<div class="tower-file">
    <input type="file" id="demoInput2" />
    <label for="demoInput2" class="tower-file-button">
        <span class="mdi mdi-upload"></span>Select a File
    </label>
</div>

$('#demoInput2').fileInput({
                iconClass: 'mdi mdi-fw mdi-upload'
});

Default Styling Multiple Files

Select Files

Show/Hide Code

<div class="tower-file">
    <input type="file" id="demoInput3" multiple />
    <label for="demoInput3" class="tower-file-button">
        <span class="mdi mdi-upload"></span>Select Files
    </label>
</div>

$('#demoInput3').fileInput({
    iconClass: 'mdi mdi-fw mdi-upload'
});

With Clear Button

Select Files

Show/Hide Code

<div class="tower-file">
    <input type="file" id="demoInput4" />
    <label for="demoInput4" class="tower-file-button">
        <span class="mdi mdi-upload"></span>Select a File
    </label>
    <button type="button" class="tower-file-clear tower-file-button">
        Clear
    </button>
</div>

$('#demoInput4').fileInput({
    iconClass: 'mdi mdi-fw mdi-upload'
});

Image Preview Selector

Select File

Show/Hide Code

<div class="tower-file">
    <input type="file" id="demoInput4" />
    <label for="demoInput4" class="tower-file-button">
        <span class="mdi mdi-upload"></span>Select a File
    </label>
    <button type="button" class="tower-file-clear tower-file-button">
        Clear
    </button>
</div>

<div>
    <img id="demo6-image-preview" />
</div>

$('#demoInput6').fileInput({
                imgPreviewSelector: '#demo6-image-preview'
});

Cropping the Preview Image

Select File

Show/Hide Code

<style>
    .tower-input-preview-wrapper {
        margin: 0 auto;
        position: relative;
        width: 200px;
        height: 200px;
        overflow: hidden;
    }

    .tower-input-preview-wrapper img {
        position: absolute;
        left: 50%;
        top: 50%;
        max-height: 100%;
        max-width: none;
        transform: translate(-50%, -50%);
    }

        .tower-input-preview-wrapper img.tower-input-preview-portrait {
        max-height: none;
        max-width: 100%;
    }
</style>

Using Bootstrap 4 Styles

Replace the tower-file-button class with something like Bootstraps button classes

Select Files

Show/Hide Code

<div class="tower-file">
    <input type="file" id="demoInput5" />
    <label for="demoInput5" class="btn btn-primary">
        <span class="mdi mdi-upload"></span>Select Files
    </label>
    <button type="button" class="btn btn-secondary tower-file-clear align-top">
        Clear
    </button>
</div>

$('#demoInput5').fileInput({
    iconClass: 'mdi mdi-fw mdi-upload'
});