zoukankan      html  css  js  c++  java
  • 原创ajax文件无刷新上传

    function submitFun() {
                var files = [document.getElementById('sc')];
                ajaxUploadFile({url:'Index.aspx','files':files,success:function(){alert('success');}});

            }


            //{url, files, data,success,error}
            function ajaxUploadFile(ajaxOptions) {
                var iframeName = 'tmp_iframe';
                var newform, iframe;
                var body = document.body;
                //服务器的返回值
                var xml = {};
                var url = ajaxOptions.url;
                var files = ajaxOptions.files;
                var data = ajaxOptions.data;
                var success = ajaxOptions.success;
                var error = ajaxOptions.error;

                //一个对象数组,对象有两个属性,一个表示临时input文件上传框,一个表示原始文件上传框
                var fileArr = [];

                //提交完成或者超时后的回调函数
                var uploadedCallback = function(timeout) {
                    try {
                        //如果不是因为超时才调用此回调函数
                        if ('timeout' != timeout) {
                            if (iframe.contentWindow) {
                                xml.responseText = iframe.contentWindow.document.body ? iframe.contentWindow.document.body.innerHTML : null;
                                xml.responseXML = iframe.contentWindow.document.XMLDocument ? iframe.contentWindow.document.XMLDocument : io.contentWindow.document;

                            } else if (iframe.contentDocument) {
                                xml.responseText = io.contentDocument.document.body ? iframe.contentDocument.document.body.innerHTML : null;
                                xml.responseXML = io.contentDocument.document.XMLDocument ? iframe.contentDocument.document.XMLDocument : io.contentDocument.document;
                            }
                            success(xml.responseText, xml.responseXML);
                        } else {

                        }
                    } catch (e) {
                        if(error)
                        {
                             error(e);
                        }
                    }
                    div.parentNode.removeChild(div);
                    //newform.parentNode.removeChild(newform);
                    //iframe.parentNode.removeChild(iframe);
                }

                /*
                //创建一个新的form,用于暂时保存上传文件框,hidden控件等
                var newform = document.createElement('form');
                newform.action = url;
                newform.enctype = 'multipart/form-data';
                newform.method = 'post';
                newform.target = iframeName;
                newform.style.display = 'none';
                newform.id = "newform";
                newform.name = 'newfrom';
                
                
                //创建一个IFrame,用于做新的form的提交后显示服务器返回内容的窗口
                var iframe = document.createElement('iframe');
                iframe.name = iframeName;
                //将newform和iframe添加到body
                body.appendChild(iframe);
                body.appendChild(newform);
                */
                var str = '<form action="' + url + '" enctype="multipart/form-data" method="post" target="' + iframeName + '"></form><iframe name="' + iframeName + '"></iframe>';
                var div = document.createElement('div');
                div.innerHTML = str;
                div.style.display = "none";
                newform = div.getElementsByTagName('form')[0];
                iframe = div.getElementsByTagName('iframe')[0];
                body.appendChild(div);
                iframe.onload = uploadedCallback;
                if (iframe.attachEvent) {
                    iframe.attachEvent('onload', uploadedCallback);
                }

                for (var i = 0; i < files.length; i++) {
                    var newfile = files[i].cloneNode(true);
                    fileArr.push({ tmpfile: newfile, orifile: files[i] });
                    files[i].parentNode.insertBefore(newfile, files[i]);
                    newform.appendChild(files[i]);
                }
                //根据一些自定义的数据,创建input[type=file],添加到新的form
                if (data) {
                    for (var attr in data) {
                        var hidden = document.createElement('input');
                        hidden.type = 'hidden';
                        hidden.name = attr;
                        hidden.value = data[attr];
                        newform.appendChild(hidden);
                    }
                }
                if (ajaxOptions.timeout) {
                    setTimeout(function() { uploadedCallback('timeout'); }, ajaxOptions.timeout);
                }
                //提交form
                newform.submit();
                //恢复原始文件上传框
                for (i = 0; i < fileArr.length; i++) {
                    fileArr[i].tmpfile.parentNode.insertBefore(fileArr[i].orifile, fileArr[i].tmpfile);
                    fileArr[i].tmpfile.parentNode.removeChild(fileArr[i].tmpfile, true);
                }
                //newform.parentNode.removeChild(newform);
                //iframe.parentNode.removeChild(iframe);
            }
  • 相关阅读:
    游戏方案
    团队介绍
    【面向对象程序设计】作业四
    FIFO与LRU实现(Java)
    spring事务介绍
    微信抢红包算法
    Hibernate Dao映射配置通用接口类反射获取加载calass实例
    股票两次买卖最大收益(java)
    Eclipse安装JD-Eclipse反编译插件看源码
    Java GC调优
  • 原文地址:https://www.cnblogs.com/mxw09/p/2257561.html
Copyright © 2011-2022 走看看