画像アップロードのblobオブジェクトプレビュー

2565 ワード

先端アプリケーション

今日同僚に聞いたところ、一部の画像のアップロードコントロールは、先にアップロードする必要がなく、プレビューすることができ、デスクトップブラウザと携帯電話ブラウザが互換性があるという.
そこでネット上でいくつかの例を探して、その動作原理を見て、すべて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;
    };

次に例を示します.


    


    var upd = $('#divContainner').imgUpload();
    $('#submitBtn').on('click', function () {
        upd.submit('/Account/ImageUpload', function (re) {
            alert(re);
        });
    });

このコードは簡単なテストに合格しました.漏れがあれば、指摘してください.

nodejs学習ノート2:閉パッケージと非同期プログラミング

pythonのフォーマット出力および関数format