`
wei5201
  • 浏览: 185145 次
  • 性别: 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实现文件上传功能的应用还是比较容易的。

    Ajax Upload多文件上传插件

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

    强烈推荐240多个jQuery插件提供下载

    jQuery 是一个快速的,简洁的 javaScript 库,使用户能更方便地处理 HTML documents、events、实现动画...今天在Kollermedia.at上发现了一篇JQuery插件列表的文章,特推荐如下。 文件上传(File upload) Ajax File Up

    php图片异步上传

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

    jquery.imguruimageploader

    要求您需要在页面上包含 JQuery、JQueru UI 和 jQuery-File-Upload 插件文件,如下所示: &lt; script src =" //ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js " &gt; &lt;/ script &gt; &lt; script src ...

    vuejs-ajax:这是一个XHR插件,适用于Vue.js 2.x和更高版本的特定功能。 支持文件上传,异步和动态组件插件,HTML5 pushstate

    这是一个XHR插件,可在Vue.js 2.x和更高版本的特定功能中使用。 它具有jQuery的ajax()和... 使用componentShifter(),您可以通过动态和异步Vue.component()加载(通过Vue.ajax )并在应用程序中呈现Vue template

    ExtJS4中文教程2 开发笔记 chm

    JQuery AJAX提交中文乱码的解决方案 Jquery css函数用法 JQuery中getJSON的使用方法 Jquery中显示隐藏的实现代码分析 JQuery全选功能的实现 JQuery特效——下拉菜单 JQuery系列教程之XPath选择符 JQuery系列教程之...

    xheditor-1.1.14

    方法2:利用xhEditor提供的jQuery插件接口来实现对特定textarea的初始化和传递参数,例: $('#elm1').xheditor(); 或者 $('#elm1').xheditor({tools:'mini'}); 特别说明:两种初始化方法只能选择其中一种使用,如果...

    大名鼎鼎SWFUpload- Flash+JS 上传

     upload_success_handler : upload_success_function, 文件上传成功后触发的事件处理函数  upload_complete_handler : upload_complete_function,  debug_handler : debug_function,  custom_settings : { ...

    Eoyoo CMS Mature 2.0

    交互式Web 应用程序而无需牺牲浏览器兼容性的流行方法 模板引擎技术 Template 程序代码实现界面与数据分离,提升了开发效率,减低成本 Jquery框架 JavaScript 引入了流行的Jquery库,它的书写方式极具亲和力 ...

    asoft签到管理系统tykq3.5_build20110125

    ajaxinc: AJAX应用类(以ajax_命名的四个文件)、附件上传(upload_5xsoft.inc|asoft_upload.asp)和EXCEL导出文件(toexcel.asp)、顶部banner(top.asp)、验证码生成文件(CodeGen.asp、VerifyCode.asp),数据库连接...

Global site tag (gtag.js) - Google Analytics