使用html5 FileReader获取图片，并异步上传到server(不使用iframe)



原理：

1.使用FileReader 读取图片的base64编码

2.使用ajax。把图片的base64编码post到server。

3.依据接收到post的数据分析图片的类型(jpg,gif,png)。并把base64_decode后的数据生成相应类型的图片文件。

html：

<!DOCTYPE HTML PUBLIC>

<html>

 <head>

  <meta charset="utf-8">

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

  <title>使用html5 FileReader获取图片。并异步上传到server(not iframe)</title>

  <style type="text/css">

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

    p{margin:0px;}

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

    .file{position:absolute; width:100%; font-size:90px;}

    .filebtn{display:block; position:relative; height:110px; color:#FFFFFF; background:#06980e; font-size:48px; line-height:110px; text-align:center; cursor:pointer; border: 3px solid #cccccc;}

    .filebtn:hover{background:#04bc0d;}

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

  </style>

  <script type="text/javascript">

  window.onload = function(){

    // 选择图片

    document.getElementById('img').onchange = function(){

        var img = event.target.files[0];

        // 推断是否图片

        if(!img){

            return ;

        }

        // 推断图片格式

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

            alert('图片仅仅能是jpg,gif,png');

            return ;

        }

        var reader = new FileReader();

        reader.readAsDataURL(img);

        reader.onload = function(e){ // reader onload start

            // ajax 上传图片

            $.post("server.php", { img: e.target.result},function(ret){

                if(ret.img!=''){

                    alert('upload success');

                    $('#showimg').html('<img src="' + ret.img + '">');

                }else{

                    alert('upload fail');

                }

            },'json');

        } // reader onload end

    }

  }

  </script>

 </head>

 <body>

  <p class="title">使用html5 FileReader获取图片，并异步上传到server(not iframe)</p>

  <p><input type="file" class="file" id="img"><label class="filebtn" for="img" title="JPG,GIF,PNG">请选择图片</label></p>

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

 </body>

</html>

server.php

<?

php

$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 FileReader获取图片，并异步上传到server(不使用iframe)的更多相关文章

  1. 使用 html5 FileReader 获取图片, 并异步上传到服务器 (不使用 iframe)

    为什么80%的码农都做不了架构师?>>>   原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax,把图片的base64编码post到服务器. 3.根据 ...

  2. HTML5预览图片、异步上传文件

    注意啦:本文的代码都是以JQuery为示例,jq_开头的变量都是jq对象. 在HTML5中,我们可以在图片上传之前对图片进行预览,就像下面这么做 jq_upload_file.change(funct ...

  3. 使用html5 FileReader获取图片，并异步上传到服务器(不使用iframe)

    使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe)   原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax,把图片的base64编码 ...

  4. HTML5实现图片文件异步上传

    原文:HTML5实现图片文件异步上传 利用HTML5的新特点做文件异步上传非常简单方便,本文主要展示JS部分,html结构.下面的代码并未使用第三发库,如果有参照,请注意一些未展现出来的代码片段.我这 ...

  5. JSP+SpringMVC框架使用WebUploader插件实现注册时候头像图片的异步上传功能

    一.去官网下载webuploader文件上传插件 https://fex.baidu.com/webuploader/ 下载好后把它放到Javaweb项目的文件夹中(我放到了webcontent下面的 ...

  6. 安卓获取软硬件信息并上传给server(Socket实现)

    首先,项目结构如图--A:分为client部分CheckInfo和server端CheckInfo_Server.CheckInfo获取手机信息(Mac,Cpu,内存,已安装软件信息等)并上传到ser ...

  7. 百度 flash html5自切换 多文件异步上传控件webuploader基本用法

    双核浏览器下在chrome内核中使用uploadify总有302问题,也不知道如何修复,之所以喜欢360浏览器是因为帮客户控制渲染内核: 若页面需默认用极速核,增加标签:<meta name=& ...

  8. ASP.NET MVC 文件异步上传问题处理

    最近在做一个网站,用asp.net MVC4.0来开发,今天遇到了个小问题,通过查找相关渠道解决了,在这里把这个问题写出来,问题非常简单,不喜勿喷,mark之希望可以给遇到相同问题的初学者一点帮助.我 ...

  9. html5图片异步上传/ 表单提交相关

    1 form 表单 get/post提交时候. action地址(或者啥ajax的url地址) 会涉及到跨域问题 常见跨域问题http://www.cnblogs.com/rainman/archiv ...

随机推荐

  1. 初学layer

    canvas是支持图层layer渲染这种技术的,canvas默认就有一个layer,当我们平时调用canvas的各种drawXXX()方法时,其实是把所有的东西都绘制到canvas这个默认的layer ...

  2. TensorFlow-Gpu环境搭建——Win10+ Python+Anaconda+cuda

    参考:http://blog.csdn.net/sb19931201/article/details/53648615 https://segmentfault.com/a/1190000009803 ...

  3. node 搭建本地服务器

    /** * 代理服务器 natapp -authtoken f1bdaa0535788971 * 热部署指令 supervisor index */ const Koa = require('koa' ...

  4. 4星|《超级技术：改变未来社会和商业的技术趋势》：AI对人友好吗

    超级技术:改变未来社会和商业的技术趋势 多位专家或经济学人编辑关于未来的预测,梅琳达·盖茨写了其中一章.在同类书中属于水平比较高的,专家只写自己熟悉的领域,分析与预测有理有据而不仅仅是畅想性质. 以下 ...

  5. 一个数据去重sql

    参考: https://www.jb51.net/article/129656.htm DELETE testcaseFROM testcase,  (  SELECT  max(id) id,  a ...

  6. 用 ilasm 反编译、修改.net dll文件

    有些.net dll我们没有源码,如果要修改某些东西,可以用ilasm.exe反编译为il代码,修改后再编译回dll ilasm通常放在以下路径 C:\Windows\Microsoft.NET\Fr ...

  7. drf07 过滤 排序 分页 异常处理 自动生成接口文档

    4. 过滤Filtering 对于列表数据可能需要根据字段进行过滤,我们可以通过添加django-fitlter扩展来增强支持. pip install django-filter 在配置文件sett ...

  8. openstack——neutron网络服务

    一.neutron 介绍:   Neutron 概述 传统的网络管理方式很大程度上依赖于管理员手工配置和维护各种网络硬件设备:而云环境下的网络已经变得非常复杂,特别是在多租户场景里,用户随时都可能需要 ...

  9. CVPR2016 Paper list

    CVPR2016 Paper list ORAL SESSIONImage Captioning and Question Answering Monday, June 27th, 9:00AM - ...

  10. uva10082 WERTYU (Uva10082)

    A common typing error is to place the hands on the keyboard one row to the right of the correct posi ...