<!DOCTYPE HTML PUBLIC>

<html>

 <head>

  <meta charset="utf-8">

  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

  <title>HTML5按比例缩略图片并上传的实例</title>

  <style type="text/css">

    body{margin: 0px; background:#f2f2f0;}

    .title{color:#FFFF00; background:#000000; text-align:center; font-size:24px; line-height:50px; font-weight:bold;}

    .main{margin:10px auto 10px auto; text-align:center;}

    .main .file{padding-left:100px;}

    .showimg{margin:10px auto 10px auto; text-align:center;}

  </style>

  <script type="text/javascript">

    window.onload = function(){

        // 上传按钮事件

        document.getElementById('upload').onclick = function(){

            // 图片上传控件

            var img = document.getElementById('img').files[0];

            // 缩略尺寸

            var width = document.getElementById('width').value;

            var height = document.getElementById('height').value;

            // 判断是否选择图片

            if(!img){

                alert('请先选择图片');

                return ;

            }

            // 判断图片格式

            if(!(img.type.indexOf('image')==0 && img.type && /\.(?:jpg|png|gif)$/.test(img.name)) ){

                alert('图片只能是jpg,gif,png格式');

                return ;

            }

            // 判断width,height

            if(isNaN(parseInt(width)) || isNaN(parseInt(height))){

                alert('宽或高不正确');

                return ;

            }

            // 缩略图片并上传

            resize(img, width, height, upload);

        }

        // 缩略图片

        function resize(img, width, height, callback){

            // 创建临时图片对象

            var image = new Image;

            // 创建画布

            var canvas = document.createElement('canvas');

            var context = canvas.getContext('2d');

            // 临时图片加载

            image.onload = function(){

                // 图片尺寸

                var img_w = image.naturalWidth;

                var img_h = image.naturalHeight;

                // 缩略后尺寸

                var dimg_w;

                var dimg_h;

                // 计算缩略尺寸

                dimg_w = width;

                dimg_h = Math.ceil(dimg_w*img_h/img_w);

                if(dimg_h>height){

                    dimg_h = height;

                    dimg_w = Math.ceil(dimg_h*img_w/img_h);

                }

                // 定义画布尺寸

                canvas.width = dimg_w;

                canvas.height = dimg_h;

                // 在画布上按缩略尺寸画图

                context.drawImage(image, 0, 0, dimg_w, dimg_h);

                // 获取画布数据

                var imgdata = canvas.toDataURL(img.type);

                // 将画布数据回调返回

                if(typeof(callback)==='function'){

                    callback(imgdata);

                }

            }

            // file reader

            var reader = new FileReader();

            reader.readAsDataURL(img);

            reader.onload = function(e){

                image.src = reader.result;

            }

        }

        // 上传图片

        var upload = function(imgdata){

            $.post("server.php", {img: imgdata}, function(ret){

                if(ret.img!=''){

                    $('#showimg').html('<a href="' + ret.img + '" target="_blank"><img src="' + ret.img + '"></a>');

                }else{

                    alert('upload fail');

                }

            }, 'json');

        }

  }

  </script>

 </head>

 <body>

  <p class="title">HTML5按比例缩略图片并异步上传的实例</p>

  <div class="main">

      <p class="file">图片：<input type="file" id="img"></p>

      <p>宽：<input type="text" id="width" value="320"></p>

      <p>高：<input type="text" id="height" value="240"></p>

      <p><input type="button" id="upload" value="按比例缩略图片并上传"></p>

  </div>

  <p class="showimg" id="showimg"></p>

 </body>

</html>
$img = isset($_POST['img'])? $_POST['img'] : '';

// 获取图片

list($type, $data) = explode(',', $img);

// 判断类型

if(strstr($type,'image/jpeg')!=''){

    $ext = '.jpg';

}elseif(strstr($type,'image/gif')!=''){

    $ext = '.gif';

}elseif(strstr($type,'image/png')!=''){

    $ext = '.png';

}

// 生成的文件名

$photo = time().$ext;

// 生成文件

file_put_contents($photo, base64_decode($data), true);

// 返回

header('content-type:application/json;charset=utf-8');

$ret = array('img'=>$photo);

echo json_encode($ret);

HTML5按比例缩略图片并上传的实例的更多相关文章

  1. hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...

  2. [html5+java]文件异步读取及上传核心代码

    html5+java 文件异步读取及上传关键代码段 功能: 1.多文件文件拖拽上传,file input 多文件选择 2.html5 File Api 异步FormData,blob上传,图片显示 3 ...

  3. 【javascript】html5中使用canvas编写头像上传截取功能

    [javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...

  4. webuploader的一个页面多个上传按钮实例

    借鉴一位大佬的demo  附上他的github地址https://github.com/lishuqi 我把他的cxuploader.js改了不需要预览  直接上传图片后拿到回传地址给img标签显示图 ...

  5. PHP+ajaxForm异步带进度条上传文件实例

    在使用ajaxForm方法之前,首先需要安装form.js的插件,网上有: 一.首先说用法,ajaxForm可以接收0或1个参数,该参数可以是一个变量.一个对象或回调函数,这个对象主要有以下参数: v ...

  6. BootStrap fileinput.js文件上传组件实例代码

    1.首先我们下载好fileinput插件引入插件 ? 1 2 3 <span style="font-size:14px;"><link type="t ...

  7. PHP-------文件上传的实例

    文件上传的实例 一.上传头像 在注册时,要求用户上传头像,登陆主页面,显示用户信息时,头像也要显示出来. 例子: 注册页面: 图片存数据库时是text类型. <title>无标题文档< ...

  8. HTTP的上传文件实例分析

    这个是http文件传输的一种格式,当时不知道这种格式,废弃. HTTP的上传文件实例分析 由于论坛不支持Word写文章发帖. 首先就是附件发送怎么搞,这个必须解决.论坛是php的.我用Chrome类浏 ...

  9. jQuery.uploadify文件上传组件实例讲解

    1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...

随机推荐

  1. 2016"百度之星" - 初赛（Astar Round2A） A.All X 矩阵快速幂

    All X  Time Limit: 2000/1000 MS (Java/Others)  Memory Limit: 65536/65536 K (Java/Others) Problem Des ...

  2. 经典线程同步问题(生产者&消费者)--Java实现

    生产者-消费者(producer-consumer)问题是一个著名的线程同步问题.它描述的是:有一群生产者线程在生产产品,并将这些产品提供给消费者线程去消费. 为使生产者与消费者之间能够并发执行,在两 ...

  3. 在Angular中定义共享的Providers

    转自:https://segmentfault.com/a/1190000010700308 有时,你需要在 Angular 应用中创建一个共享模块,该模块定义了功能模块和lazy-loaded模块可 ...

  4. angular的 表单

    一般来讲表单可能遇到的问题:1.如何数据绑定.2.验证表单.3.显示出错信息.4.整个form的验证.5.避免提交没有验证通过的表单.6.防止多系提交. input属性:nameng-modelng- ...

  5. hdu2188巴什博弈

    裸题,直接套公式 巴什游戏只是换了一个说法而已 #include<map> #include<set> #include<cmath> #include<qu ...

  6. 2-7-搭建DNS服务器实现域名解析

    学习服务的方法: 了解服务的作用:名称,功能,特点 安装服务 配置文件的位置,端口 服务开启和关闭的脚本 修改配置文件(实战举例) 排错(从上到下,从内到外) -------------------- ...

  7. JavaScript---详解cookie

    1.什么是cookie? 在讨论cookie之前,需要知道“会话跟踪”这个概念. 1. 什么是会话  客户端打开与服务器的连接发出请求到服务器响应客户端请求的全过程称之为会话 2. 什么是会话跟踪  ...

  8. java Cookie 获取历史记录列表（三）

    /** * 获取Cookie里面的东西 */ protected List<String> getCookieList() { Cookie[] cookies = null; Cooki ...

  9. POJ 3278 Catch That Cow bfs 难度:1

    http://poj.org/problem?id=3278 从n出发,向两边转移,为了不使数字无限制扩大,限制在2*k以内, 注意不能限制在k以内,否则就缺少不断使用-1得到的一些结果 #inclu ...

  10. MIPS 汇编指令学习

    MIPS 寄存器 MIPS comes with 32 general purpose registers named $0. . . $31Registers also have symbolic ...