KingFileUpload ajax 上传文件插件

作者 烤鸡科技

主题选择:

点此下载 min版 (右键另存为)

示例

JS引用和CSS部分

    <script src="/jquery.js"></script>
    <script src="/demo/upload/jquery-kfileupload.js"></script>

    <!-- 对按钮一点简单的修饰 -->
    <style>
        #button{
            height:35px;
            width:120px;
            background-color: #407ced;
        }
        #button:hover{
            background-color: #49a4ed;
        }
        /* ↓按钮上的提示文字的样式修饰 */
        #button_msg{
            line-height:35px;
            display:inline-block;
            width:120px;
            text-align:center;
            color:white;
        }
    </style>
JS部分

    $(function($){
        //通过JS给指定的DIV绑定文件选择事件
        $('#button').kingFileUpload({
            'url':'/demo/upload.do',
            'content':'<span id="button_msg">上传文件</span>',
            'success':function(data){
                data = $.parseJSON(data);
                alert('状态码:'+data.rc + '\r\n消息:' + data.msg);
            }
        });
    });
HTML
    
    <div id="button"></div>
    
效果演示(没有调用真实接口,但会请求服务器)

 
 

文档

请求参数
    kingFileUpload 方法请求参数是一个 JSON 对象,可以省略部分参数,省略参数将以默认参数请求。
    默认参数参见 $().kingFileUpload.default , 如下:

    {
        "url": "http://127.0.0.1/",
        "data": {},
        "content": "上传文件",
        "name":"file",
        "autoUpload": true,
        "submitButton": null
        "success":function(data){},
        "selectChange":function(filename){}
    }

    参数解释:

    "url": 上传文件请求地址

    "data": 一并传递的其它值

    "content": 选择文件按钮的提示文字,可以是 string 类型的纯文本也可以是标签,如 '<span id="button_msg">上传文件</span>'

    "name": 文件提交到后台的属性名,默认为 "file"

    "autoUpload": 是否选择文件后自动上传,默认 true

    "submitButton": 提交按钮的对象;一个 jQuery 对象( 如$('#xxx') ),当 autoUpload 属性为 false 时有效

    "success":function(data){} 上传成功时的回调函数,data 是服务器响应(服务器响应头和浏览器行为直接有关),

    "selectChange":function(filename){} 选择一个文件时的回调函数,filename 是所选择的文件名(如果可以取到)


返回值
    kingFileUpload 方法的返回值也是一个 JSON 对象,对象内包含所有应用的参数,还有另外两个函数可以调用,如:


    var x = $('#button').kingFileUpload();

    //http://127.0.0.1/
    alert(x.url);

    //string 类型,获取上次选择上传的文件名
    x.getFileName();

    //当 autoUpload 属性为 false 时,设置请求附加的参数,和 kingFileUpload 函数的 data 属性参数一致。
    x.setData({});

评论区
回复