<html> <head> <meta charset="utf-8"> </head> <body> <img> <input type="file" value="上传" /> <script type="text/javascript" src = 'jquery-2.1.4.min.js'></script> <script type="text/javascript"> $('#articleImgBtn').change(function(){ run(this, function (data) { uploadImage(data); }); }); function run(input_file, get_data) { /*input_file：文件按钮对象*/ /*get_data: 转换成功后执行的方法*/ if (typeof (FileReader) === 'undefined') { alert("抱歉，你的浏览器不支持 FileReader，不能将图片转换为Base64，请使用现代浏览器操作！"); } else { try { /*图片转Base64 核心代码*/ var file = input_file.files[0]; //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件 if (!/image\/\w+/.test(file.type)) { alert("请确保文件为图像类型"); return false; } var reader = new FileReader(); reader.onload = function () { get_data(this.result); } reader.readAsDataURL(file); } catch (e) { alert('图片转Base64出错啦！' + e.toString()) } } } function uploadImage(img) { //判断是否有选择上传文件 var imgPath = $("#articleImgBtn").val(); if (imgPath == "") { alert("请选择上传图片！"); return; } //判断上传文件的后缀名 var strExtension = imgPath.substr(imgPath.lastIndexOf('.') + 1); if (strExtension != 'jpg' && strExtension != 'gif' && strExtension != 'png' && strExtension != 'bmp') { alert("请选择图片文件"); return; } $.ajax({ type: "POST", url: 'http://localhost/123.php', // data: {file: img.substr(img.indexOf(',') + 1)}, //视情况将base64的前面字符串data:image/png;base64,删除 data: {file: img}, //视情况将base64的前面字符串data:image/png;base64,删除 cache: false, success: function(data) { var return_info = JSON.parse(data); if(return_info.status){ $("#articleImg").attr('src', return_info.path); alert("上传成功"); }else{ alert(return_infoerr_info); } }, error: function(XMLHttpRequest, textStatus, errorThrown) { alert("上传失败，请检查网络后重试"); } }); } </script> </body> </html>
PHP 处理代码：
function upload_image($file_data){ $upload_result = array('status' => true, 'msg'=>'','err_info'=>''); if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $file_data, $result)) { //处理base64字符串 $img_base64 = str_replace($result[1], '', $file_data); $img_base64 = str_replace('=', '', $img_base64); $source_img = base64_decode($img_base64); //判断文件大小 $file_size = //上传目录 $basedir = './img_test'; //后缀 $img_suffix = $result[2];//文件后缀 //文件名 // $filename = uniqid();//文件名 $filename = date('YmdHis',time());//文件名 //文件完整路径 $filepath = $basedir . "https://www.jb51.net/" . $filename . "." . $img_suffix; //目录若果不存在,则创建目录 if(!is_dir($basedir)){ mkdir($basedir); chmod($basedir,0777); } //上传文件 try { file_put_contents($filepath, $img_base64); $filepath = substr($filepath, 1); $upload_result = array('status' => true, 'msg'=>'上传成功','err_info'=>'','path'=>$filepath); return $upload_result; } catch (Exception $e) { $upload_result = array('status' => false, 'msg'=>'上传失败','err_info'=>$e->getMessage()); return $upload_result; } // if (file_put_contents($filepath, base64_decode(str_replace($result[1], '', $file_data)))) { // //$size = getimagesize($filepath); // $filepath = substr($filepath, 1); // //$arr['filepath'] = $filepath; // //$arr['size'] = $size[3]; // return $filepath; // }else{ // return false; // } }else{ $upload_result = array('status' => false, 'msg'=>'上传失败','err_info'=>'请携带base64字符串的前缀'); return $upload_result; } } $res = upload_image($file_data); echo json_encode($res);
更多关于PHP相关内容感兴趣的读者可查看本站专题：《php文件操作总结》、《PHP目录操作技巧汇总》、《PHP常用遍历算法与技巧总结》、《PHP数据结构与算法教程》、《php程序设计算法总结》及《PHP网络编程技巧总结》