<!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. poj 1080 dp如同LCS问题

    题目链接:http://poj.org/problem?id=1080 #include<cstdio> #include<cstring> #include<algor ...

  2. hdoj 2196 Computer【树的直径求所有的以任意节点为起点的一个最长路径】

    Computer Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  3. hdoj 3746 Cyclic Nacklace【KMP求在结尾加上多少个字符可以使字符串至少有两次循环】

    Cyclic Nacklace Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...

  4. luajit 安装cjson

    最近需要升级原有服务器的nginx加载逻辑,新的lua脚本需要解析一个远程返回的json格式的结果,原有的luajit并没有带cjson库,需要自己手动安装一下. 基本参考博客luajit安装cjso ...

  5. MySQL 面试基础

    相关:http://blog.csdn.net/u013252072/article/details/52912385          http://blog.csdn.net/zhangliang ...

  6. C#类型 分类： C# 2015-03-09 08:44 202人阅读 评论(0) 收藏

    C# 类型 引言 本文之初的目的是讲述设计模式中的 Prototype(原型)模式,但是如果想较清楚地弄明白这个模式,需要了解对象克隆(Object Clone),Clone其实也就是对象复制.复制又 ...

  7. SQL 存储过程 通过多个ID更新数据 分类： SQL Server 2014-12-08 16:08 299人阅读 评论(0) 收藏

    下面举个例子说明: 我想让一部分品牌的名称(即Brand_Name)后面加上1,Brand_ID是主键,sql语句很容易实现,但是存储过程如何写呢? 错误写法如下: //*************** ...

  8. 跨服务器修改数据 分类： SQL Server 2014-08-21 21:24 316人阅读 评论(0) 收藏

     说明: 两个服务器: 192.168.0.22   A 192.168.0.3     B 数据库备份在A上 数据库在B上 在A上写: exec sp_addlinkedserver   'ITSV ...

  9. 20169210《Linux内核原理与分析》第三周作业

    本次作业也是分为两部分,第一部分是对实验楼<Linux基础入门>复习,第二部分为对课本18章的复习. 第一次学习实验楼的<Linux基础入门>时由于是第一次接触Linux,所以 ...

  10. JSON 和 JSONP

    本文转载:http://www.cnblogs.com/shanyou/archive/2009/12/13/1623163.html JSON 和 JSONP  浏览器安全模型规定,XMLHttpR ...