使用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. Jquery音频播放插件下载地址（有Html、JS、CSS、音频）

    有详细的html文件.全部JS代码文件.Css样式文件.测试音频资料 音频播放插件下载链接(百度云): http://pan.baidu.com/s/1pKC904F 提取码评论留邮箱发送,谢谢!

  2. D3.js 力导向图（小气泡围绕中心气泡）

    html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...

  3. phpstorm如何在同一个文件夹打开多个目录

    phpstorm默认一个窗口只显示一个项目,如果新建一个项目,他会给你个选项卡,问你是在新窗口打开新项目还是在本窗口打开. 能不能在一个窗口打开多个项目呢?就像sublime text那样,其实是可以 ...

  4. 11、scala函数式编程

    1.将函数赋值给变量 2.匿名函数 3.高阶函数 4.高阶函数的类型推断 5.Scala的常用高级函数 6.闭包 7.SAM转换 8.Currying函数 9.return 1.将函数赋值给变量 Sc ...

  5. scp: /xxxx: not a regular file

    问题描述 scp root@10.2.1.92:/home /home/wangju/databakroot@10.2.1.92's password: xxxxscp: /home: not a r ...

  6. Centos7安装gitlab服务器

    1.先按照官方教程 https://about.gitlab.com/downloads/#centos7 大概内容如下: 1. Install and configure the necessary ...

  7. 如何用windbg查看_eprocess结构

    打开菜单: File->Symbol File Path... 输入: C:/MyCodesSymbols; SRV*C:/MyLocalSymbols*http://msdl.microsof ...

  8. CAD调用移动命令

    主要用到函数说明: _DMxDrawX::SendStringToExecuteFun 把命令当着函数执行,可以传参数,详细说明如下: 参数 说明 IDispatch* pParam 命令参数,IMx ...

  9. python解析邮件的时候编码问题

    import sys import base64 import os import re s1 = '"=?UTF-8?B?56mG6Zi/5rWpKOWnnOW8iyk=?=" ...

  10. [ZJOJ] 5772【NOIP2008模拟】今天你AK了吗

    Description AK:All kill“你为什么没背书?”“没有为什么,我就是没背书.”“……我去年买了个表,G—U—N!”头铁王InFleaKing把背书的时间都拿去列排列了......n= ...