使用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. photoshop制作古风画

    效果图: 素材结构: 前期准备: 素材准备,我的素材包括:印章.花束.二次元妹纸,背景图片. 软件准备,用的软件是 photoshop CS6. 把二次元妹纸拖入photoshop,把她抠出来,Ctr ...

  2. 关闭掉eclipse启动的自动更新功能(提高打开eclipse的速度)

  3. html5——3D案例（立体导航）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. JS——百度背景图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Python标准库sys

    1.命令行参数sys.argv 我们从Python语言之模块第一部分的例子开始,看看sys.argv中到底存了些什么内容. #Filename: using_sys.py import sys i=0 ...

  6. 6、scala Map和Tuple

    1.  创建Map 2.访问Map元素 3.修改Map元素的值 4.遍历Map 5.SortedMap和LinkedHashMap 6.Map的元素类型Tuple 1.  创建Map 创建不可变的Ma ...

  7. JS监听事件错误：Uncaught TypeError: xx（函数名）is not a function at HTMLInputElement.onclick

    事件监听一直出错,提示已定义的函数名不是一个函数,折腾了好久才想到,原来是函数名和JS内部关键字重名造成的. 以前也遇到过这种情况,但因为发生的概率比较小,就没太在意,但是这次感觉这方面确实需要注意, ...

  8. ajax请求参数的格式

    因为多写了一个contentType=“text/html”,请求的时候,参数总是转成了url&拼接的格式,导致请求不成功,调试了老半天 这个也是奇怪,为什么post只能接收json格式的数据 ...

  9. linux搭建mysql服务器及可视化工具

    环境: ubutnu 18.4 mysql 5.7 参考: 安装 https://www.cnblogs.com/opsprobe/p/9126864.html 配置用户权限 https://baij ...

  10. Centos7安装gitlab服务器

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