[php] 3个多文件上传(uploadify、file upload、 webuploader)

最新推荐文章于 2024-04-30 20:49:16 发布

天空还下着雪

最新推荐文章于 2024-04-30 20:49:16 发布

阅读量9.8k

点赞数 1

分类专栏：后端前端文章标签：前端 php

本文链接：https://blog.csdn.net/u010081689/article/details/47105145

版权

前端同时被 2 个专栏收录

154 篇文章 0 订阅

订阅专栏

后端

86 篇文章 0 订阅

订阅专栏

多文件上传的插件常用的有：

1、jquery uploadify 下载【http://www.uploadify.com/download/】

2、jquery file upload 下载【https://github.com/blueimp/jQuery-File-Upload/tags】

3、webuploader 下载【http://fex.baidu.com/webuploader/download.html】

注：

在使用的时候，要参照官网的文档说明，如果看不明白，可以百度一下想知道的，必境我这里只是入门的小实例

一、jquery uploadify

该插件已经把文件写好了（index.php和uploadify.php），下载后改下上传路径就行了，这里没什么要讲的

二、jquery file upload 以Thinkphp为例 Home模块下的Index控制器

布局文件index.html：

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <link rel="stylesheet" href="__PUBLIC__/bootstrap/bootstrap.min.css"/>
    <script src="__PUBLIC__/jquery.min.js"></script>

    <link rel="stylesheet" href="__PUBLIC__/jqupload/css/jquery.fileupload.css">
    <link rel="stylesheet" href="__PUBLIC__/jqupload/css/jquery.fileupload-ui.css">
    <script src="__PUBLIC__/jqupload/js/vendor/jquery.ui.widget.js"></script>
    <script src="__PUBLIC__/jqupload/js/jquery.fileupload.js"></script>
    <script src="__PUBLIC__/jqupload/js/jquery.iframe-transport.js"></script>
</head>
<body>
    <div class="container">
        <div class="row fileupload-buttonbar" style="padding-left:15px;">
            <div class="thumbnail col-sm-6">
                <div class="progress progress-striped active" role="progressbar" aria-valuemin="10" aria-valuemax="100" aria-valuenow="0"><div id="weixin_progress" class="progress-bar progress-bar-success" style="width:0%;"></div></div>
                <div class="caption" align="center">
                    <span id="weixin_upload" class="btn btn-primary fileinput-button">
                    <span>上传</span>
                    <input type="file" id="weixin_image" name="weixin_image[]" data-url="__CONTROLLER__/uploadImg" multiple>
                    </span>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(function() {
            $("#weixin_image").fileupload({
                dataType: 'json',
                acceptFileTypes:  /(\.|\/)(gif|jpe?g|png)$/i,  // 文件上传类型
                sequentialUploads: true,  // 连续上传配置
                add: function (e, data) {
                    //提交到服务器端
                    data.submit();
                }
            }).bind('fileuploadprogress', function (e, data) {  // 绑定上传进度
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $("#weixin_progress").css('width',progress + '%');
                $("#weixin_progress").html(progress + '%');
            }).bind('fileuploaddone', function (e, data) {  // 上传完成处理
                $("#weixin_upload").css({display:"none"});
                $('.thumbnail').prepend('<img src="'+data.result+'" style="height:180px;margin-top:10px;margin-bottom:8px;" alt="图片" data-holder-rendered="true">');
            });
        });
    </script>
</body>
</html>

Index控制器下的uploadImg方法

/* 文件上传处理 */
public function uploadImg(){
    $upload = new \Think\Upload();// 实例化上传类
    $upload->maxSize   =     3145728 ;// 设置附件上传大小
    //$upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
    $upload->rootPath  =      './Public/Uploads/'; // 设置附件上传根目录
    $upload->savePath  =      ''; // 设置附件上传（子）目录
    $upload->autoSub = false;  // 关闭子目录

    // 上传文件
    $info   =   $upload->upload();
    if(!$info) {// 上传错误提示错误信息
        $this->error($upload->getError());
    }else{// 上传成功 获取上传文件信息
        $pathArr = array();
        foreach($info as $file){
            array_push($pathArr, "Public/Uploads/".$file['savepath'].$file['savename']);
        }
        echo json_encode($pathArr);
    }
}

三、webuploader (也是以Thinkphp为例) 可以多文件多图片大文件上传

