<!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. 自动化运维工具Ansible详细部署 - 人生理想在于坚持不懈 - 51CTO技术博客

    自动化运维工具Ansible详细部署 - 人生理想在于坚持不懈 - 51CTO技术博客 自动化运维工具Ansible详细部署

  2. 两种常用的MySQL官方客户端软件

    本博文的主要内容有 .命令行客户端软件---MySQL Command Line Client .MySQL-Workbench客户端软件 1.命令行客户端软件---MySQL Command Lin ...

  3. Uber即将进驻扬州啦，车主火热招募中！

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  4. php判断是不是ajax访问

    <?php // php 判断是否为 ajax 请求 if(isset($_SERVER["HTTP_X_REQUESTED_WITH"]) && strto ...

  5. uva 11300 - Spreading the Wealth(数论）

    题目链接:uva 11300 - Spreading the Wealth 题目大意:有n个人坐在圆桌旁,每个人有一定的金币,金币的总数可以被n整除,现在每个人可以给左右的人一些金币,使得每个人手上的 ...

  6. Android中RelativeLayout的字符水平（垂直居中）对齐

    [背景] 此处Android中显示出来的TextView中的内容,水平中间不对其. 想要实现水平居中对齐. [折腾过程] 1.搜: android RelativeLayout horizontal ...

  7. c++中返回对象与返回引用的区别

    这几天在做用C++做课程设计,对其返回对象的实现感到迷惑. 通过对汇编代码的分析,可以清楚的看到,直接返回引用和返回对象的区别到底是什么. 分析的程序如下 #include<cstdio> ...

  8. 点击其它地方隐藏div／事件冒泡／sweet－alert阻止冒泡

    点击document时把div隐藏,但点击div时阻止点击事件冒泡到document,从而实现“点击文档其它地方隐藏div,点击div本身不隐藏”.js代码如下:$("#div") ...

  9. Bat命令知识[转]

    基础部分: 一.基础语法: 1.批处理文件是一个".bat"结尾的文本文件,这个文件的每一行都是一条DOS命令.可以使用任何文本文件编辑工具创建和修改. 2.批处理是一种简单的程序 ...

  10. Android之获取本地图片并压缩方法

    这两天在做项目时,做到上传图片功能一块时,碰到两个问题,一个是如何获取所选图片的路径,一个是如何压缩图片,在查了一些资料和看了别人写的后总算折腾出来了,在此记录一下. 首先既然要选择图片,我们就先要获 ...