AjaxUpload异步上传插件

 

 

1、使用

引入 ajax_upload.js

<script type="text/javascript" src="js/ajax_upload/ajax_upload.js"></script>

 

为 form 添加 id 属性

<form id="upload_form" action="upload.jsp" method="post" enctype="multipart/form-data">
    <input id="upload_file" type="file" name="file1" placeholder="请选择文件">
    <br /><br />
    <input type="button" value="上传" onclick="upload()">
</form>

 

在点击按钮时调用 AjaxUpload 函数，传入 form 的 id 值、回调函数

js 代码

 

function upload() {
    if(!document.getElementById("upload_file").value) {
        alert("请选择文件。");
        return;
    }
    // 执行异步上传的函数
    ajax_upload("upload_form", function(data) {
        var json = eval("(" + data + ")");
        if(json["error"] == "0") {
            alert("上传成功。");
        }
    });
}

 

服务器端返回的信息可以是任何类型，只要自定义的回调函数可以处理即可

 

 

2、原理

如果我们让 form 的 target 属性指向某个隐藏的 iframe，在提交表单时，响应信息会在 iframe 框架进行显示，而“外面”的页面不会刷新，从而达到“无刷新异步”上传的效果

插件函数分为以下几步：

1）随机生成一个字符串，用作 iframe 的 id 和 name 属性值

2）动态创建一个 iframe，设置 id 和 name 属性值，应该是隐藏的

3）根据 id 获取到 form，为它设置 target 属性值

4）提交表单

5）在 iframe 的 onload 函数里面调用回调函数，把响应作为其参数，然后移除 iframe，移除 form 的 target 属性

代码

 

/**
 * form_id - 需要提交的form的id
 * callback - 回调函数
 */
function ajax_upload(form_id, callback) {

    // 首先创建一个iframe
    var iframeName = "AjaxFrame_";
    for(var i = 0; i < 10; i++)
        iframeName += Math.floor(Math.random() * 10);

    iframeName += "_" + (new Date()).getTime();
    var iframe = document.createElement("iframe");

    iframe.setAttribute("name", iframeName);
    iframe.setAttribute("id", iframeName);
    iframe.setAttribute("width", 1);
    iframe.setAttribute("height", 1);

    iframe.style.display = "none";

    // 获取body
    var body = document.getElementsByTagName("body")[0];

    // 把iframe插入到body中
    body.appendChild(iframe);


    // 获取form
    var form = document.getElementById(form_id);
    // 设置target属性
    form.setAttribute("target", iframeName);
    // 提交表单
    form.submit();

    // 执行回调函数
    iframe.onload = function() {
        var resp = window.frames[ iframeName ].document.body.innerHTML;
        callback(resp);
        // 删除iframe
        body.removeChild(this);
        // 移除form的target属性
        form.removeAttribute("target");
    }
}

 

3、示例代码

点击下载

 

ajax_upload.js