文档章节

php+vuejs+jquery实现ajax批量图片上传并生成缩略图

非洲小毛驴
 非洲小毛驴
发布于 2016/08/15 16:14
字数 951
阅读 220
收藏 1

提供一个在线测试的地址: 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
作品 0
慈溪
程序员
私信 提问
Fung Wing Kit/php-qiniu

php-qiniu 七牛云存储非官方SDK,采用PSR规范,支持Composer安装 安装 添加 到 . composer.phar install 引导 基本用法 上传 上传文件 上传字符串 基本操作 查看文件 复制文件 移动文件 删除...

Fung Wing Kit
2014/12/14
0
0
如何使用羊驼自动生成缩略图的功能。

羊驼 2.0 增加了生成缩略图的功能。 使用方法很简单。只需要在 html 用一下方式指向图片即可。 例如: yu.b24.cn 是基于 alpaca 2.0 的一个网站 通过 alpaca 上传的图片地址为 http://yu.b2...

BatM3
2012/03/29
0
0
ASP.NET MVC5+EF6+EasyUI 后台管理系统(36)-文章发布系统③-kindeditor使用

系列目录 我相信目前国内富文本编辑器中KindEditor 属于前列,详细的中文帮助文档,简单的加载方式,可以定制的轻量级。都是系统的首选 很多文章教程有kindeditor的使用,但本文比较特别可能...

文艺小青年
2017/07/06
0
0
Web相册--Coppermine

Coppermine是一个 易于建立,速度快,功能强大的Web相册,它基于PHP+Mysql,支持多种格式的图片作为相册和多媒体群集,相册可设为只供注册会员使用,查看,会员 也可把相册设为私有相册,禁止...

匿名
2008/12/05
7K
0
.NET 平台的 CMS 系统--fesend

运用了流行的AJAX技术及.net技术,将.net的缓存技术发挥到淋漓尽至,从而极大的提高了程序运行的效率以及减轻了服务器的负担,性能及效率方面 要比基于asp、php的同类产品强出百倍; Fesend...

一阔树
2011/01/12
6.8K
0

没有更多内容

加载失败,请刷新页面

加载更多

MySQL 索引 explain索引分析优化

EXPLAIN是MySQL提供的工具,可用于模拟优化器执行SQL查询语句,从而知道MySQL是如何处理SQL语句的,包括表的读取顺序、数据读取操作的操作类型、可能使用的索引、实际使用的索引、表之间的引...

PeakFang-BOK
11分钟前
1
0
17-《深度拆解JVM》之即时编译(上)

一、问题引入 在第一篇中,我们简单了解过即时编译。这是一项用来提升应用程序运行效率的技术。通常而言,代码会先被 Java 虚拟机解释执行,之后反复执行的热点代码则会被即时编译成为机器码...

飞鱼说编程
11分钟前
1
0
OSChina 周二乱弹 —— 请上车吧

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @2amor :分享王菲的单曲《闷》 《闷》- 王菲 手机党少年们想听歌,请使劲儿戳(这里) @開源中國周杰倫 :昨天睡觉肚子疼,妈蛋,半夜爬起来...

小小编辑
今天
627
10
工作中如何做好技术积累

参考:https://tech.meituan.com/study_vs_work.html 看了这篇文章,觉得总结得非常好,因此摘抄了一些关键点,以便自己经常翻阅。 引言 在繁忙的工作中做好技术积累,构建个人核心竞争力. 在...

grace_233
今天
9
0
Mariadb二进制包安装,Apache安装

安装mariadb 下载二进制包并解压 [root@test-a src]# wget https://downloads.mariadb.com/MariaDB/mariadb-10.2.6/bintar-linux-glibc_214-x86_64/mariadb-10.2.6-linux-glibc_214-x86_64.t......

野雪球
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部