文档章节

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

非洲小毛驴
 非洲小毛驴
发布于 2016/08/15 16:14
字数 951
阅读 193
收藏 1
点赞 0
评论 0

提供一个在线测试的地址: 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
Web相册--Coppermine

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

匿名
2008/12/05
7K
0
ASP.NET MVC5+EF6+EasyUI 后台管理系统(36)-文章发布系统③-kindeditor使用

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

文艺小青年
2017/07/06
0
0
文件上传下载功能组件--netty-file-parent

基于netty的文件上传下载组件 1.简介 该组件基于netty3.6.3实现,具有如下功能:文件上传,文件替换,文件删除,如果是图片的话,还可以生成缩略图等功能。 使用简单,只需要引入netty-file-...

蚂蚁与咖啡的故事
2017/11/06
308
1
基于netty的文件上传下载组件

基于netty的文件上传下载组件 1.简介 该组件基于netty3.6.3实现,具有如下功能:文件上传,文件替换,文件删除,如果是图片的话,还可以生成缩略图等功能。 使用简单,只需要引入netty-file-...

蚂蚁与咖啡的故事
2017/11/06
0
0
.NET 平台的 CMS 系统--fesend

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

一阔树
2011/01/12
6.8K
0
UCKeFu 2.5.0 发布,开放REST API,API支持多租户

UCKeFu v2.5.0 发布,UCKeFu 基于 JAVA 语言开发,是一个全渠道融合的客户支持服务平台,聚合企业内部多个客服渠道,帮助各种行业各种规模的企业建立完整客服体系。 通过将邮件、短信、电话语...

优客服多渠道客服系统
2017/06/12
1K
1
高清缩略图之Thumbnailator

搞网站开发,经常要用到的一个功能是生成缩略图。如果对缩略图的质量要求不高,直接用JDK提供的Image API就可以搞定,简单示例: File _file = new File("/Order005-0001.jpg"); //读入文件I...

一剑风徽
2012/11/18
0
0
利用 Nginx 的 ngx_http_image_filter_module 做实时的图片缩略图

你还在用 ImageMagick 生成网站的上传图片缩略图吗?其实有更好的方法一部到位,简单有效。 现而今有非常多的云存储服务支持图片空间,并根据设定的规则来生成空间里面的图片缩略图了,例如 ...

voole
07/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Git 2.18版本发布:支持Git协议v2,提升性能

Git 2.18版本发布:支持Git协议v2,提升性能Git 2.18版本发布:支持Git协议v2,提升性能 新版本协议的主要驱动力是使 Git 服务端能够对各种 ref(分支与 tag)进行过滤操作。 这就意味着,G...

linux-tao
27分钟前
0
0
python浏览器自动化测试库【2018/7/22-更新】

64位py2.7版本 更新 document_GetResources 枚举页面资源 document_GetresourceText 获取指定url的内容 包括页面图片 下载地址下载地址 密码:upr47x...

开飞色
43分钟前
28
0
关于DCL双重锁失效及解决方案

关于DCL双重锁失效及解决方案 Double Check Lock (DCL)实现单例 DCL 方式实现单例的优点是既能够在需要时才初始化单例,又能够保证线程安全,且单例对象初始化后调用getInstance方法不进行...

DannyCoder
49分钟前
0
0
PowerDesigner 16.5 安装配置

PowerDesigner16.5破解版是一款业内领先且开发人员常用的数据库建模工具,PowerDesigner可以从物理和概念两个层面设计数据库,方便用户制作处清晰直观的数据流程图和结构模型,欢迎有需要的朋...

Gibbons
今天
0
0
mac Homebrew 指令积累

1通用命令 brew install [包名] //安装包 brew list //列举安装的包 brew info [包名] // 显示安装包的详细信息 mysql 相关 #启动mysql 服务 brew service start mysql my...

Kenny100120
今天
0
0
前端Tips: 创建, 发布自己的 Vue UI 组件库

创建, 发布自己的 Vue UI 组件库 前言 在使用 Vue 进行日常开发时, 我们经常会用到一些开源的 UI 库, 如: Element-UI, Vuetify 等. 只需一行命令, 即可方便的将这些库引入我们当前的项目: n...

ssthouse_hust
今天
1
0
大数据教程(2.13):keepalived+nginx(多主多活)高可用集群搭建教程【自动化脚本】

上一章节博主为大家介绍了目前大型互联网项目的keepalived+nginx(主备)高可用系统架构体系,相信大家应该看了博主的文章对keepalived/nginx技术已经有一定的了解,在本节博主将为大家分享k...

em_aaron
今天
5
0
Git 2.18版本发布:支持Git协议v2,提升性能

在最新的官方 Git 客户端正式版2.18中添加了对 Git wire 协议 v2 的支持,并引入了一些性能与 UI 改进的新特性。在 Git 的核心团队成员 Brandon Williams 公开宣布这一消息前几周,Git 协议 ...

六库科技
今天
0
0
Java8新特性之接口

在JDK8以前,我们定义接口类中,方法都是抽象的,并且不能存在静态方法。所有的方法命名规则基本上都是 public [返回类型] [方法名](参数params) throws [异常类型] {}。 JDK8为接口的定义带...

developlee的潇洒人生
今天
0
0
aop + annotation 实现统一日志记录

aop + annotation 实现统一日志记录 在开发中,我们可能需要记录异常日志。由于异常比较分散,每个 service 方法都可能发生异常,如果我们都去做处理,会出现很多重复编码,也不好维护。这种...

长安一梦
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部