方式一：采用传统的multipart/form-data形式
html文件：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片上传 | 方式一</title> </head> <body> <h2 style="text-align:center">图片上传 | 方式一</h2> <div class="main"> <form action="upload_file.php" method="post" enctype="multipart/form-data" target="frshowpic" id="myForm"> <table > <tr> <td></td> <td><input type="file" name="avatar" accept="image/*"></td> </tr> <tr> <td colspan="2"><input type="submit" value="上传图片"></td> </tr> </table> </form> <div id="img">这里显示预览图片</div> <!--隐藏iframe--> <iframe id="frshowpic" name="frshowpic" style="display:none;"></iframe> </div> </body> <script src="jquery.min.js"></script> <script type="text/javascript"> //用来显示返回结果，隐藏的iframe里面要调用这个显示图片的函数 function showpic(msg, code){ if (code === 200){ document.getElementById('myForm').reset(); document.getElementById('img').innerHTML = '<img src="'+msg+'" width="100">'; } else{ alert(msg); } } </script> </html>
php文件：
<?php //配置 $config = array( //上传目录 'path' => 'uploads/', //限制图片类型 'type' => array( 'gif', 'jpg', 'jpeg', 'pjpeg', 'png', 'x-png', 'bmp' ), //限制图片大小(kb) 'size' => 1024 ); $data = explode(',', $_POST['data']); if (count($data) == 2) { $type = ltrim($data[0], 'data:image/'); $type = rtrim($type, ';base64'); if (in_array($type, $config['type'])) { $savepath = $config['path']; if (!is_dir($savepath)) { mkdir($savepath,0777,true); } $filename = 'org_'.uniqid().mt_rand(1000,9999).'.'.$type; $orgin_image_location = $savepath.$filename; $base64 = base64_decode($data[1]); if (file_put_contents($orgin_image_location, $base64)) { exit(json_encode(array('code'=>200, 'msg'=>'上传成功', 'data'=>'/'.$orgin_image_location))); } else { exit(json_encode(array('code'=>200, 'msg'=>'上传失败'))); } } else { exit(json_encode(array('code'=>500, 'msg'=>'图片类型不正确'))); } } else { exit(json_encode(array('code'=>500, 'msg'=>'error'))); }
方式二：采用base64形式
html文件：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片上传 | 方式二</title> </head> <body> <h2 style="text-align:center">图片上传 | 方式二</h2> <div class="main"> <form enctype="multipart/form-data" id="oForm"> <input type="file" name="file" id="file" onchange="readAsDataURL()" accept="image/*" /> <input type="button" value="提交" onclick="doUpload()" /> </form> <div> <img alt="" id="img"/> </div> </div> </body> <script src="jquery.min.js"></script> <script type="text/javascript"> //配置 var config = { //限制图片大小(kb) size:1024, //限制图片类型 type:new Array('jpg', 'jpeg') }; var base64; function readAsDataURL() { //检验是否为图像文件 var file = document.getElementById('file').files[0]; var type = file.type; type = type.replace(/image//, ''); if (isInArray(config.type, type) !== true) { alert('图片格式错误!'); return false; } else { if (file.size <= (config.size * 1024)) { var reader = new FileReader(); //将文件以Data URL形式读入页面 reader.readAsDataURL(file); reader.onload = function (e) { var result = document.getElementById('img'); //显示文件 result.src = this.result; base64 = result.src; } } else { alert('图片太大!'); } } } function doUpload() { $.ajax({ url: 'upload_base64.php', type: 'POST', data: { data: base64 }, dataType: 'json', success: function (res) { if (res.code === 200) { console.log(res.data); alert('上传成功'); } else { alert(res.msg); } }, error: function (res) { alert('上传出错'); } }); } /** * 使用循环的方式判断一个元素是否存在于一个数组中 * @param {Object} arr 数组 * @param {Object} value 元素值 */ function isInArray(arr, value){ for(var i = 0; i < arr.length; i++){ if(value === arr[i]){ return true; } } return false; } </script> </html>
php文件：
<?php //配置 $config = array( //上传目录 'path' => 'uploads/', //限制图片类型 'type' => array( 'gif', 'jpg', 'jpeg', 'pjpeg', 'png', 'x-png', 'bmp' ), //限制图片大小(kb) 'size' => 1024 ); $data = explode(',', $_POST['data']); if (count($data) == 2) { $type = ltrim($data[0], 'data:image/'); $type = rtrim($type, ';base64'); if (in_array($type, $config['type'])) { $savepath = $config['path']; if (!is_dir($savepath)) { mkdir($savepath,0777,true); } $filename = 'org_'.uniqid().mt_rand(1000,9999).'.'.$type; $orgin_image_location = $savepath.$filename; $base64 = base64_decode($data[1]); if (file_put_contents($orgin_image_location, $base64)) { exit(json_encode(array('code'=>200, 'msg'=>'上传成功', 'data'=>'/'.$orgin_image_location))); } else { exit(json_encode(array('code'=>200, 'msg'=>'上传失败'))); } } else { exit(json_encode(array('code'=>500, 'msg'=>'图片类型不正确'))); } } else { exit(json_encode(array('code'=>500, 'msg'=>'error'))); }