用法:
$('form').ajax_upload(function(response){
$('#target').replaceWith(response);
//or $('#target').append(response);
//.......
});
(function($){
$.fn.ajax_upload = function(callback){
if(this.attr('tagName') == 'FORM' && this.find('input[type=file]').size() > 0){
this.attr('target', 'upload_frame')
.submit(function(event){
$('body').append("<iframe id='upload_frame' name='upload_frame' style='width:0px;height:0px;border:0px;display:none;' src='about:blank'></iframe>");
$('body').append("<div id='frame_monitor' style='width:0px;height:0px;border:0px;display:none;'><script type='text/javascript'>"+
"var _id = setInterval(function(){"+
"var response = $('#upload_frame').contents().find('body').html();"+
"if(response != ''){"+
"clearInterval(_id);"+
"("+callback+")(response);"+
"$('#upload_frame').remove();"+
"$('#frame_monitor').remove();"+
"}"+
"},300)"+
"</script></div>");
});
}
};
})(jQuery);
分享到:
相关推荐
在开发Web应用时,尤其是...`imgbox`是一款基于jQuery的轻量级插件,用于创建弹出式的图片查看器。首先,在项目中引入`imgbox.js`和对应的CSS文件,然后初始化插件: ```html <script src="path/to/jquery.min.js"> ...
本篇将详细介绍一个基于Jquery的图片上传带裁剪功能的插件及其工作原理。 首先,标题中的“图片上传带裁剪功能Jquery插件”指的是一个JavaScript库,它利用jQuery框架来实现图片的上传和裁剪操作。jQuery是一个广泛...
首先,jQuery是基于JavaScript的库,它简化了DOM操作、事件处理和Ajax交互。在文件上传场景中,jQuery可以监听文件输入元素的变化事件,当用户选择文件后触发相应的处理函数,如显示文件名或预览文件内容。此外,...
ajax操作-伪ajax(iframe) ajax操作-时机选择 文件上传(3种方式)-1 文件上传-时机选择及预览-2 图片验证码 KindEditor基本使用和文件操作 作业 第25周 今日内容概要 博客系统示例预览 组合搜索组件 JSONP跨域...
而“可自定义刻度jQuery进度条”是一个基于jQuery的组件,允许开发者根据需求定制进度条的显示效果,如刻度数量、大小以及颜色等属性。这种进度条不仅功能强大,而且具有良好的视觉表现力,通过CSS3的特性可以实现...
`jQuery Uploader` 是一款基于 jQuery 的文件上传插件,它通过模拟 AJAX 方式实现文件的异步上传,从而为用户提供了无刷新的交互体验。这款插件广泛应用于网页上的文件上传功能,特别是在那些需要用户提交大量数据或...
10-27 7 jquery和ajax整合使用的方法 10-29 1 svn安装及常用操作 10-29 2 svn常用操作 实例讲解1 10-29 3 svn常用操作 实例讲解2 10-29 4 svn常用操作 实例讲解3 10-29 5 svn常用操作 实例讲解4 10-30 1 linux简介 ...
jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互。在这个组件中,jQuery可能用于绑定文件选择事件,监听文件读取进度,以及触发和控制SVG动画。例如,`$(document).ready()`函数...
AjaxUI是一种基于Ajax技术的用户界面设计框架,它通过Ajax技术实现了页面局部更新,提高了用户体验的同时减少了服务器的压力。AjaxUI支持各种动态效果和组件,能够帮助开发者快速构建复杂的前端应用。 ##### 2.2 ...
SimpleLog是基于Smarty模板引擎编写的一套界面简洁的博客系统,开源免费,程序与模板分离,方便在后台自定义模板,系统前台使用了jQuery框架,在jQuery基础上实现了Ajax功能,主要表现在日志评论加载以及用户注册上...
这个表单的设计和实现是基于`jquery.2.1.4.min.js`库,这是一款轻量级、功能强大的JavaScript库,极大地简化了DOM操作、事件处理和动画效果。 首先,让我们详细了解一下JavaScript。JavaScript是一种广泛应用于Web...
2. **AJAX提交**:利用jQuery的`.ajax()`方法,可以实现无刷新的表单提交,提高用户体验。 3. **插件和库**:jQuery有许多与表单相关的插件,如validate.js用于表单验证,select2提供高级选择器效果,bootstrap的...
首先,jQuery是一个轻量级的JavaScript库,它简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。在jQuery中,我们可以用简洁的语法来选择和操作HTML元素,如`$("#elementId")`选取ID为`elementId`的元素。...
3. **交互性**:通过JavaScript或jQuery(一个基于JavaScript的库)与HTML5 API结合,实现用户交互,如点击切换、触控滑动等。 4. **数据存储**:可能利用HTML5的离线存储(Web Storage)或IndexedDB技术,存储用户...
大型互联网开发技术:代码生成、网页静态化、基于JQuery的Web2.0页面开发、AJAX、SEO、网站调优、采集器、RSS/XML、网站防黑(防XSS攻击、防注入漏洞攻击、防CC攻击、防挂马、防盗链、敏感词过滤、广告帖智能过滤)...
【前端页面文件拖拽上传模块js代码示例】是一个实用的前端...总的来说,这个示例涵盖了前端开发中的多个重要概念,包括拖放交互、文件API、AJAX上传、DOM操作和UI设计,是学习和实践前端文件上传技术的一个良好起点。
动态上传并选择自定义模板功能,基于IO,伪静态,HttpHeader三种整合后的静态页生成方式,静态页分页高效率方式。Jquery动态无刷新评论功能。图片上传人性化的进度条以及提示。 适合用户 数据量一般的用户。 数据...
2. **jQuery.v1.8.3-min.js**:这是jQuery库的一个版本,一个广泛使用的JavaScript库,简化了DOM操作、事件处理和Ajax交互。在在线教育平台上,jQuery可能用于实现页面动态加载、用户交互和界面效果。 3. **...
05 css的伪类 06 css的选择器优先级 07 css的背景属性 第39章 01 css的文本属性与边框属性 02 css的列表属性与display属性 03 css的内外边距 04 css的内外边距补充 05 css的float属性 06 css的清除浮动 07 css的...
3. **JavaScript与jQuery**:模版中的JS弹出特效和菜单导航效果依赖于JavaScript和jQuery库,通过DOM操作、事件处理、AJAX异步通信等技术实现动态交互功能,提高用户操作的便捷性和系统反馈的即时性。 4. **响应式...