手机网站（非APP）图片上传的这效果怎么做？

Question

这种上传图片的效果怎么做？

Answer 1

自己写，用FormDate
设计稿做的挺好，我借鉴一下，谢啦.

正好我们的项目也需要用到图片上传组件，
刚刚写了一个，还在优化，仅供参考，欢迎提出优化方案。

// 上传组件
function UpDataFile(el, options) {
    this.element = el;
    this.options = $.extend({
        url: null, // 接收路径
        success: function() {}, // 上传成功的回调函数
        error: function() {} // 上传失败的回调函数
    }, options);

    this.formData = new FormData(); // 创建表单数据实例

    this.createDom();
    this.events();
}

UpDataFile.prototype = {

    // 上传
    upData: function() {
        var that = this;
        
        $.ajax({
            url: this.options.url,
            type: 'POST',
            cache: false,
            data: this.formData,
            processData: false,
            contentType: false,
            success: function(data) {
                that.success.call(that, data);
                that.options.success.call(that, data);
            },
            error: function(data) {
                that.error.call(that, data);
                that.options.error.call(that, data);
            }
        });
    },

    // 创建上传组件
    createDom: function() {
        this.fileEl = $('<div class="cy-file"><ul class="cy-file-list"></ul><a class="cy-file-btn" href="javascript:;"><span>上传文件</span></a></div>');
        this.element.after(this.fileEl);
    },

    // 上传成功
    success: function() {
        this.options.success.bind(this);
    },

    // 上传失败
    error: function() {
        this.options.error.bind(this);
    },

    // 渲染图片
    render: function() {
        
    },

    // 添加文件
    addFile: function() {
        this.element.trigger('click');
    },

    // 事件处理
    events: function() {
        var that = this;

        this.fileEl.on('click', '.cy-file-btn', this.addFile.bind(this));

        this.element.on('change', function() {
            [].map.call($(this)[0].files, function(i) {
                that.formData.append('updatafile', i);
            });
            that.upData();
        });
    }
};