图片上传之blob对象预览

今天听同事说有些图片上传控件，可以不需要先上传，就可以预览，并且桌面浏览器和手机浏览器都兼容。

于是在网上找了几个例子，查看其工作原理，发现都是利用blob对象，但网上的例子，代码都很繁琐。

因此花点时间，自己封装了一个简单实用的jquery控件。

相对网上的繁杂的代码，我的例子代码简洁易读，并且自带表单对象（formdata）提交，大家可以方便的扩展或改写。

废话不多说，先上js控件代码：

    $.fn.imgUpload = function () {
        var o = $(this);
        var upload = {};
        upload.formData = new FormData();
        upload.frame = $('
').appendTo(o);
        upload.add = $('
'
            + '
+
'
            + ''
            + '
').appendTo(upload.frame);
        $("#uploadInput").on("change", function (e) {
            var url = window.URL || window.webkitURL || window.mozURL,files = e.target.files;
            for (var i = 0, len = files.length; i < len; ++i) {
                var file = files[i];
                var src = url ? url.createObjectURL(file) : e.target.result;                
                $('
').insertBefore(upload.add);
                upload.formData.append("file" + i, files[i]);
            }
        });
        upload.submit = function (url, callback) {
            $.ajax({
                url: url,
                method: 'POST',
                data: this.formData,
                contentType: false,
                processData: false,
                cache: false,
                success: function (re) {
                    callback && callback(re);
                },
                error: function (ex) {
                    //error process....
                }
            });
        }
        return upload;
    };

下面是使用举例：

本代码已通过简单测试，如有疏漏，请指正。