AjaxFileUpload 方法与原理分析

AjaxFileUpload需求

传统的form表单方式上传文件，  必然会刷新整个页面。 那么在不刷新界面的情况下实现文件的上传呢？

在 HTML4下， 聪明的程序员们发明了 ajax file upload 方式（form + hidden iframe方式）， 为本文介绍的对象。

 在HTML5中XMLHttpRequest实现了异步上传文件（介绍见 http://wenzhixin.net.cn/2013/11/28/ajax_file_upload_html5）。

开源项目

官网为 https://github.com/davgothic/AjaxFileUpload

此插件支持， 选择文件后，  立刻上传文件， 整体页面不刷新，  并可以根据后台返回的json报给用户上传的状况。

使用说明

此插件是基于jquery库，  需要引用jquery库，

    <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="../jquery.ajaxfileupload.js"></script>

文件控件（使用此插件 form都不用  写）：

    <form method="post" action="" enctype="multipart/form-data">
        <label>File Input: <input type="file" name="file" id="demo1" /></label>
        <div id="uploads">

        </div>
    </form>

使用此插件初始化控件：

    <script type="text/javascript">
        $(document).ready(function() {
            $("#demo1").AjaxFileUpload({
                onComplete: function(filename, response) {
                    $("#uploads").append(
                        $("<img />").attr("src", filename).attr("width", 200)
                    );
                }
            });
        });
    </script>

后台实现PHP参考：

<?php
/**
 * This is just an example of how a file could be processed from the
 * upload script. It should be tailored to your own requirements.
 */
// Only accept files with these extensions
$whitelist = array('jpg', 'jpeg', 'png', 'gif');
$name      = null;
$error     = 'No file uploaded.';
if (isset($_FILES)) {
    if (isset($_FILES['file'])) {
        $tmp_name = $_FILES['file']['tmp_name'];
        $name     = basename($_FILES['file']['name']);
        $error    = $_FILES['file']['error'];
        
        if ($error === UPLOAD_ERR_OK) {
            $extension = pathinfo($name, PATHINFO_EXTENSION);
            if (!in_array($extension, $whitelist)) {
                $error = 'Invalid file type uploaded.';
            } else {
                move_uploaded_file($tmp_name, $name);
            }
        }
    }
}
echo json_encode(array(
    'name'  => $name,
    'error' => $error,
));
die();

定制接口

四个定制接口， 可以定制内容包括：

1 上传url (定制自定义的 action)

2  提交submit事件 （例如对文件后缀校验不成功， 不上传）

3  选中文件change事件 （定制选中文件后的 等待进度条等）

4 提交完成后的响应事件 complete （提交成功后， 将提交结果添加到列表中）

    <form method="post" action="" enctype="multipart/form-data">
        <label>File Input: <input type="file" name="file" id="demo1" /></label>
    </form>
    <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="../jquery.ajaxfileupload.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var interval;
            function applyAjaxFileUpload(element) {
                $(element).AjaxFileUpload({
                    action: "upload.php",
                    onChange: function(filename) {
                        // Create a span element to notify the user of an upload in progress
                        var $span = $("<span />")
                            .attr("class", $(this).attr("id"))
                            .text("Uploading")
                            .insertAfter($(this));
                        $(this).remove();
                        interval = window.setInterval(function() {
                            var text = $span.text();
                            if (text.length < 13) {
                                $span.text(text + ".");
                            } else {
                                $span.text("Uploading");
                            }
                        }, 200);
                    },
                    onSubmit: function(filename) {
                        // Return false here to cancel the upload
                        /*var $fileInput = $("<input />")
                            .attr({
                                type: "file",
                                name: $(this).attr("name"),
                                id: $(this).attr("id")
                            });
                        $("span." + $(this).attr("id")).replaceWith($fileInput);
                        applyAjaxFileUpload($fileInput);
                        return false;*/
                        // Return key-value pair to be sent along with the file
                        return true;
                    },
                    onComplete: function(filename, response) {
                        window.clearInterval(interval);
                        var $span = $("span." + $(this).attr("id")).text(filename + " "),
                            $fileInput = $("<input />")
                                .attr({
                                    type: "file",
                                    name: $(this).attr("name"),
                                    id: $(this).attr("id")
                                });
                        if (typeof(response.error) === "string") {
                            $span.replaceWith($fileInput);
                            applyAjaxFileUpload($fileInput);
                            alert(response.error);
                            return;
                        }
                        $("<a />")
                            .attr("href", "#")
                            .text("x")
                            .bind("click", function(e) {
                                $span.replaceWith($fileInput);
                                applyAjaxFileUpload($fileInput);
                            })
                            .appendTo($span);
                    }
                });
            }
            applyAjaxFileUpload("#demo1");
        });
    </script>

