文件异步上传

async_upload.js

define(['jquery', 'bootstrap'], function (require, exports) {
    "use strict";

    var $ = require('jquery');

    /**
     * 上传单个文件
     * @param $form 要监控的表单对象
     * @param $file 要监控的文件对象
     * @param $img 完成后显示结果的控件
     */
    function upload($form, $file, $img) {
        var dfd = $.Deferred();
        $form.submit(function (e) {
            var el = $(e.currentTarget);
            var $btn = $('button[type="submit"]', $form);

            var ifr = document.createElement('iframe');

            ifr.setAttribute('src', '');
            ifr.setAttribute('id', 'picupload');
            ifr.setAttribute('name', 'uploadpic');
            ifr.style.display = 'none';
            document.body.appendChild(ifr);
            el.attr('target', 'uploadpic');

            var loadingText = $btn.attr('data-loading-text');
            if (loadingText == undefined || loadingText == '') {
                $btn.attr('data-loading-text', '<i class="icon-spin icon-spinner"></i> ' + $btn.text());
            }
            $btn.button('loading');

            $(ifr).on('load', function () {
                var doc = ifr.contentWindow.document, str = $('body', doc).text();
                var result = $.parseJSON(str);
                $(ifr).remove();
                $btn.button('reset');
                if (result.success) {
                    el[0].reset();
                    if ($img != undefined)
                        $img.attr('src', result.data.small);

                } else {
                    $('.errors', $form).text(result.msg);
                }
                dfd.resolve(result);
            });

        });
        return dfd.promise();
    }


    function multiUpload($form) {
        var $btn = $('button[type="submit"]', $form);
        var dfd = $.Deferred();

        //监听上传照片
        $form.submit(function (e) {
            var el = e.currentTarget,
                fileArr = [],
                files = $('input[type="file"]', $form);

            files.each(function (i, file) {
                if ($(file).val().trim() != '') {
                    fileArr.push($(file))
                }
            });
            var loadingText = $btn.attr('data-loading-text');
            if (loadingText == undefined || loadingText == '') {
                $btn.attr('data-loading-text', '<i class="icon-spin icon-spinner"></i> ' + $btn.text());
            }
            $btn.button('loading');

            var ifr = document.createElement('iframe');

            ifr.setAttribute('src', '');
            ifr.setAttribute('id', 'picupload');
            ifr.setAttribute('name', 'uploadpic');
            ifr.style.display = 'none';
            document.body.appendChild(ifr);
            $(el).attr('target', 'uploadpic');
            $(ifr).on('load', function () {
                var doc = ifr.contentWindow.document, str = $('body', doc).text();
                var result = $.parseJSON(str);
                $(ifr).remove();

                if (result.success) {
                    $(el)[0].reset();
                    $btn.button('reset');
                    $.each(fileArr, function () {
                        this.parent().remove();
                    });
                } else {
                    $('.errors', $form).text(result.msg);
                }
                dfd.resolve(result);
            });

        });
        return dfd.promise();
    }

    exports.upload = upload;
    exports.multiUpload = multiUpload;
});