JQuery使用丨JQuery ocupload（一键上传）

•  JQuery ocupload(一键上传入门）

 一、环境搭建

<!-- 导入jquery核心类库 -->  

<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>  

 <!-- 导入ocupload -->  

<script type="text/javascript" src="../../js/ocupload/jquery.ocupload-1.1.2.js" ></script>  

 二、 代码范例

// 为导入按钮添加一键上传效果  

                $("#button-import").upload({  

              //默认name为file,enctype默认提交方式为multipart/form-data  

                    action : "../../area_batchImport.action",  

                    //选中文件时候触发的事件  

                    onSelect:function () {  

                        //选中文件后，关闭自动提交  

                        this.autoSubmit = false;  

                        //判定文件格式，以.xls或者.xlsx结尾  

                        var filename =  this.filename();  

  

                        //校验的2种写法  

                        var reqex = /^.*\.(xls|xlsx)$/  

                        var reqex1 = new RegExp(".xls|.xlsx");  

                        //alert(reqex.test(filename));  

                        //alert(reqex1.test(filename));  

  

                        if(reqex.test(filename)){  

                            this.submit();  

                        }else{  

                            $.messager.alert("警告","只能上传.xls或.xlsx结尾的文件","warning")  

                        }  

                    },  

                    //文件上传后触发的事件  

                    onComplete:function () {  

                        alert("文件上传成功");  

                    }  

                });  

三、 API解析

Both of the functions accept an optional options object, which can contain any or all of the following (default value):   

    //文件上传的名字，默认值是file  

    * name: ("file") The name of the file input form element.   

    //文件提交的方式，默认值是multipart/form-data  

    * enctype: ("multipart/form-data") The enctype attribute of the form, it is usually a good idea to leave this as default.   

    //文件上传的action  

    * action: (null) The form action attribute, the page that will do the processing on the server side.   

    //文件输入框发生变化时，自动提交  

    * autoSubmit: (true) If true the form will be submitted after the user selects a file (after the file browser closes).   

    //文件上传时的额外参数  

    * params: ({}) Additional paramaters to be sent with the file, creates a hidden form element using the key as the name of the form and the value as the value.   

    //提交时触发的事件  

    * onSubmit: (null) The callback function called before submitting the form.   

    //文件上传后触发的事件  

    * onComplete: (null) The callback function called after the action page loads.   

    //选中文件时触发的事件  

    * onSelect: (null) The callback function called after the user has selected a file.