使用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. 【转】utf-8的中文是一个汉字占三个字节长度

    因为看到百度里面这个人回答比较生动,印象比较深刻,所以转过来做个笔记 原文链接 https://zhidao.baidu.com/question/1047887004693001899.html 知 ...

  2. dedecms:解析Robots.txt 协议标准

    Robots.txt 是存放在站点根目录下的一个纯文本文件.虽然它的设置很简单,但是作用却很强大.它可以指定搜索引擎蜘蛛只抓取指定的内容,或者是禁止搜索引擎蜘蛛抓取网站的部分或全部内容. 下面我们就来 ...

  3. centos7下手动制作trove镜像

    获取镜像 [root@bldattet1 ~]#  wget http://mirrors.aliyun.com/centos/7.5.1804/isos/x86_64/CentOS-7-x86_64 ...

  4. XML——读与写

    XML写入 private static void writeXml() { using (XmlTextWriter xml = new XmlTextWriter(@"C:\Users\ ...

  5. 正文处理命令及tar命令

    使用cat命令进行文件的纵向合并,具体命令如下所示(注意:>代表将左边命令的执行结果以覆盖的方式放到右边,>>代表将左边命令的执行结果追加到右边) 关于tar命令的一些用法: tar ...

  6. 170925_2 Python socket 创建UDP的服务器端和客户端

    [python版本]3.6 UDP服务器端: from socket import * from time import ctime host = '' port = 21567 buf_size = ...

  7. sqlserver 2014 删除主键约束

    truncate table menu SELECT * FROM sys.foreign_keys WHERE referenced_object_id=OBJECT_ID('menu'); --找 ...

  8. 5.21leetcode练习

    目录 两数之和 题目 答案 整数反转 题目 思路及答案 回文数 题目 思路及答案 希望每天进步一点点 两数之和 题目 新手司机上路,光荣翻车,没想出来.借了别人的答案,自行领会 答案 整数反转 题目 ...

  9. MHA的MySQL高可用方案实战

    功能: 1)master的故障切换(keepalived VIP的飘移) 2)主从复制角色的提升和重新转向 其中master 对外提供写服务,备选master2(实际的slave提供读服务,slave ...

  10. Xilinx FPGA的专用时钟引脚及时钟资源相关

    主要参考了https://www.eefocus.com/liu1teng/blog/12-02/237897_4533d.html .Xilinx UG471.UG472以及Xilinx Forum ...