Webuploader 简单图片上传 支持多图上传

简介：

　　通过webuploader 实现简单的图片上传功能，支持多张图上传

　　官方文档传送门：http://fex.baidu.com/webuploader/getting-started.html#%E5%9B%BE%E7%89%87%E4%B8%8A%E4%BC%A0

引入资源：

　　使用Web Uploader文件上传需要引入三种资源：JS, CSS, SWF。

<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css">

<!--引入JS-->
<script type="text/javascript" src="webuploader文件夹/webuploader.js"></script>

<!--SWF在初始化的时候指定，在后面将展示-->

Html：

<div class="upload_pic">
    <div id="fileList" class="uploader-list"></div>
    <div id="filePicker">选择图片</div>
    <div class="webuploader-pick go_upload" style="margin-top: 3px;">点击上传</div>
    <ul class="pic_lists">
</div> 

Js:

function webUpload() {
    // 初始化Web Uploader
    var uploader = WebUploader.create({

        // 选完文件后，是否自动上传。
        auto: false,

        duplicate: false,

        // swf文件路径
        swf: '/com/webupload/Uploader.swf',

        // 文件接收服务端。
        server: '/admin.php?c=Index&a=batchUploadPic',

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

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

        resize: false
    });

    // 监听fileQueued事件，通过uploader.makeThumb来创建图片预览图。
    var num = 0;
    uploader.on('fileQueued', function( file ) {
        num--;
        var $li = $('<li id="' + file.id + '" _id="'+file.id+'" class="item">' +
            '<img src="" alt=""><h4 class="info" style="display:inline-block;">' + file.name + ' <span class="button del" >删除</span></h4>' +
            '</li>');
        var $img = $li.find('img');
        $('.pic_lists').append($li);
        uploader.makeThumb( file, function( error, src ) {
            if ( error ) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }
            $img.attr( 'src', src );
        }, 60, 60 );

    });
    // 删除
    $('.pic_lists').on('click','.del',function () {
        uploader.removeFile($(this).parents('li').attr('_id'),true);
        $(this).parents('li').remove();
        num++;
    });
    //上传成功
    uploader.on( 'uploadSuccess', function( file,res ) {
        if( res.code == 0 ){
            $('#'+file.id).remove();
            num++;
            if( num == 0 ){
                win.msg('上传成功');
                window.location.reload();
            }
        }
    });
    // 上传失败
    uploader.on( 'uploadError', function( file ) {
        win.msg(file.name+'上传失败');
    });

    // 点击上传
    $('.upload_pic').on('click','.go_upload',function () {
        uploader.upload();
    });
}

PHP:

public function batchUploadPic() {
        header('Content-type:text/html; charset=utf-8');
        $objFiels = $_FILES['file'];
        $strSavePath = './upload/'.date('y').'/'.date('m').date('d').'/';
        $strPicName = rand(1000000, 9999999) . rand(1000000, 9999999) . '.jpg';
        if (!is_dir($strSavePath)) mkdir($strSavePath, 0777, true);
        $strPicPath = $strSavePath . '/' . $strPicName;
        $boolUploadStatus = move_uploaded_file($objFiels['tmp_name'],  $strPicPath);
        if ($boolUploadStatus) {
            echo json_encode(['code' => 0, 'msg' => '成功', 'path' => $strPicPath]);
        } else {
            echo json_encode(['code' => 1, 'msg' => '上传图片失败', 'path' => '']);
        }
}