图片上传之blob对象预览

最新推荐文章于 2024-07-24 02:20:38 发布

丰云

最新推荐文章于 2024-07-24 02:20:38 发布

阅读量7k

点赞数

分类专栏：前端应用文章标签： jquery 图片上传无上传预览

本文链接：https://blog.csdn.net/foren_whb/article/details/72472622

版权

前端应用专栏收录该内容

61 篇文章 0 订阅

订阅专栏

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

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

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

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

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

    $.fn.imgUpload = function () {
        var o = $(this);
        var upload = {};
        upload.formData = new FormData();
        upload.frame = $('<div style="width:100%;height:100%;"></div>').appendTo(o);
        upload.add = $('<div style="float:left;position:relative;margin:5px;width:60px;height:60px;border:1px solid #d9d9d9;">'
            + '<div style="position:absolute;width:100%;height:100%;font-size:42px;left:0;top:0;color:#ccc;">+</div>'
            + '<input id="uploadInput" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple="" style="width:100%;height:100%;opacity:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);">'
            + '</div>').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;                
                $('<div style="float:left;margin:5px;width:60px;height:60px;background:no-repeat 50%;background-size:cover;background-image:url(' + src + ')"></div>').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;
    };

下面是使用举例：

    <div id="divContainner" style="margin: 30px;width: 540px;height: 180px;border: 1px solid #d9d9d9;"></div>
    <input id="submitBtn" type="button" value="提交" />

<script type="text/javascript">
    var upd = $('#divContainner').imgUpload();
    $('#submitBtn').on('click', function () {
        upd.submit('/Account/ImageUpload', function (re) {
            alert(re);
        });
    });
</script>

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