`
wei5201
  • 浏览: 187569 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery 插件ajaxupload 的简单应用

 
阅读更多
同事 一次需要ajax 上传某文件, 正好以前用过一种,叫ajaxupload,是jquery的一个插件. 于是几分钟帮同事搞定.代码如下:

    var button = $('#upload_button');  //定义能够上传文件的按钮,就是一个普通的button
    var fileType = "zip",fileNum = "one";   //定义能够上传的文件类型,当然要靠后面的onSubmit中的js去做判断
    new AjaxUpload(button,{
        action: '${ctp}/app/assistVerify/importShanghairReportAction.shtml',
        name: 'shanghaiFile',   //这相当于<input type = "file" name = "shanghaiFile"/>
        onSubmit : function(file, ext){
            if(fileType == "zip")
            {
                if (ext && /^(zip|rar)$/.test(ext)){
                    this.setData({
                        'info': '文件类型为压缩包' //这个info 暂时无效
                    });
                } else {
                    alert('非压缩包类型文件,请重传');
                    return false;               
                }
            }
                        
            button.text('导入上海资信中...');
            
            if(fileNum == 'one')  //同时上传的文件数不能超过一个
                this.disable();
            
        },
        onComplete: function(file, response){ //上传完毕后的操作
            if(response != "success")
                alert(response);
                
            button.text('导入上海资信');                        
            this.enable();
            
            if(response == "success");
                alert("导入上海资信成功");   

            //有了response我们能做任何事了,返回的文件名称,文件路径等我们可以随意操作的!
        }
    });



当然这些代码得靠 js 才能运行,请把上面的代码加在 $(document).ready的代码块中.同时请引入 ajaxupload.js,见附件下载!

分享到:
评论
1 楼 chxiaowu 2011-12-14  
有前台代码就 完美了。。

相关推荐

    ajaxupload无刷新文件上传,支持多文件上传,使用很方便哦

    ajaxupload.js 是一款使用jquery上传文件的js插件,对于简单的文件上传,足够可以应付, 你可以根据自身需要对前后端代码进行补充,也可以将一些...总的来说Jquery插件AjaxUpload实现文件上传功能的应用还是比较容易的。

    jquery Ajaxupload应用

    **jQuery AjaxUpload应用详解** AjaxUpload是一款非常实用的JavaScript插件,它允许用户在无需刷新页面的情况下上传文件,极大地提升了用户体验。在这个详细的知识点解析中,我们将深入理解AjaxUpload的工作原理,...

    jQuery+ajaxupload+imgareaselect+asp.net上传预览截取图像

    在IT行业中,前端开发经常需要处理用户上传图片的需求,而"jQuery+ajaxupload+imgareaselect+asp.net上传预览截取图像"这个主题,就是一种高效且用户体验优秀的解决方案。接下来,我们将深入探讨这些技术及其整合...

    jquery upload ajax方式

    在给定的压缩包文件`jQuery-File-Upload-master`中,包含了一个强大的jQuery插件——jQuery File Upload。这个插件提供了更丰富的功能,如多文件上传、文件预览、拖放支持、进度条等。使用该插件,可以极大地简化...

    Jquery AjaxUpload实现文件上传实例 PHP版

    AjaxUpload是jQuery的一个插件,它提供了一种方便的异步文件上传方式,无需刷新页面即可完成文件上传,提高了用户体验。在这个“Jquery AjaxUpload实现文件上传实例 PHP版”中,我们将探讨如何使用jQuery的Ajax...

    jQuery ajax file upload

    总结来说,`jQuery ajax file upload`是通过`ajaxFileUpload`插件实现的一种无刷新的文件上传方式,它提高了用户体验,并且提供了丰富的自定义选项和回调机制,适用于各种Web应用的文件上传需求。要正确使用,需要...

    jquery插件ajaxupload实现文件上传操作

    jQuery插件ajaxupload是用于实现文件上传功能的一个工具,它可以在客户端通过JavaScript异步地上传文件到服务器。在本文中,将详细介绍如何利用ajaxupload插件实现文件上传操作,并提供相应的代码示例和截图说明,...

    jQuery File Upload文件上传插件 v10.32.0.zip

    jQuery File Upload是一款功能强大的文件上传插件,专为前端开发者设计,用于在Web应用程序中实现高效、用户友好的多文件上传功能。这个插件的版本是v10.32.0,它提供了丰富的特性,使得文件上传变得更加简单且可控...

    ajaxUpload.

    标题"ajaxUpload."和描述"ajaxUpload.ajaxUpload.ajaxUpload."暗示我们将深入探讨这个话题。 ### 一、Ajax Upload原理 Ajax Upload的核心是利用JavaScript的异步特性,通过XMLHttpRequest对象与服务器进行通信。它...

    Ajax Upload多文件上传插件

    浏览器迫使我们使用文件输入控件(&lt;input type=”file” /&gt;)做上传,然而此控件的样式是不能修改...Ajax Upload文件上传插件不会污染任何命名空间,所以它与jQuery,Prototypejs,mootools其他JavaScript库兼容。

    JQuery插件-JQuery的几个精典应用实例

    本教程将探讨几个jQuery的精彩应用实例,包括菜单设计、文件上传、树形结构、表单验证以及滑动效果,帮助你深入理解并熟练运用jQuery。** ### 1. 菜单设计 创建动态交互式菜单是jQuery的一大强项。利用`click`事件...

    php upload文件上传代码 jquery ajax无刷新

    在本例中,我们将使用一个jQuery插件,如`AjaxUpload`或者`jQuery Form Plugin`来处理文件上传。这些插件提供了友好的API,使我们能够方便地构建无刷新上传功能。 下面是一个基本的使用步骤: 1. **HTML结构**:...

    AjaxUpload.rar 文件上传

    综上所述,AjaxUpload是现代Web应用中实现高效、流畅文件上传的一种重要技术,结合JavaScript和Ajax,它能提供更好的用户体验。不过,随着技术的发展,HTML5的File API和Fetch API等新特性也在逐步替代传统的Ajax...

    jQuery-File-Upload插件

    jQuery File Upload是一款强大的基于jQuery的文件上传插件,它提供了多文件选择、进度条显示、预览、上传取消以及删除等功能。这款插件利用HTML5技术,为现代浏览器提供了先进的文件上传体验,同时通过优雅降级的...

    ajax无刷上传插件,采用jquery插件

    jQuery插件是jQuery框架的扩展,它们提供额外的功能和方便的API,使得开发人员能够快速地构建功能丰富的Web应用。在Ajax无刷上传场景中,这类插件通常会包含一套完整的解决方案,包括前端的交互逻辑、错误处理以及与...

    jquery 实现的进度条插件

    2. **jQuery插件编写**:jQuery插件通常以函数形式存在,可以通过$.fn扩展jQuery对象。一个简单的进度条插件可能会包含初始化、开始、更新和结束等方法。以下是一个基本示例: ```javascript (function($) { $.fn....

    JQuery.upload.rar

    《基于jQuery的文件上传插件JQuery.upload详解》 在Web开发中,文件上传功能是不可或缺的一部分,尤其在用户交互丰富的现代网站上。jQuery作为一款轻量级、高性能的JavaScript库,提供了许多便利的API来简化DOM操作...

    jQuery File Upload 9.5.0 上传插件 非常好用

    总之,jQuery File Upload 9.5.0作为一款成熟的上传插件,具备完善的上传功能和强大的定制能力,是构建现代Web应用不可或缺的工具。它通过jQuery和JavaScript的强大组合,为开发者提供了优雅的文件上传解决方案,...

Global site tag (gtag.js) - Google Analytics