分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow
也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!
使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe)
原理:
1.使用FileReader 读取图片的base64编码
2.使用ajax,把图片的base64编码post到服务器。
3.根据接收到post的数据分析图片的类型(jpg,gif,png),并把base64_decode后的数据生成对应类型的图片文件。
html:
<!DOCTYPE HTML PUBLIC><html> <head> <meta charset="utf-8"> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <title>使用html5 FileReader获取图片,并异步上传到服务器(not iframe)</title> <style type="text/css"> body{margin: 0px; background:#f2f2f0;} p{margin:0px;} .title{color:#FFFF00; background:#000000; text-align:center; font-size:24px; line-height:50px; font-weight:bold;} .file{position:absolute; width:100%; font-size:90px;} .filebtn{display:block; position:relative; height:110px; color:#FFFFFF; background:#06980e; font-size:48px; line-height:110px; text-align:center; cursor:pointer; border: 3px solid #cccccc;} .filebtn:hover{background:#04bc0d;} .showimg{margin:10px auto 10px auto; text-align:center;} </style> <script type="text/javascript"> window.onload = function(){ // 选择图片 document.getElementById('img').onchange = function(){ var img = event.target.files[0]; // 判断是否图片 if(!img){ return ; } // 判断图片格式 if(!(img.type.indexOf('image')==0 && img.type && /\.(?:jpg|png|gif)$/.test(img.name)) ){ alert('图片只能是jpg,gif,png'); return ; } var reader = new FileReader(); reader.readAsDataURL(img); reader.onload = function(e){ // reader onload start // ajax 上传图片 $.post("server.php", { img: e.target.result},function(ret){ if(ret.img!=''){ alert('upload success'); $('#showimg').html('<img src="' + ret.img + '">'); }else{ alert('upload fail'); } },'json'); } // reader onload end } } </script> </head> <body> <p class="title">使用html5 FileReader获取图片,并异步上传到服务器(not iframe)</p> <p><input type="file" class="file" id="img"><label class="filebtn" for="img" title="JPG,GIF,PNG">请选择图片</label></p> <p class="showimg" id="showimg"></p> </body> </html>
server.php
<?php$img = isset($_POST['img'])? $_POST['img'] : '';// 获取图片list($type, $data) = explode(',', $img);// 判断类型if(strstr($type,'image/jpeg')!=''){ $ext = '.jpg';}elseif(strstr($type,'image/gif')!=''){ $ext = '.gif';}elseif(strstr($type,'image/png')!=''){ $ext = '.png';}// 生成的文件名$photo = time().$ext;// 生成文件file_put_contents($photo, base64_decode($data), true);// 返回header('content-type:application/json;charset=utf-8');$ret = array('img'=>$photo);echo json_encode($ret);?>