<!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. 介绍一个python视频处理库:moviepy

    由于博客园的插件和我自己博客的插件不一致,代码以及视频插入转换很麻烦,所以还是我原来博客的地址查看吧. 介绍一个python视频处理库:moviepy

  2. linuxI/O重定向

    假设有这么一段python3程序: import sys ")sys.stderr.write("stderr1 ") 现在想要把程序的输出以及错误信息都存在文件中. 一 ...

  3. platforms

    1.Qt551x86_vs2013 所有的 platforms文件夹 的路径: 1.1.E:\ZC_ProgramFiles_161104\Qt551_vs2013\5.5\msvc2013\plug ...

  4. Spring IOC 源码简单分析 03 - 循环引用

    ### 准备 ## 目标 了解 Spring 如何处理循环引用 ##测试代码 gordon.study.spring.ioc.IOC03_CircularReference.java   ioc03. ...

  5. EVEREST Ultimate Edition 5.50 正式版 序列号

    EVEREST Ultimate Edition 5.50 正式版 序列号 EVEREST 5.5 Final 序列号 注册码 搜集到的EVEREST最新的5.5版本的序列号 序列号: C4J1IPH ...

  6. How To Use Amazon MWS To Download Unshipped Order Reports

    文章来源:http://www.samswiches.com/2011/02/how-to-use-amazon-mws-to-download-unshipped-order-reports/ ac ...

  7. JAVA模块以及未来（转）

    Java 9,OSGi以及模块化的未来 Java 9.OSGi以及模块化的未来(第二部分) Java 9终于要包含Jigsaw项目了

  8. 同一sql表，在页面展示多级菜单

    2.

  9. XML——DTD

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  10. Entity Framework 数据并发访问错误原因分析与系统架构优化

    博客地址 http://blog.csdn.net/foxdave 本文主要记录近两天针对项目发生的数据访问问题的分析研究过程与系统架构优化,我喜欢说通俗的白话,高手轻拍 1. 发现问题 系统新模块上 ...