图片上传之blob对象预览

来源：互联网发布：php 工作环境编辑：程序博客网时间：2024/05/21 17:26

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

于是在网上找了几个例子，查看其工作原理，发现都是利用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>

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

阅读全文

0 0