php+vuejs+jquery实现ajax批量图片上传并生成缩略图
php+vuejs+jquery实现ajax批量图片上传并生成缩略图
非洲小毛驴 发表于1年前
php+vuejs+jquery实现ajax批量图片上传并生成缩略图
  • 发表于 1年前
  • 阅读 145
  • 收藏 1
  • 点赞 0
  • 评论 0

腾讯云 学生专属云服务套餐 10元起购>>>   

摘要: 最近中用到了ajax图片上传与生成缩略图,现在来总结一下写一个demo

提供一个在线测试的地址: http://ctyblog.uphero.com/ajax_upload/index.php

首先我们来看一下最终成果的gif图,有目标才有动力嘛

首先,界面使用bootstap3 进行简单的搭建,页面渲染由vue进行,数据有php生成

页面的流程是这样的,

当添加文件按钮被点击时,jquery调用file来添加文件,将数据添加至vue中来渲染

当上传文件按钮被点击时,循环ajax将图片上传至服务器,同时讲返回的数据补充到vue中

具体如下

当添加文件按钮被点击时,我们需要弹出选择文件框,就是他

然后选择文件之后将数据添加到vue中

由于我们是多文件上传,所以需要在下次选择文件前,先清除原来的file数据,这里我们用简便的方法,重新创建一个 input file

然后当文件上传按钮被单击时,我们for循环批量将文件上传到服务器

这里我们将 ajax操作封装到function中,这样我们就可以使用ajax的异步提交了,否则在批量上传时会导致页面卡住影响用户体验

最后就是简单的文件上传处理了(这里我同时生成了缩略图)

代码放在最后啦 good luck have fun

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ajax图片批量上传与缩略图生成</title>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="form-group">
                <button class="add">添加文件</button>
                <button class="upload">上传文件</button>
            </div>
            <table class="table table-striped">
                <thead>
                    <tr>
                        <td>编号</td>
                        <td>文件名</td>
                        <td>状态</td>
                    </tr>
                </thead>
                <tbody >
                    <tr v-for="(index,file) in file_list">
                        <td>{{index + 1}}</td>
                        <td>{{file.name}}</td>
                        <td>{{file.status}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row">
            <div class="col-sm-3" v-for="file in file_list" v-if="file.t_url != undefined">
                <a href="javascript:;" class="thumbnail">
                    <img src="{{file.t_url}}" >
                </a>
            </div>

        </div>
        <div class="row">
            <div class="hidden">
                <div id="file">
                    <input type="file" />
                </div>
            </div>
        </div>
    </div>
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script>
    <script>
        $(document).ready(function () {
            var vm = new Vue({
                el:'body',
                data:{
                    file_list:[
                    ]
                }
            });
            $('button').click(function () {
                var o_class = $(this).attr('class');
                if(o_class == 'add'){
                    $('#file').empty().append($('<input type="file" />')).find('input').click();
                }else if(o_class == 'upload'){
                    var fm = new FormData();
                    fm.append('file','');
                    var count = vm.file_list.length;
                    for(var i = 0;i < count;i++){
                        if(vm.$get('file_list['+i+'].url') == undefined){
                            vm.$set('file_list['+i+'].status','开始上传');
                            fm.set('file',vm.file_list[i].obj);
                            func_ajax(fm,i);
                        }
                    }
                    vm.$nextTick();

                }
            });
            function func_ajax(fm,i){
                $.ajax({
                    url:"./ajax_upload.php?" + i + new Date(),
                    type:"POST",
                    data:fm,
                    dataType:'json',
                    cache: false,
//                    async: false,
                    processData: false,
                    contentType: false,
                    error:function(){
                        console.log('upload_error');
                    }
                }).done(function(d){
                    if(d.code == 200){
                        vm.$set('file_list['+i+'].status','上传成功');
                        vm.$set('file_list['+i+'].url',d.data.url);
                        vm.$set('file_list['+i+'].t_url',d.data.t_url);
                    }
                });
            }
            $('#file').on('change','input',function () {
                var o = $(this);
                vm.file_list.push({
                    name:o[0].files[0].name,
                    obj:o[0].files[0],
                    status:'未上传'
                });
            });
        });
    </script>
</body>
</html>
<?php
    if(!empty($_FILES)){
        //移动临时文件到指定目录并改名
        $_FILES['file']['name'] = iconv('UTF-8','gb2312',$_FILES['file']['name']);
        move_uploaded_file(
            $_FILES['file']['tmp_name'],'./'.$_FILES['file']['name']);
        $file_name = md5(uniqid(md5(microtime(true)),true)) . '.jpg';
        rename('./'.$_FILES['file']['name'],'./'.$file_name);
        //生成缩略图
        create_img_thumb('./'.$file_name,100,100,'./'.$file_name.'.t.jpg');
        //end

        exit(json_encode(array(
            'code'=>200,
            'data'=>array(
                'url'=>'./'.$file_name,
                't_url'=>'./'.$file_name.'.t.jpg'
            )
        )));
    }
    function create_img_thumb($file_name,$width,$height,$new_file_name,$type = 1){
        /* 暂定两种缩略图模式
         * 1:尺寸缩放但完整显示图片
         * 2:尺寸缩放并只显示部分图片
        */
        if($type === 1){
            // 获取图片宽高
            $image_info = getimagesize($file_name);
            list($width_orig, $height_orig) = $image_info;
            $image_mime = $image_info['mime'];
            if ($width && ($width_orig < $height_orig)){
                $width = ($height / $height_orig) * $width_orig;
            }else {
                $height = ($width / $width_orig) * $height_orig;
            }
            $image_p = imagecreatetruecolor($width, $height);
            switch ($image_mime) {
                case 'image/gif':
                    $image = imagecreatefromgif($file_name);
                    break;
                case 'image/jpeg':
                    $image = imagecreatefromjpeg($file_name);
                    break;
                case 'image/png':
                    $image = imagecreatefrompng($file_name);
                    break;
                default:
                    return false;
                    break;
            }
//            $image_p = imagecreatetruecolor($width,$height);
            imagecopyresampled($image_p, $image, 0, 0, 0, 0, $width, $height, $width_orig, $height_orig);
            if($image_mime == 'image/png'){
                $color_white = imagecolorallocate($image_p,255,255,255);
                imagecolortransparent($image_p,$color_white);
                imagefill($image_p,0,0,$color_white);
                imagepng($image_p, $new_file_name,2);
            }else{
                imagejpeg($image_p, $new_file_name,80);
            }
        }
    }
?>

 

 

 

 

共有 人打赏支持
粉丝 0
博文 2
码字总数 1190
×
非洲小毛驴
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: