<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>简单的html5 File测试 for pic2base64</title>

<style>

</style>

<script>

window.onload = function(){

    var input = document.getElementById("demo_input");

    var result= document.getElementById("result");

    var img_area = document.getElementById("img_area");

    if ( typeof(FileReader) === 'undefined' ){

        result.innerHTML = "抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！";

        input.setAttribute('disabled','disabled');

    }else{

        input.addEventListener('change',readFile,false);

    }

}

function readFile(){

    var file = this.files[0];

    //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件

    if(!/image\/\w+/.test(file.type)){

        alert("请确保文件为图像类型");

        return false;

    }

    var reader = new FileReader();

    reader.readAsDataURL(file);

    console.log();

    reader.onload = function(e){

            result.innerHTML = this.result;

            img_area.innerHTML = '<div class="sitetip">图片img标签展示：</div><img src="'+this.result+'" alt=""/>';

    }

}

</script>

</head>

<body>

    <form action="file.php" method="post">

<input type="file" value="sdgsdg" id="demo_input" />

<textarea name="img" id="result" rows=30 cols=300></textarea>

<p id="img_area"></p>

<input type="submit" value="提交">

</form>

</body>

</html>

服务器代码：

<?php

$base64_url=$_POST['img'];

$base64_body = substr(strstr($base64_url,','),1);

$data= base64_decode($base64_body );

file_put_contents('1.jpg',$data);

//或$image = imagecreatefromstring($data);

 ?>

　　

简单的html5 File base64 图片上传的更多相关文章

  1. LocalResizeIMG前端HTML5本地压缩图片上传，兼容移动设备IOS,android

    LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android jincon 发表于 2015-02-26 18:31:01 发表在: php开发 localresiz ...

  2. 利用cropper插件裁剪本地图片，然后将裁剪过后的base64图片上传至七牛云空间

    现在做的项目需要做一些图片处理,由于时间赶急,之前我便没有处理图片,直接将图片放在input[type=file]里面,以文件的形式提交给后台,这样做简直就是最低级的做法,之后各种问题便出来了,人物头 ...

  3. 基于html5的多图片上传，预览

    基于html5的多图片上传 本文是建立在张鑫旭大神的多文图片传的基础之上. 首先先放出来大神多图片上传的博客地址:http://www.zhangxinxu.com/wordpress/2011/09 ...

  4. input type=file实现图片上传，预览以及图片删除

    背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...

  5. php实现base64图片上传方式实例代码

    <?php /** * base64图片上传 * @param $base64_img * @return array */ header("content-type:text/htm ...

  6. file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  7. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  8. tp5 base64 图片上传

    /** * 保存图片 */ public function uploads($value='') { // $file = base64_decode(request()->file('imag ...

  9. 【转】html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

随机推荐

  1. 《University Calculus》-chaper13-多重积分-二重积分的计算

    之前关于二重积分的笔记,介绍了二重积分概念的引入,但是对于它的计算方法(化为累次积分),介绍的较为模糊,它在<概率论基础教程>中一系列的推导中发挥着很重要的作用. 回想先前关于二重积分的几 ...

  2. Xmpp integration with Asterisk

    http://gnu-linux.org/xmpp-integration-with-asterisk.html Xmpp stands for eXtensible Messaging and Pr ...

  3. CentOS 6.5 下安装 Redis 2.8.7（转）

    转自:http://www.cnblogs.com/haoxinyue/p/3620648.html CentOS 6.5 下安装 Redis 2.8.7 wget http://download.r ...

  4. 987654321 problem - SGU 107（找规律）

    题目大意:求n位数的平方的后几位结果是987654321的个数是多少. 分析:刚看到这道题的时候怀疑过有没有这样的数,于是暴力跑了一下,发现还真有,9位的数有8个,如下: i=111111111, i ...

  5. IntelliJ IDEA自用快捷键 转载

    最常用快捷键- 未分类 command Binding Description defeat - Ctrl+/ 代码提示 No - Ctrl+Alt+L 格式化代码   - Ctrl+B 快速打开光标 ...

  6. win10亮度不能调节的解决方法

    如果大家遇到Win10屏幕亮度调不了,该如何解决呢?以下是电脑百事网小编亲测比较有用的几种方法,希望能够帮助大家. 修改注册表解决Win10屏幕亮度无法调节 1.首先使用 Win+R 组合快捷键打开W ...

  7. win8 64位 mysql安装 Configuration file my.ini error code -1

    问题如题,解决方法: 1.由于目录中纯在中文,所以导致代码错误.故而把目录设置成全英文的. 2.下载64位mysql安装,安装32位mysql也会出现此问题.

  8. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（37）-文章发布系统④-百万级数据和千万级数据简单测试

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(37)-文章发布系统④-百万级数据和千万级数据简单测试 系列目录 我想测试EF在一百万条数据下的显示时间! ...

  9. Android核心基础(二)

    1.对应用进行单元测试 在实际开发中,开发android软件的过程需要不断地进行测试.而使用Junit测试框架,侧是正规Android开发的必用技术,在Junit中可以得到组件,可以模拟发送事件和检测 ...

  10. 最新Connectify注冊码(序列号) Connectify3.7序列号 破解版

    Connectify序列号.最新注冊码 今天给大家公布一个Connectify最新版的序列号(注冊码) 今天给大家公布一个Connectify最新版的序列号(注冊码) 经本人測试该注冊码为最新版Con ...