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

 

原理：

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

2.使用ajax，把图片的base64编码post到服务器。

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

html：

  1. <!DOCTYPE HTML PUBLIC>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  6. <title>使用html5 FileReader获取图片，并异步上传到服务器(not iframe)</title>
  7. <style type="text/css">
  8. body{margin: 0px; background:#f2f2f0;}
  9. p{margin:0px;}
  10. .title{color:#FFFF00; background:#000000; text-align:center; font-size:24px; line-height:50px; font-weight:bold;}
  11. .file{position:absolute; width:100%; font-size:90px;}
  12. .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;}
  13. .filebtn:hover{background:#04bc0d;}
  14. .showimg{margin:10px auto 10px auto; text-align:center;}
  15. </style>
  16. <script type="text/javascript">
  17. window.onload = function(){
  18. // 选择图片
  19. document.getElementById('img').onchange = function(){
  20. var img = event.target.files[0];
  21. // 判断是否图片
  22. if(!img){
  23. return ;
  24. }
  25. // 判断图片格式
  26. if(!(img.type.indexOf('image')==0 && img.type && /\.(?:jpg|png|gif)$/.test(img.name)) ){
  27. alert('图片只能是jpg,gif,png');
  28. return ;
  29. }
  30. var reader = new FileReader();
  31. reader.readAsDataURL(img);
  32. reader.onload = function(e){ // reader onload start
  33. // ajax 上传图片
  34. $.post("server.php", { img: e.target.result},function(ret){
  35. if(ret.img!=''){
  36. alert('upload success');
  37. $('#showimg').html('<img src="' + ret.img + '">');
  38. }else{
  39. alert('upload fail');
  40. }
  41. },'json');
  42. } // reader onload end
  43. }
  44. }
  45. </script>
  46. </head>
  47. <body>
  48. <p class="title">使用html5 FileReader获取图片，并异步上传到服务器(not iframe)</p>
  49. <p><input type="file" class="file" id="img"><label class="filebtn" for="img" title="JPG,GIF,PNG">请选择图片</label></p>
  50. <p class="showimg" id="showimg"></p>
  51. </body>
  52. </html>

server.php

  1. <?php
  2. $img = isset($_POST['img'])? $_POST['img'] : '';
  3. // 获取图片
  4. list($type, $data) = explode(',', $img);
  5. // 判断类型
  6. if(strstr($type,'image/jpeg')!==''){
  7. $ext = '.jpg';
  8. }elseif(strstr($type,'image/gif')!==''){
  9. $ext = '.gif';
  10. }elseif(strstr($type,'image/png')!==''){
  11. $ext = '.png';
  12. }
  13. // 生成的文件名
  14. $photo = time().$ext;
  15. // 生成文件
  16. file_put_contents($photo, base64_decode($data), true);
  17. // 返回
  18. header('content-type:application/json;charset=utf-8');
  19. $ret = array('img'=>$photo);
  20. echo json_encode($ret);
  21. ?>

使用html5 FileReader获取图片，并异步上传到服务器(不使用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获取图片，并异步上传到server(不使用iframe)

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

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

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

  5. 使用ajax上传图片，支持图片即时浏览，支持js图片压缩后上传给服务器

    使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进 ...

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

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

  7. HTML5 文件域+FileReader 分段读取文件并上传到服务器(六)

    说明:使用Ajax方式上传,文件不能过大,最好小于三四百兆,因为过多的连续Ajax请求会使后台崩溃,获取InputStream中数据会为空,尤其在Google浏览器测试过程中. 1.简单分段读取文件为 ...

  8. 【Web】前端裁剪图片，并上传到服务器（Jcrop+canvas）

    web网站中常常有的功能:上传头像.上传封面等:一般图片都有一定的比例限制,所以需要前端在上传图片时,进行裁剪,并把裁剪后的图片进行上传. 本例采用Jcrop插件实现裁剪效果,canvas裁剪图片,并 ...

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

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

随机推荐

  1. bootloader (run in CLI or Qt-GUI mode)

    1.PC端 https://github.com/cidadao/efm32_loader http://theramblingness.com/2015/07/16/a-gui-and-cli-ut ...

  2. EditPlus开发Python的简单设置

    EditPlus是一个功能强大的编辑器,这里介绍用它来开发Python程序所需要的简单设置. 环境:win7 1.设置Python语法缩进: [1]工具-->设置用户自定义工具 [2]在分类面板 ...

  3. Class.forName()用法详解

    Class.forName()用法详解 标签: classjvmjdbc数据库documentationjava 2012-03-29 09:39 40414人阅读 评论(8) 收藏 举报  分类: ...

  4. Java面试笔记

    1.&和&& if(str != null& !str.equals("")){ System.out.println("ok" ...

  5. java 使用BeanUtils.copyProperties(Object source,Object target) 复制字段值

    BeanUtils.copyProperties(person, wsPerson);把person的字段值,复制给wsPerson // 只复制两个实体中,字段名称一样的 很有用的一个功能...

  6. Java继承和多态实例

    我们知道面向对象的三大特性是封装.继承和多态.然而我们有时候总是搞不清楚这些概念.下面对这些概念进行整理, 为以后面向抽象的编程打下坚实的基础. 封装的概念还是很容易理解的.如果你会定义类,那么相信你 ...

  7. 让vim成为ide

    gvim的tabe标签页打开跟在同一个页面(标签中)打开,对buffer的影响都是一样的,都是增加新的buffer 可以认为gvim的命令行模式跟bash shell里的操作差不多 在命令行模式中通过 ...

  8. php 计算字符串长度

    在项目的开发中,常常遇到要计算一个字符串的长度(中英文结合),由于产品要求不同,每个中文的长度要求也不一样. 解决utf-8编码下的字符串长度(可自定义每个中英文算几个字节) /** * 计算字符串长 ...

  9. GetDlgItem

    GetDlgItem是父窗口用来获取它的子窗口的句柄的. 如果是在一个对话框里想要获取另一个对话框中元素的句柄,假设B对话框的指针为pWnd,则pCtrl = pWnd->GetDlgItem( ...

  10. 摄像头/光驱故障：由于其配置信息(注册表中的)不完整或已损坏，Windows 无法启动这个硬件设备。 (代码 19)

    原因:出现这条提示一般都是因为注册表错误引起的,重装驱动或应用程序无法解决. 设备管理器中相关设备-故障如图: 以下方法可以解决问题: 1.在任务栏上点“开始”菜单-“运行”,输入”regedit“ ...