效果截图：
上传页面
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> 头像:<img id="avatar" src="" height="35" width="35" alt=""><br /> 选择文件:<input type="file" id="file1" /><br /> <input type="button" id="upload" value="上传" /> <span id="result"></span> <img src="5fd411e985d2c939b90e2dfb.gif" height="100" width="100" style="display:none" id="imgwait" /> <script src="jquery-1.11.2.min.js"></script> <script> $(function () { $("#upload").click(function () { $("#imgwait").show(); var formdata = new formdata(); formdata.append("myfile", document.getelementbyid("file1").files[0]); $.ajax({ url: "upload.php", type: "post", datatype: 'json', data: formdata, /** *必须false才会自动加上正确的content-type,否则会执行error步骤 */ contenttype: false, /** * 必须false才会避开jquery对 formdata 的默认处理，否则会报uncaught typeerror: illegal invocation * xmlhttprequest会对 formdata 进行正确的处理 */ processdata: false, success: function (data) { if(data.code == 200){ $('#avatar').attr('src',data.datas.filename); } $('#result').html(data.msg); $("#imgwait").hide(); settimeout(function(){ $('#result').html(''); }, 1200); }, error: function () { alert("上传失败！"); $("#imgwait").hide(); } }); }); }); </script> </body> </html>
后台代码：
<?php $tmp_name = $_files['myfile']['tmp_name']; $current_time = date("y-m-d h-i-s"); if(is_uploaded_file($tmp_name)){ $filename = './'.$current_time.'.jpg'; $return = move_uploaded_file($tmp_name,$filename); $return ? output('200','上传成功！',['filename' => $filename]) : output('400','上传失败！'); }else{ output('555','非法文件！'); } function output($code,$msg,$datas = array()){ $outputdata = array( 'code' => $code, 'msg' => $msg, 'datas' => $datas ); exit(json_encode($outputdata)); }
相关推荐：
angularjs利用$http异步上传excel文件方法分享
html里怎样实现异步上传文件
php和ajax实现异步上传文件或图片代码分享
以上就是ajax和php实现异步上传头像的详细内容。