<!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 三维数组找最小值

    #声明三维数组 num=[[[,,],[,,],[,,]], \ [[,,],[,,],[,,]]] value=num[][][]#设置main为num数组的第一个元素 ): ): ): if(va ...

  2. Spring IOC 源码简单分析 02 - Bean Reference

    ### 准备 ## 目标 了解 bean reference 装配的流程 ##测试代码 gordon.study.spring.ioc.IOC02_BeanReference.java   ioc02 ...

  3. python批量修改ssh密码

    由于工作需要本文主结合了excel表格,对表格中的ssh密码进行批量修改 以下是详细代码(python3): #!/usr/bin/env python#-*-coding:utf-8-*- impo ...

  4. web 移动端事件总结

    1.https://www.jianshu.com/p/6f85e957a725 (web 移动端事件总结)

  5. h5桌面通知Notification

    H5中的桌面通知Notification 前言: 对于一个前端开发者,逛网页总会留意一些新奇的功能,对于上班总会用到Teambition的我,总是能收到Notification...所以今天就来研究下 ...

  6. Laravel框架中Validor中错误信息$error的输出

    @if (count($errors) > 0) <div class="alert alert-danger"> <ul> @foreach ($e ...

  7. EPANET头文件解读系列3——TOOLKIT.H

    /******************************************************************** TOOLKIT.H - Prototypes for EPA ...

  8. .NET连接MongoDB数据库实例教程

    这则小窍门将讲述如何开发一个.NET应用来连接Mongo数据库并执行多种操作.同时还稍微涉及了Mongo数据库和多种命令. 使用代码 让我们从Mongo数据库的一些细节和基本命令开始,并最终介绍如何创 ...

  9. 保卫萝卜官方PC版——含绿色版 V1.0.6Beta

    官方网站 | 安装版 | 绿色版

  10. Beta阶段第2周/共2周 Scrum立会报告+燃尽图 09

    作业要求[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2389] 版本控制:https://git.coding.net/liuyy08 ...