HTML布局：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>webuploader</title>
    <link rel="stylesheet" href="__PUBLIC__/webuploader/webuploader.css"/>
    <script src="__PUBLIC__/jquery.min.js"></script>
    <script src="__PUBLIC__/webuploader/webuploader.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .progress {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 15px;
            font-size: 12px;
            color: #fff;
            text-align: center;
            line-height: 15px;
        }
        .uploader-list .file-item {
            position: relative;
        }
        .progress span {
            display: inline-block;
            height: 100%;
            background: #1C9F09;
        }
    </style>
</head>
<body>
<div id="uploader-demo">
    <!--用来存放item-->
    <div id="fileList" class="uploader-list"></div>
    <div id="filePicker">选择图片</div>
</div>
</body>
</html>

JS脚本：

<script>
    // 图片上传demo
    jQuery(function() {
        var $ = jQuery,
        $list = $('#fileList'),
        // 优化retina, 在retina下这个值是2
        ratio = window.devicePixelRatio || 1,

        // 缩略图大小
        thumbnailWidth = 100 * ratio,
        thumbnailHeight = 100 * ratio,

        // Web Uploader实例
        uploader;

        // 初始化Web Uploader
        uploader = WebUploader.create({

            // 自动上传。
            auto: true,

            // swf文件路径
            swf: '__PUBLIC__/webuploader/Uploader.swf',

            // 文件接收服务端。
            server: '__CONTROLLER__/webuploader',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#filePicker',

            // 只允许选择文件，可选。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });

        // 当有文件添加进来的时候
        uploader.on( 'fileQueued', function( file ) {
            var $li = $(
                            '<div id="' + file.id + '" class="file-item thumbnail">' +
                            '<img>' +
                            '<div class="info">' + file.name + '</div>' +
                            '</div>'
                    ),
                    $img = $li.find('img');

            $list.append( $li );

            // 创建缩略图
            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }

                $img.attr( 'src', src );
            }, thumbnailWidth, thumbnailHeight );
        });

        // 文件上传过程中创建进度条实时显示。
        uploader.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                $percent = $li.find('.progress span');

            // 避免重复创建
            if ( !$percent.length ) {
                $percent = $('<p class="progress"><span></span></p>')
                        .appendTo( $li )
                        .find('span');
            }

            $percent.css( 'width', percentage * 100 + '%').text(percentage * 100+'%');
        });

        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on( 'uploadSuccess', function( file ) {
            console.log(file);
            $( '#'+file.id ).addClass('upload-state-done');
        });

        // 文件上传失败，现实上传出错。
        uploader.on( 'uploadError', function( file ) {
            var $li = $( '#'+file.id ),
                    $error = $li.find('div.error');

            // 避免重复创建
            if ( !$error.length ) {
                $error = $('<div class="error"></div>').appendTo( $li );
            }

            $error.text('上传失败');
        });

        // 完成上传完了，成功或者失败，先删除进度条。
        uploader.on( 'uploadComplete', function( file ) {
//            $( '#'+file.id ).find('.progress').remove();
        });
    });
</script>

PHP代码：

public function webuploader() {
    $upload = new \Think\Upload();// 实例化上传类
    $upload->maxSize   =     3145728 ;// 设置附件上传大小
    $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
    $upload->rootPath  =      './Public/Uploads/'; // 设置附件上传根目录
    $upload->savePath  =      ''; // 设置附件上传（子）目录
    $upload->autoSub = false;  // 关闭子目录

    // 上传文件
    $info   =   $upload->upload();
    if(!$info) {// 上传错误提示错误信息
        $this->error($upload->getError());
    }else{// 上传成功 获取上传文件信息
        $pathArr = array();
        foreach($info as $file){
            array_push($pathArr, "Public/Uploads/".$file['savepath'].$file['savename']);
        }
        echo json_encode($pathArr);
    }
}

个人感觉百度团队开发的webuploader比较好用，具体在项目中使用，看需要了。

欢迎关注技术开发分享录：http://fenxianglu.cn/

天空还下着雪

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
2
评论
[php] 3个多文件上传(uploadify、file upload、 webuploader)

多文件上传的插件常用的有：1、jquery uploadify 下载【http://www.uploadify.com/download/】2、jquery file upload 下载【https://github.com/blueimp/jQuery-File-Upload/tags】3、webuploader 下载【http://fex.baidu.com/webuploade...
复制链接

扫一扫