`

伪Ajax上传,基于jQuery。

阅读更多
用法:
$('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);
分享到:
评论

相关推荐

    JQuery 实现Android伪多图上传

    在开发Web应用时,尤其是...`imgbox`是一款基于jQuery的轻量级插件,用于创建弹出式的图片查看器。首先,在项目中引入`imgbox.js`和对应的CSS文件,然后初始化插件: ```html &lt;script src="path/to/jquery.min.js"&gt; ...

    图片上传带裁剪功能Jquery插件

    本篇将详细介绍一个基于Jquery的图片上传带裁剪功能的插件及其工作原理。 首先,标题中的“图片上传带裁剪功能Jquery插件”指的是一个JavaScript库,它利用jQuery框架来实现图片的上传和裁剪操作。jQuery是一个广泛...

    jQuery css3文件上传动画界面代码

    首先,jQuery是基于JavaScript的库,它简化了DOM操作、事件处理和Ajax交互。在文件上传场景中,jQuery可以监听文件输入元素的变化事件,当用户选择文件后触发相应的处理函数,如显示文件名或预览文件内容。此外,...

    最新Python3.5零基础+高级+完整项目(28周全)培训视频学习资料

    ajax操作-伪ajax(iframe) ajax操作-时机选择 文件上传(3种方式)-1 文件上传-时机选择及预览-2 图片验证码 KindEditor基本使用和文件操作 作业 第25周 今日内容概要 博客系统示例预览 组合搜索组件 JSONP跨域...

    可自定义刻度jQuery进度条

    而“可自定义刻度jQuery进度条”是一个基于jQuery的组件,允许开发者根据需求定制进度条的显示效果,如刻度数量、大小以及颜色等属性。这种进度条不仅功能强大,而且具有良好的视觉表现力,通过CSS3的特性可以实现...

    jquery.uploader

    `jQuery Uploader` 是一款基于 jQuery 的文件上传插件,它通过模拟 AJAX 方式实现文件的异步上传,从而为用户提供了无刷新的交互体验。这款插件广泛应用于网页上的文件上传功能,特别是在那些需要用户提交大量数据或...

    韩顺平PHP JS JQUERY 所有视频下载种子 货真价实

    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简介 ...

    HTML5 SVG文件上传组件动画.zip

    jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互。在这个组件中,jQuery可能用于绑定文件选择事件,监听文件读取进度,以及触发和控制SVG动画。例如,`$(document).ready()`函数...

    AjaxUI:鼠标拖拽

    AjaxUI是一种基于Ajax技术的用户界面设计框架,它通过Ajax技术实现了页面局部更新,提高了用户体验的同时减少了服务器的压力。AjaxUI支持各种动态效果和组件,能够帮助开发者快速构建复杂的前端应用。 ##### 2.2 ...

    Simple-log PHP博客 v1.5

    SimpleLog是基于Smarty模板引擎编写的一套界面简洁的博客系统,开源免费,程序与模板分离,方便在后台自定义模板,系统前台使用了jQuery框架,在jQuery基础上实现了Ajax功能,主要表现在日志评论加载以及用户注册上...

    4.zip_JavaScript/JQuery_Java_

    这个表单的设计和实现是基于`jquery.2.1.4.min.js`库,这是一款轻量级、功能强大的JavaScript库,极大地简化了DOM操作、事件处理和动画效果。 首先,让我们详细了解一下JavaScript。JavaScript是一种广泛应用于Web...

    HTML5超酷表单展示效果.zip

    2. **AJAX提交**:利用jQuery的`.ajax()`方法,可以实现无刷新的表单提交,提高用户体验。 3. **插件和库**:jQuery有许多与表单相关的插件,如validate.js用于表单验证,select2提供高级选择器效果,bootstrap的...

    testApp:JQuery、CSS 和自定义动画 Node.js

    首先,jQuery是一个轻量级的JavaScript库,它简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。在jQuery中,我们可以用简洁的语法来选择和操作HTML元素,如`$("#elementId")`选取ID为`elementId`的元素。...

    基于HTML5-CSS3的相册设计与实现.doc

    3. **交互性**:通过JavaScript或jQuery(一个基于JavaScript的库)与HTML5 API结合,实现用户交互,如点击切换、触控滑动等。 4. **数据存储**:可能利用HTML5的离线存储(Web Storage)或IndexedDB技术,存储用户...

    史上最好传智播客就业班.net培训教程60G 不下会后悔

    大型互联网开发技术:代码生成、网页静态化、基于JQuery的Web2.0页面开发、AJAX、SEO、网站调优、采集器、RSS/XML、网站防黑(防XSS攻击、防注入漏洞攻击、防CC攻击、防挂马、防盗链、敏感词过滤、广告帖智能过滤)...

    前端页面文件拖拽上传模块js代码示例

    【前端页面文件拖拽上传模块js代码示例】是一个实用的前端...总的来说,这个示例涵盖了前端开发中的多个重要概念,包括拖放交互、文件API、AJAX上传、DOM操作和UI设计,是学习和实践前端文件上传技术的一个良好起点。

    asp.net 细粒权限源码,浪曦图库系统

    动态上传并选择自定义模板功能,基于IO,伪静态,HttpHeader三种整合后的静态页生成方式,静态页分页高效率方式。Jquery动态无刷新评论功能。图片上传人性化的进度条以及提示。 适合用户 数据量一般的用户。 数据...

    php在线教育平台源码

    2. **jQuery.v1.8.3-min.js**:这是jQuery库的一个版本,一个广泛使用的JavaScript库,简化了DOM操作、事件处理和Ajax交互。在在线教育平台上,jQuery可能用于实现页面动态加载、用户交互和界面效果。 3. **...

    python入门到高级全栈工程师培训 第3期 附课件代码

    05 css的伪类 06 css的选择器优先级 07 css的背景属性 第39章 01 css的文本属性与边框属性 02 css的列表属性与display属性 03 css的内外边距 04 css的内外边距补充 05 css的float属性 06 css的清除浮动 07 css的...

    精美后台管理系统模版(html源文件)

    3. **JavaScript与jQuery**:模版中的JS弹出特效和菜单导航效果依赖于JavaScript和jQuery库,通过DOM操作、事件处理、AJAX异步通信等技术实现动态交互功能,提高用户操作的便捷性和系统反馈的即时性。 4. **响应式...

Global site tag (gtag.js) - Google Analytics