<!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. 原生js实现ajax的文件异步提交功能、图片预览功能.实例

    采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...

  2. Angular i18n

    Angular2中使用ngx-translate进行国际化http://blog.csdn.net/u014291497/article/details/61233033 在 Angular 项目中添 ...

  3. Linux 常用环境搭建

    已有环境 python 2.6.6 jdk 1.7 —tomcat— —jenkins— —jq— —Python 2.7— —pip— —PIL— —Android SDK— —yum or apt ...

  4. Android------视频播放器（包含全屏播放，快退，快进，腾讯新闻的列表播放等）

    前段时间做了一个新闻APP,涉及到了列表视频播放,和腾讯新闻APP差不多,总结了一下代码,写了一个Demo来分享给大家. 用了  TabLayout+RecylerView+自定义视频控件  完成的 ...

  5. UVA-11082 Matrix Decompressing （网络流建模）

    题目大意:给出一个由1到20组成的整数矩阵的每一行和每一列的和,构造这个矩阵.输出任意一个构造方案. 题目分析:将每一行视作一个点x,将每一列视作一个点y.对于矩阵中的每一个格子,都对应一个二元关系& ...

  6. oracle分区交换技术

    交换分区的操作步骤如下: 1. 创建分区表t1,假设有2个分区,P1,P2.2. 创建基表t11存放P1规则的数据.3. 创建基表t12 存放P2规则的数据.4. 用基表t11和分区表T1的P1分区交 ...

  7. hdu2883

    题解: 网络流 用一个离散化 代码: #include<cstdio> #include<cstring> #include<algorithm> using na ...

  8. WIN8.1 PRO RTM VOL.Enterprise.2013.10.17

    Windows 8.1 Pro VL (x64) - DVD (Chinese-Simplified)ISO|Chinese - Simplified|发布日期: 2013/10/17文件名: cn_ ...

  9. git 忽略不提交的文件3种情形

    1..gitignore文件 :从未提交过的文件,从来没有被 Git 记录过的文件 也就是添加之后从来没有提交(commit)过的文件,可以使用.gitignore忽略该文件.只能作用于未跟踪的文件( ...

  10. New Concept English Two 21 55

    $课文53  触电的蛇 544. At last firemen have put out a big forest fire in California. 消防队员们终于扑灭了加利福尼亚的一场森林大 ...