ajaxFileUpload.js 插件的demo
来源:互联网 发布:带网络接口的av功放 编辑:程序博客网 时间:2024/05/16 09:59
依赖js文件:
<!-- jQuery 核心文件 --> <script src="../3rd/jquery/dist/jquery.js"></script><!-- ajaxFileUpload上传插件 --> <script src="../3rd/ajaxfileupload/ajaxfileupload.js" type="text/javascript"></script>
html代码:
<!-- ajaxFileUpload的上传功能 --> <div class="form-group"> <div class="col-sm-5"> <label for="file1">安装包上传</label> <input class="form-control" type="file" id="file1" name="file" /><br /> </div> </div>
js代码:
/* 上传安装包:ajax上传插件使用 */function ajaxFileUploadd() { $.ajaxFileUpload ( { url: '/upgrade-release/rpc?method=/proHandRelea/uploadSetupPack', //用于文件上传的服务器端请求地址 secureuri: false, //是否需要安全协议,一般设置为false fileElementId: 'file1', //文件上传域的ID dataType: 'json', //返回值类型 一般设置为json type: 'post', success: function(data,status) //服务器成功响应处理函数 { var dataJson = jQuery.parseJSON(data); if(status == 'success') { // 上传成功 if(dataJson.resultMsg == 1) { // 3、基本信息保存 submitBasicMsg(); } if(dataJson.resultMsg == 0) { // 上传失败 doFalAlert("上传文件失败,发布失败!请重新上传文件再发布!"); } } }, error: function (data, status, e)//服务器响应失败处理函数 { // alert(e); doFalAlert("系统异常,上传文件路径异常!"); } } ) return false;}
注意问题:
可能会出现:上传报错 jQuery.handleError is not a function这个异常
分析并解决:handlerError只在jquery-1.4.2之前的版本中存在,jquery-1.4.2之后的版本中都没有这个函数了。
因此在jquery高级版本中将这个函数添加上 ,问题解决。 以下是添加过handlerError方法的ajaxupload.js 文件,直接拿过去用即可。
jQuery.extend({ createUploadIframe: function(id, uri){//create frame var frameId = 'jUploadFrame' + id; var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"';if(window.ActiveXObject){ if(typeof uri== 'boolean'){iframeHtml += ' src="' + 'javascript:false' + '"'; } else if(typeof uri== 'string'){iframeHtml += ' src="' + uri + '"'; }}iframeHtml += ' />';jQuery(iframeHtml).appendTo(document.body); return jQuery('#' + frameId).get(0); }, createUploadForm: function(id, fileElementId, data){//create formvar formId = 'jUploadForm' + id;var fileId = 'jUploadFile' + id;var form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');if(data){for(var i in data){jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);}}var oldElement = jQuery('#' + fileElementId);var newElement = jQuery(oldElement).clone();jQuery(oldElement).attr('id', fileId);jQuery(oldElement).before(newElement);jQuery(oldElement).appendTo(form);//set attributesjQuery(form).css('position', 'absolute');jQuery(form).css('top', '-1200px');jQuery(form).css('left', '-1200px');jQuery(form).appendTo('body');return form; }, handleError: function( s, xhr, status, e ) { // If a local callback was specified, fire it if ( s.error ) { s.error.call( s.context || s, xhr, status, e ); } // Fire the global callback if ( s.global ) { (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] ); } }, 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 = new Date().getTime() var form = jQuery.createUploadForm(id, s.fileElementId, (typeof(s.data)=='undefined'?false:s.data));var io = jQuery.createUploadIframe(id, s.secureuri);var frameId = 'jUploadFrame' + id;var formId = 'jUploadForm' + id; // Watch for a new set of requests if ( s.global && ! jQuery.active++ ){jQuery.event.trigger( "ajaxStart" );} var requestDone = false; // Create the request object var xml = {} if ( s.global ) jQuery.event.trigger("ajaxSend", [xml, s]); // Wait for a response to come back var uploadCallback = function(isTimeout){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 a local callback was specified, fire it and pass it the data if ( s.success ) s.success( data, status ); // Fire the global callback if( s.global ) jQuery.event.trigger( "ajaxSuccess", [xml, s] ); } else jQuery.handleError(s, xml, status); } catch(e) { status = "error"; jQuery.handleError(s, xml, status, e); } // The request was completed if( s.global ) jQuery.event.trigger( "ajaxComplete", [xml, s] ); // Handle the global AJAX counter if ( s.global && ! --jQuery.active ) jQuery.event.trigger( "ajaxStop" ); // Process result 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(){ // Check to see if the request is still happening if( !requestDone ) 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){jQuery(form).attr('encoding', 'multipart/form-data'); } else{jQuery(form).attr('enctype', 'multipart/form-data'); } jQuery(form).submit(); } catch(e) { jQuery.handleError(s, xml, null, e); }jQuery('#' + frameId).load(uploadCallback); return {abort: function () {}}; }, uploadHttpData: function( r, type ) { var data = !type; data = type == "xml" || data ? r.responseXML : r.responseText; data = data.replace("<pre>",""); data = data.replace("</pre>",""); // If the type is "script", eval it in global context if ( type == "script" ) jQuery.globalEval( data ); // Get the JavaScript object, if JSON is used. if ( type == "json" ){ data = r.responseText; var start = data.indexOf(">"); if(start != -1) { var end = data.indexOf("<", start + 1); if(end != -1) { data = data.substring(start + 1, end); } } eval( "data = " + data ); } // evaluate scripts within html if ( type == "html" ) jQuery("<div>").html(data).evalScripts(); return data; }})
0 0
- ajaxFileUpload.js 插件的demo
- jquery插件ajaxFileUpload的demo
- ajaxfileupload.js异步上传文件插件(完整demo)
- ajaxFileUpload.js插件使用
- JQuery插件:ajaxFileUpload.js
- jQuery 关于ajaxfileupload.js插件的逐步解析(ajaxfileupload.js第二弹)
- 关于ajaxfileupload.js插件及其多上传的使用
- jquery ajaxFileUpload.js插件支持多文件上传的方法
- ajaxfileupload.js上传插件的使用(php版)
- ajaxFileUpload插件的使用 ------------------插件
- ajaxfileupload.js的使用
- jquery ajaxfileupload插件的使用
- ajaxfileupload.js 文件上传插件之改进
- 上传文件(可用ajaxfileupload.js插件)
- js使用AjaxFileupload插件实现文件上传
- 关于ajaxfileupload.js的使用
- 无bug的ajaxfileupload.js
- ajaxFileUpload.js 的一些Bug
- Tomcat下配置JNDI数据库连接池并使用
- Django model字段类型清单
- SQL注入中的1=1
- 二叉树的层次遍历+每一层单行输出
- 材质素材
- ajaxFileUpload.js 插件的demo
- SpringMVC的定时任务的配置
- git 常用命令总结
- JAVA的静态变量、静态方法、静态类
- Phonegap、Cordova、Ionic 开发环境搭建(Windows OS)
- Java中的微信公众号开发(一)
- Linux驱动开发中s3c2410关于gpio的内核导出函数的解读
- 德雷福斯(Dreyfus)技能获取模型
- tomcat7性能优化