【seaJS】扩展jQuery组件之ajaxFileUpload

╰半橙微兮° 2022-06-11 02:54 173阅读 0赞

# 定义ajaxFileUpload.js #

#### 创建ajaxUpload.js文件 ####

(function (factory) { if (typeof define === 'function') { // 如果define已被定义，模块化代码 define('ajaxUpload', ['lib/jquery'], function (require, exports, moudles) { factory(require('lib/jquery')); // 初始化插件 return jQuery; // 返回jQuery }); } else { // 如果define没有被定义，正常执行jQuery factory(jQuery); } }(function ($) { jQuery = $; console.log('init'); $.extend({ createUploadIframe: function (id, uri) { //create frame var frameId = 'jUploadFrame' + id; if (window.ActiveXObject) { if (jQuery.browser.version == "9.0") { io = document.createElement('iframe'); io.id = frameId; io.name = frameId; } else if (jQuery.browser.version == "6.0" || jQuery.browser.version == "7.0" || jQuery.browser.version == "8.0") { var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />'); if (typeof uri == 'boolean') { io.src = 'javascript:false'; } else if (typeof uri == 'string') { io.src = uri; } } } else { var io = document.createElement('iframe'); io.id = frameId; io.name = frameId; } io.style.position = 'absolute'; io.style.top = '-1000px'; io.style.left = '-1000px'; document.body.appendChild(io); return io; }, createUploadForm: function (id, fileElementId) { //create form var formId = 'jUploadForm' + id; var fileId = 'jUploadFile' + id; var form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>'); var oldElement = jQuery('#' + fileElementId); var newElement = jQuery(oldElement).clone(); jQuery(oldElement).attr('id', fileId); jQuery(oldElement).before(newElement); jQuery(oldElement).appendTo(form); //set attributes jQuery(form).css('position', 'absolute'); jQuery(form).css('top', '-1200px'); jQuery(form).css('left', '-1200px'); jQuery(form).appendTo('body'); return form; }, ajaxFileUpload: function (s) { // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout s = jQuery.extend({}, jQuery.ajaxSettings, s); var id = s.fileElementId; var form = jQuery.createUploadForm(id, s.fileElementId); var io = jQuery.createUploadIframe(id, s.secureuri); var frameId = 'jUploadFrame' + id; var formId = 'jUploadForm' + id; if (s.global && !jQuery.active++) { // Watch for a new set of requests jQuery.event.trigger("ajaxStart"); } var requestDone = false; // Create the request object var xml = {}; if (s.global) { jQuery.event.trigger("ajaxSend", [xml, s]); } var uploadCallback = function (isTimeout) { // Wait for a response to come back var io = document.getElementById(frameId); try { if (io.contentWindow) { xml.responseText = io.contentWindow.document.body ? io.contentWindow.document.body.innerHTML : null; xml.responseXML = io.contentWindow.document.XMLDocument ? io.contentWindow.document.XMLDocument : io.contentWindow.document; } else if (io.contentDocument) { xml.responseText = io.contentDocument.document.body ? io.contentDocument.document.body.innerHTML : null; xml.responseXML = io.contentDocument.document.XMLDocument ? io.contentDocument.document.XMLDocument : io.contentDocument.document; } } catch (e) { jQuery.handleError(s, xml, null, e); } if (xml || isTimeout == "timeout") { requestDone = true; var status; try { status = isTimeout != "timeout" ? "success" : "error"; // Make sure that the request was successful or notmodified if (status != "error") { // process the data (runs the xml through httpData regardless of callback) var data = jQuery.uploadHttpData(xml, s.dataType); if (s.success) { // ifa local callback was specified, fire it and pass it the data s.success(data, status); } ; if (s.global) { // Fire the global callback jQuery.event.trigger("ajaxSuccess", [xml, s]); } ; } else { jQuery.handleError(s, xml, status); } } catch (e) { status = "error"; jQuery.handleError(s, xml, status, e); } ; if (s.global) { // The request was completed jQuery.event.trigger("ajaxComplete", [xml, s]); } ; // Handle the global AJAX counter if (s.global && !--jQuery.active) { jQuery.event.trigger("ajaxStop"); } ; if (s.complete) { s.complete(xml, status); } ; jQuery(io).unbind(); setTimeout(function () { try { jQuery(io).remove(); jQuery(form).remove(); } catch (e) { jQuery.handleError(s, xml, null, e); } }, 100); xml = null; } ; } // Timeout checker if (s.timeout > 0) { setTimeout(function () { if (!requestDone) { // Check to see ifthe request is still happening uploadCallback("timeout"); } }, s.timeout); } try { var form = jQuery('#' + formId); jQuery(form).attr('action', s.url); jQuery(form).attr('method', 'POST'); jQuery(form).attr('target', frameId); if (form.encoding) { form.encoding = 'multipart/form-data'; } else { form.enctype = 'multipart/form-data'; } jQuery(form).submit(); } catch (e) { jQuery.handleError(s, xml, null, e); } if (window.attachEvent) { document.getElementById(frameId).attachEvent('onload', uploadCallback); } else { document.getElementById(frameId).addEventListener('load', uploadCallback, false); } return { abort: function () { } }; }, uploadHttpData: function (r, type) { var data = !type; data = type == "xml" || data ? r.responseXML : r.responseText; // ifthe type is "script", eval it in global context if (type == "script") { jQuery.globalEval(data); } // Get the JavaScript object, ifJSON is used. if (type == "json") { eval("data = " + data); } // evaluate scripts within html if (type == "html") { jQuery("<div>").html(data).evalScripts(); } return data; } }); }));

# 配置seaJS参数 #

seajs.config({
        charset: 'utf-8',
        timeout: 5 * 60 * 1000,
        debug: 0,
        alias: {
        },
        map: [['lib/jquery', 'lib/jquery.js?max_age=2530900&ver=201409678'], ['ajaxUpload', 'lib/ajaxUpload.js?max_age=2530900&ver=201409678']]
    });

# 页面加载seaJS #

seajs.use([ 'lib/jquery','ajaxUpload'], function($) { 
    
        });

# 调用上传函数 #

function importClick(){
            $.ajaxFileUpload({
                url:"${pageContext.request.contextPath}/import.do",
                secureuri: false,
                fileElementId:"uploadFile",
                dataType: 'text',
                type:"POST",
                success: function (data, status){
                },
                error: function (data, status, e){
                }
            }); 
        }

# 页面代码 #

<input type="file" name="uploadFile" multiple id="uploadFile" accept=".xls,.xlsx"/></a>

发表评论取消回复

表情：

评论列表（有 0 条评论，173人围观）

还没有评论，来说两句吧...

相关阅读

相关 seaJs学习笔记之seaJs配置方法

　　seaJs在之前已经为大家介绍了很多，今天为大家介绍一下seaJs配置参数的方法。我们可以配置根目录，可以指定模块名字等。很多比较实用的配制方法，今天将为大家揭晓。

旧城等待，/ 2022年09月18日 00:54/ 0 赞/ 164 阅读

相关 seaJs学习笔记之seaJs的准备

　　Javascript模块化就来解决javascript中冲突、性能和依赖问题的。针对javascript模块化，我个人认为使用sea.js是比较好的。sea.js是一个适合

妖狐艹你老母/ 2022年09月17日 15:18/ 0 赞/ 140 阅读

相关 jquery ajaxfileupload插件的使用

jquery ajaxfileupload插件的使用，记下笔记方便后面查看![微笑][smile.gif] 上传页面： <!DOCTYPE HTML PUBLIC "-//

布满荆棘的人生/ 2022年08月09日 09:59/ 0 赞/ 170 阅读

相关 jquery插件--ajaxfileupload.js上传文件原理分析

英文注解应该是原作者写的吧~说实话，有些if判断里的东西我也没太弄明白，但是大致思路还是OK的。 jQuery.extend({ createU

ゝ一世哀愁。/ 2022年08月07日 01:35/ 0 赞/ 171 阅读

相关【jquery扩展】jquery扩展方法extend(),以及扩展插件

这段时间看关于jquery自定义插件,扩展自己的插件看到了两篇感觉特别好的文章,于是转载过来. 第一篇转载地址,博客园的前辈写的：http://www.cnblogs.co

素颜马尾好姑娘i/ 2022年08月06日 09:28/ 0 赞/ 192 阅读

相关 jquery extend jquery插件扩展

JQuery的extend扩展方法： jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。 jQuery.fn.extend(obj

小鱼儿/ 2022年08月05日 05:04/ 0 赞/ 193 阅读

相关 seaJS无法引入JQuery

这个问题对新手来说还是挺麻烦的。 seaJS引入JQuery之后，却无法正常使用，打印$，也是null。确认代码没有问题后，那么问题就只能出在seaJS与JQuer

一时失言乱红尘/ 2022年07月16日 13:43/ 0 赞/ 309 阅读

相关【seaJS】扩展jQuery组件之ajaxFileUpload

定义ajaxFileUpload.js 创建ajaxUpload.js文件 (function (factory) { if (typeof define

╰半橙微兮°/ 2022年06月11日 02:54/ 0 赞/ 174 阅读

相关 jQuery插件之ajaxFileUpload

jQuery插件之ajaxFileUpload ajaxFileUpload.js 很多同名的，因为做出来一个很容易。我用的是这个:[https://github.c

桃扇骨/ 2022年06月01日 23:58/ 0 赞/ 186 阅读

相关 jQuery扩展插件

一、jQuery扩展插件 1. 扩展jQuery的工具方法： $.extend(object) 2. 扩展jQuery对象的方法： $.fn.extend(objec

末蓝、/ 2022年05月30日 04:51/ 0 赞/ 488 阅读