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({});
评论区
回复