实现原理

参考下面文章的说明：

http://wenzhixin.net.cn/2013/11/27/ajax_file_upload_iframe

此处结合此开源项目的代码介绍下：

1、 应用 AjaxFileUpload 到 file控件后， 此file控件就绑定了 change事件， 事件函数为 onChange

        return this.each(function() {
            var $this = $(this);
            if ($this.is("input") && $this.attr("type") === "file") {
                $this.bind("change", onChange);
            }
        });

2、 用户选择文件后， 触发 change事件， 调用 onChange 函数

     此函数， 先克隆一个 file控件， 并将 此克隆控件，  也使用 AjaxFileUpload  初始化（即绑定了 onChange函数，地位与原始控件相同了），

     并将此控件 插入到 原始控件前。

                $clone   = $element.removeAttr('id').clone().attr('id', id).AjaxFileUpload(options),
。。。。。
            // We append a clone since the original input will be destroyed
            $clone.insertBefore($element);

     后创建  隐藏的 iframe， 并初始化 iframe的 load事件（form提交后响应的框架）， 事件函数即为 响应处理函数：

                iframe   = createIframe(),
。。。。

            iframe.bind("load", {element: $clone, form: form, filename: filename}, onComplete);

     后创建提交的form， 将form的提交事件绑定为onSubmit， 并做提交动作：

                form     = createForm(iframe);
。。。。。
            form.append($element).bind("submit", {element: $clone, iframe: iframe, filename: filename}, onSubmit).submit();

3、 2步骤中form提交后， 文件上传成功， 在iframe的load事件被触发， 执行onComplete函数， 将执行结果进行处理， 处理完毕后将 onChange中创建的 form 和 iframe删除：

        function onComplete (e) {
            var $iframe  = $(e.target),
                doc      = ($iframe[0].contentWindow || $iframe[0].contentDocument).document,
                response = doc.body.innerHTML;

            if (response) {
                response = $.parseJSON(response);
            } else {
                response = {};
            }
            // 自定义的处理逻辑
            settings.onComplete.call(e.data.element, e.data.filename, response);
            
            // Remove the temporary form and iframe
            e.data.form.remove();
            $iframe.remove();
        }

change事件只生效一次说明

如果对 file 控件应用 ajaxfileupload 控件初始化后， 接着设置 一个附加的 change 事件， 在第一用户选择文件上传后， 会丢失， 是因为 文件控件被替换为clone体， 但是clone体没带有old event， 生效代码为 clone参数为空， 意味着浅拷贝：

        function onChange(e) {
            var $element = $(e.target),
                id       = $element.attr('id'),
                $clone   = $element.removeAttr('id').clone().attr('id', id).AjaxFileUpload(options),
                filename = $element.val().replace(/.*(/|\)/, ""),
                iframe   = createIframe(),
                form     = createForm(iframe);

            // We append a clone since the original input will be destroyed
            $clone.insertBefore($element);

解决方法，使用代理：

$(document).on('change', '#upload', function() {

});

参考：

http://wenzhixin.net.cn/2013/11/26/jquery_file_upload_change_once