原理：

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

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

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

html：

[javascript] view plaincopy

  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

[php] view plaincopy

  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. ?>

File API

由于JavaScript对用户上传的文件操作非常有限，尤其是无法读取文件内容，使得很多需要操作文件的网页不得不用Flash这样的第三方插件来实现。

随着HTML5的普及，新增的File API允许JavaScript读取文件内容，获得更多的文件信息。

HTML5的File API提供了File和FileReader两个主要对象，可以获得文件信息并读取文件。

下面的例子演示了如何读取用户选取的图片文件，并在一个<div>中预览图像：

图片预览：

  1. var
  2.     fileInput = document.getElementById('test-image-file'),
  3.     info = document.getElementById('test-file-info'),
  4.     preview = document.getElementById('test-image-preview');
  5. // 监听change事件:
  6. fileInput.addEventListener('change', function () {
  7.     // 清除背景图片:
  8.     preview.style.backgroundImage = '';
  9.     // 检查文件是否选择:
  10.     if (!fileInput.value) {
  11.         info.innerHTML = '没有选择文件';
  12.         return;
  13.     }
  14.     // 获取File引用:
  15.     var file = fileInput.files[0];
  16.     // 获取File信息:
  17.     info.innerHTML = '文件: ' + file.name + '<br>' +
  18.                      '大小: ' + file.size + '<br>' +
  19.                      '修改: ' + file.lastModifiedDate;
  20.     if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
  21.         alert('不是有效的图片文件!');
  22.         return;
  23.     }
  24.     // 读取文件:
  25.     var reader = new FileReader();
  26.     reader.onload = function(e) {
  27.         var
  28.             data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'
  29.         preview.style.backgroundImage = 'url(' + data + ')';
  30.     };
  31.     // 以DataURL的形式读取文件:
  32.     reader.readAsDataURL(file);
  33. });

上面的代码演示了如何通过HTML5的File API读取文件内容。以DataURL的形式读取到的文件是一个字符串，类似于data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...，常用于设置图像。如果需要服务器端处理，把字符串base64,后面的字符发送给服务器并用Base64解码就可以得到原始文件的二进制内容。

回调

上面的代码还演示了JavaScript的一个重要的特性就是单线程执行模式。在JavaScript中，浏览器的JavaScript执行引擎在执行JavaScript代码时，总是以单线程模式执行，也就是说，任何时候，JavaScript代码都不可能同时有多于1个线程在执行。

你可能会问，单线程模式执行的JavaScript，如何处理多任务？

在JavaScript中，执行多任务实际上都是异步调用，比如上面的代码：

  1. reader.readAsDataURL(file);

就会发起一个异步操作来读取文件内容。因为是异步操作，所以我们在JavaScript代码中就不知道什么时候操作结束，因此需要先设置一个回调函数：

  1. reader.onload = function(e) {
  2.     // 当文件读取完成后，自动调用此函数:
  3. };

当文件读取完成后，JavaScript引擎将自动调用我们设置的回调函数。执行回调函数时，文件已经读取完毕，所以我们可以在回调函数内部安全地获得文件内容。

转载于:https://my.oschina.net/dawd/blog/906803

使用 html5 FileReader 获取图片, 并异步上传到服务器 (不使用 iframe)的更多相关文章

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

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

  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. python 网络编程---粘包

    一.什么是粘包?(只有在TCP中有粘包现象,在UDP中永远不会粘包) 黏包不一定会发生. 如果发生 了:1.可能是在客户端已经粘了 2.客户端没有粘,可能是在服务端粘了. 所谓的粘包问题:主要是是因为 ...

  2. TP3快速入门

    一.查询 D方法实例化模型类的时候通常是实例化某个具体的模型类,如果你仅仅是对数据表进行基本的CURD操作的话,使用M方法实例化的话,由于不需要加载具体的模型类,所以性能会更高. $map = arr ...

  3. ubuntu 虚拟机复制后打开蓝屏解决办法

    sudo apt-get install xserver-xorg-lts-utopic sudo dpkg-reconfigure xserver-xorg-lts-utopic reboot

  4. Pytest系列（17）- pytest-xdist分布式测试的原理和流程

    pytest-xdist分布式测试的原理 前言 xdist的分布式类似于一主多从的结构,master机负责下发命令,控制slave机:slave机根据master机的命令执行特定测试任务 在xdist ...

  5. Python操作rabbitmq系列（四）:根据类型订阅消息

    在上一章中,所有的接收端获取的所有的消息.这一章,我们将讨论,一些消息,仍然发送给所有接收端.其中,某个接收端,只对其中某些消息感兴趣,它只想接收这一部分消息.如下图:C1,只对error感兴趣,C2 ...

  6. hive常用函数五

    复合类型构建操作 1. Map类型构建: map 语法: map (key1, value1, key2, value2, …) 说明:根据输入的key和value对构建map类型 举例: hive& ...

  7. 动态规划_基础_最长公共子序列_多种方法_递归/dp

    D: 魔法少女资格面试 题目描述 众所周知,魔法少女是一个低危高薪职业.随着近年来报考魔法少女的孩子们越来越多,魔法少女行业已经出现饱和现象!为了缓和魔法少女界的就业压力,魔法少女考核员丁丁妹决定增加 ...

  8. Tesseract-ocr 安装配置

    参考:https://jingyan.baidu.com/article/219f4bf788addfde442d38fe.html 1.下载图形识别工具Tesseract-ocr,下载路径https ...

  9. O - Employment Planning HDU - 1158

    题目大意: 第一行一个n,表示共n个月份,然后第二行分别表示一个工人的聘请工资,月薪水,解雇工资.第三行是n个月每个月需要的工人的最少数目.然后求最少花费 题解: dp[i][j] 表示第i个月聘请j ...

  10. python3_learn 实现文件夹内批量对图片重命名

    初衷 练习Python,提高动手能力. 珍藏的壁纸文件夹名命有点乱. 可以学习下一些基础的库 开始(.jpg,无筛选) First 首先找到OS库,寻找可以遍历文件名的.找到了OS.walk() os ...