使用HTML5的FileAPI完成图片预览上传

目录

• 1. 前言
• 2. html结构
• 3. 交互逻辑
  • 3.1. 图片上传DOM元素获取
  • 3.2. 预览之前已经保存过的图片
  • 3.3. 使用H5的API进行商品缩略图读取和预览-监听change事件

前言

　　html5提供了File API，可以很好用于图片上传和本地预览的使用场景。

html结构

以下html片段表示了图片上传组件的文档结构，依赖Amaze UI样式框架。

<div class="am-g">
    <div class="am-form-group-sm am-u-sm-6">
        <div class="am-form-group">
            <label id="thumb-label">资讯缩略图{$queryResult['id']==null?'(新增图片预览)':'(已有图片展示)'}---尺寸{$picConfig.width} &times; {$picConfig.height}</label>
            <div id="article-upload-preview" class="am-form-field am-radius" style="width: 100%; height: 200px;background-repeat:no-repeat;border: 0px;"></div>
        </div>
    </div>
    <div class="am-form-group-sm am-u-sm-6">
        <div class="am-form-group">
            <div class="am-form-group am-form-file">
                <button type="button" class="am-btn am-btn-default am-btn-sm am-padding-xs">
                    <i class="am-icon-cloud-upload"></i> 请选择要上传的图片</button>
                <input id="article-upload-file" name="picture" type="file" accept=".png,.jpg,.jpeg,.gif" multiple>
                <input id="article-upload-file-hidden" name="" type="file" accept=".png,.jpg,.jpeg,.gif" multiple style="display: none">
            </div>
            <div id="article-upload-info">
                <label>新增图片信息</label>
                <div class="am-tabs" data-am-tabs>
                    <ul class="am-tabs-nav am-nav am-nav-tabs">
                        <li class="am-active"><a href="#tab1">图片名称</a></li>
                        <li><a href="#tab2">图片大小</a></li>
                        <li><a href="#tab3">图片修改时间</a></li>
                    </ul>
                    <div class="am-tabs-bd">
                        <div class="am-tab-panel am-fade am-in am-active" id="tab1">
                        </div>
                        <div class="am-tab-panel am-fade" id="tab2">
                        </div>
                        <div class="am-tab-panel am-fade" id="tab3">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

使用效果如下图所示：

---

交互逻辑

图片上传DOM元素获取

var preview = document.getElementById('article-upload-preview'),
        fileInput = document.getElementById('article-upload-file'),
        fileInputHidden = document.getElementById('article-upload-file-hidden'),
        info = document.getElementById('article-upload-info');

预览之前已经保存过的图片

preview.style.backgroundImage = 'url("xxxxxxx")';
preview.style.backgroundSize ='300px 200px';

使用H5的API进行商品缩略图读取和预览-监听change事件

fileInput.addEventListener('change', function () {
    changeFlag = false;
    // 清除背景图片:
    preview.style.backgroundImage = '';
    $('#thumb').val('');
    // 检查文件是否选择:
    if (!fileInput.value) {
        alert("请选择一张缩略图!");
        $('#tab1').html("");
        $('#tab2').html("");
        $('#tab3').html("");
        return;
    }
    // 获取File引用:
    var file = fileInput.files[0];

    // 设置Tabs选项卡组件File信息:
    $('#tab1').html(file.name);
    $('#tab2').html((file.size/1024).toFixed(2) + 'KB');
    $('#tab3').html(file.lastModifiedDate.toLocaleDateString().replace(/\//g,"-") + '' +
            file.lastModifiedDate.toLocaleTimeString());

    if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif' && file.type !== 'image/gif') {
        alert('不是有效的图片文件!');
        return;
    }

    // 读取文件:
    var reader = new FileReader();
    reader.onload = function(e) {
        var data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'
        preview.style.backgroundImage = "url(" + data + ")";
        preview.style.backgroundSize ='300px 200px';
    };
    // 以DataURL的形式读取文件:
    reader.readAsDataURL(file);
});