<!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. codevs 1690 开关灯 线段树+延迟标记

    1690 开关灯  时间限制: 1 s  空间限制: 128000 KB   题目描述 Description YYX家门前的街上有N(2<=N<=100000)盏路灯,在晚上六点之前,这 ...

  2. class []的用法

    span[class='test']    =>匹配所有带有class类名test的span标签 span[class *='test']  =>匹配所有包含了test字符串的class类 ...

  3. Java回顾之JDBC

    这篇文章里,我们来讨论一些和JDBC相关的话题. 概述 尽管在实际开发过程中,我们一般使用ORM框架来代替传统的JDBC,例如Hibernate或者iBatis,但JDBC是Java用来实现数据访问的 ...

  4. 数论练习（5）——青蛙的约会（扩gcd）

    青蛙的约会 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 122502   Accepted: 26015 Descript ...

  5. 阿里云负载均衡配置https记录

    配置前端协议是443,后端是80 问题1记录: 例如访问https://www.xxx.com,在后端服务器上面获取是http还是https请求协议实际上是http: 因为我们先请求负载均衡,负载均衡 ...

  6. 修复Ubuntu下XTerm不能正常显示中文字体的问题

    打开/etc/X11/app-defaults/XTerm在最后添加如下代码: Xft.dpi:96         xpdf.title: PDF         XTerm*faceSize: 1 ...

  7. SQLServer查看用户连接数

    SELECT login_name, ) user_count FROM Sys.dm_exec_requests dr WITH(nolock) RIGHT OUTER JOIN Sys.dm_ex ...

  8. 基于Open XML 导出数据到Excel

    数据导出的结果: 步骤1.新建一个Excel 文档,模板根据自己需要设置 步骤2.使用OpenXml  打开Excel 文件 步骤3.点击ReflectCode 功能,生成相应的代码文档 using ...

  9. POI2012题解

    POI2012题解 这次的完整的\(17\)道题哟. [BZOJ2788][Poi2012]Festival 很显然可以差分约束建图.这里问的是变量最多有多少种不同的取值. 我们知道,在同一个强连通分 ...

  10. 服务器大量TIME_WAIT和CLOSE_WAIT的原因及解决办法

    Linux服务器下查看网络连接的状态 netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]}' 它会显示例如下面的信息: ...