使用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. 微信接口本地调试（IIS服务器）

    1.下载ngrok,并注册获得token.官网下载地址:https://ngrok.com/ 如果你是在官网下载的,到后面映射域名的时候会要求购买他们的服务. 这里我们用一个国内免费的ngrok服务器 ...

  2. 8、scala面向对象编程之对象

    1.  Object 2.伴生对象 3.让object继承抽象类 4.apply方法 5.main方法 6.用object实现枚举功能 1.  Object Object,相当于class的单个实例, ...

  3. RAID技术简单分析

    RAID技术解析 RAID:独立磁盘冗余阵列(Redundant Array of Independent Disks) RAID技术就是将许多块硬盘设备组合成一个容量更大.更安全的硬盘组,可以将数据 ...

  4. Lazarus Coolbar and AnchroDocking

    在lazarus1.6里加载了AnchroDocking后,Coolbar突然不见了,找了好久没找到,原来在这里! 在AnchroDocking中可能是为了界面的最大化,默认是开始Toolbar 而关 ...

  5. 注解是建立在class文件基础上的东西，同C语言的宏有异曲同工的效果

    注解是建立在class文件基础上的东西,同C语言的宏有异曲同工的效果 https://www.cnblogs.com/deman/p/5519901.html @是java注解,即annotation ...

  6. python 模块学习——time模块

    Python语言中与时间有关的模块主要是:time,datetime,calendar time模块中的大多数函数是调用了所在平台C library的同名函数, 所以要特别注意有些函数是平台相关的,可 ...

  7. On branch master nothing to commit, working tree clean ERROR: Repository not found. fatal: Could not read from remote repository.

    将gitbash部署hexo到github:hexo deploy 报以下错误: Administrator@liu MINGW64 /Hexo $ hexo d INFO Deploying: gi ...

  8. kesci---2019大数据挑战赛预选赛---情感分析

    一.预选赛题------文本情感分类模型 本预选赛要求选手建立文本情感分类模型,选手用训练好的模型对测试集中的文本情感进行预测,判断其情感为「Negative」或者「Positive」.所提交的结果按 ...

  9. discuz 微社区开通

    检测api: http://wsq.discuz.com/?a=apitest

  10. 消除input框的默认样式

    input, button, select, textarea { outline: none; -webkit-appearance: none; border-radius: 0; } outli ...