jquery ajax上传插件（只支持高级版本浏览器）

最新推荐文章于 2024-10-10 13:34:51 发布

zhangchong_dk

最新推荐文章于 2024-10-10 13:34:51 发布

阅读量429

点赞数

分类专栏： jQuery 文章标签： jquery上传插件 ajax上传

本文链接：https://blog.csdn.net/zhangchong_dk/article/details/80842070

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.upload.min.js"></script>
        <title>上传插件</title>
        <style>
            .upload-btn {border: 1px solid #5BC0DE;border-radius: 4px;cursor: pointer;display: inline-block;
    font-size: 14px;padding: 6px 12px;text-align: center;height:24px;line-height:24px;
    background-color: #5BC0DE;color: #FFFFFF;text-decoration:none;}
        </style>
    </head>
    <body>
        <a href="javascript:;" class="upload-btn">高级浏览器（IE9以上）</a>
        <a href="javascript:;" class="upload-btn">高级浏览器（IE9以上）</a>
    </body>
    </html>
    <script type="text/javascript">
        $('.upload-btn').upload({ //绑定上传事件
            url:'upload.php', //上传的后台地址
            name:'upload_file', //input的name，默认upload_file
            params:{name:'test', id:1, txt:['aa', 'bb']}, //额外的参数
            before:function (file, $this) { //上传之前执行的函数，如果return false，则上传动作终止
                console.log(file); // file  上传文件的信息
                console.log($this); //当前点击按钮（点击触发上传事件的元素）
            },
            success:function (data, $this) { //上传完成后的回调函数 后台必须返回json格式数据，{code:200, message:"success", …}，code==200调用此回调函数
                console.log(data); //data 后台返回的数据
                console.log($this); //当前点击按钮（点击触发上传事件的元素）
            },
            error:function (message, $this) { //上传发生错误时调用  code != 200 或者请求发生错误时调用此函数
                console.log(message);
                console.log($this); //当前点击按钮（点击触发上传事件的元素）
            }
        });
        //解绑上传事件
        $('.upload-btn:eq(1)').unupload();
        //更改上传参数
        $('.upload-btn:eq(0)').setOptions({ //跟之前的参数合并，有则覆盖
            params:{name:'name', id:2, txt:['aa', 'bb']}
        });
    </script>

后台代码示例(PHP)：

    <?php
    $files = $_FILES['upload_file'];
    $file_path = '/home/www/test/upload/';
    $file_name = time().'.jpg';
    move_uploaded_file($files['tmp_name'], $file_path.$file_name);
    echo json_encode([
        'code'=>200,
        'message'=>'success',
        'data'=>['file_name'=>$file_name]
    ]);

下载地址：

https://download.csdn.net/download/zhangchong_dk/10505252