<!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. Uncode-Schedule首页、文档和下载 - 分布式任务调度组件 - 开源中国社区

    Uncode-Schedule首页.文档和下载 - 分布式任务调度组件 - 开源中国社区 分布式任务调度组件 Uncode-Schedule

  2. IE的Cookie目录和临时缓存目录的关系

    1.IE的Cookie位置注册表设置: HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\Shell Folde ...

  3. JS：九宫格抽奖转盘实例

    工作需要,所以做了个抽奖转盘的插件,当然这里只做最简单的演示.可以用于取代一些flash抽奖程序. 机制说明: 1.通过定义lottery-unit来控制节点的个数及索引: 2.通过设置lottery ...

  4. Java+protobuf 实例

    之前开发都是JSON格式, 据说用这种格式的 安全, 输入输出全是二进制文件,且 数据占用内存小. 主要永远移动端数据传送.以下是代码: controller: 请求的是实体: package cn. ...

  5. [置顶] Java Web开发教程来袭

    Java Web,是用Java技术来解决相关web互联网领域的技术总和.web包括:web服务器和web客户端两部分.Java在客户端的应用有java applet不过现在使用的很少,Java在服务器 ...

  6. Android 仿PhotoShop调色板应用(一)概述

    版权声明:本文为博主原创文章,未经博主允许不得转载. 在前面的系列我已经将Android中颜色渲染的原理及使用做了一个整体上概述. 现在开始根据一个比较复杂的实现进行具体的分析,这就是PhotoSho ...

  7. MapReduce分析明星微博数据

    互联网时代的到来,使得名人的形象变得更加鲜活,也拉近了明星和粉丝之间的距离.歌星.影星.体育明星.作家等名人通过互联网能够轻易实现和粉丝的互动,赚钱也变得前所未有的简单.同时,互联网的飞速发展本身也造 ...

  8. [转] JavaScript 和事件

    与浏览器进行交互的时候浏览器就会触发各种事件.比如当我们打开某一个网页的时候,浏览器加载完成了这个网页,就会触发一个 load 事件:当我们点击页面中的某一个“地方”,浏览器就会在那个“地方”触发一个 ...

  9. 1 - SQL Server 2008 之 使用SQL语句创建具有约束条件的表

    约束条件分为以下几种: 1)非空约束,使用NOT NULL关键字: 2)默认值约束,使用DEFAULT关键字: 3)检查约束,使用CHECK关键字: 4)唯一约束,使用UNIQUE关键字: 5)主键约 ...

  10. 从创建webservice到发布webservice的一些相关总结

    最近做了一个web服务,开始什么也不懂,就在网上到处找,对于刚毕业的我,感觉没用实际代码经过自己的手写出来,看什么都一头雾水,然后就看到很多人说webservice已经融入WCF..然后就先创建了WC ...