<!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. [cocos2dx 3.0 + iap]中文文档(转)

    一.In App Purchase概览Store Kit代表App和App Store之间进行通信.程序将从App Store接收那些你想要提供的产品的信息,并将它们显示出来供用户购买.当用户需要购买 ...

  2. UILabel，文字添加下划线，中划线

    //显示下划线 //中划线 //        NSDictionary *attribtDic = @{NSStrikethroughStyleAttributeName: [NSNumber nu ...

  3. python数据类型和3个重要函数

    Python中所有变量都是值的引用,也就说变量通过绑定的方式指向其值. 而这里说的不可变指的是值的不可变. 对于不可变类型的变量,如果要更改变量,则会创建一个新值,把变量绑定到新值上,而旧值如果没有被 ...

  4. java传递json数据到前台jsp

    在数据传输流程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键.例如: JSON字符串: var str1 = '{ &q ...

  5. memcache基本讲解

    Memcached技术 介绍: memcached是一种缓存技术, 他可以把你的数据放入内存,从而通过内存访问提速,因为内存最快的, memcached技术的主要目的提速, 在memachec 中维护 ...

  6. boost------asio库的使用2(Boost程序库完全开发指南)读书笔记

    网络通信 asio库支持TCP.UDP.ICMP通信协议,它在名字空间boost::asio::ip里提供了大量的网络通信方面的函数和类,很好地封装了原始的Berkeley Socket Api,展现 ...

  7. VS2010+Opencv-2.4.9的配置攻略

    1.下载软件 vs2010入门书籍,免积分下载   http://download.csdn.net/detail/u014112584/7325617 opencv2.4.0版本号和一些样例,免积分 ...

  8. ZEDBOARD启动自启配置（加载镜像） 分类： OpenCV ubuntu shell ZedBoard Eye_Detection 2014-11-08 18:53 167人阅读 评论(0) 收藏

    参考:陆书14.2.8 1)备份ramdisk8M.image.gz 2)加载rootfs镜像文件: 3)在镜像目录下建立自己所需文件夹(挂载目录): 我需要的挂载目录有两个: root/qt/ins ...

  9. sql语句实现随机取n条数据(转)

    我想把数组打乱随机取些值,于是用PHP的shuffl()打乱数组,当然,array_rand()也是可以随机取数组的,但是我想到另一个更高效的办法,是不是能用sql直接随机数据?当然可以! mysql ...

  10. android 05 桢布局：FrameLayout 网格布据 GridLayout

    xml文件: <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android: ...