有这么一个需求，要求用户可以更换显示的头像。我的想法是这样的：用户先上传头像图片，替换服务器上的头像图片，然后刷新就是显示更新后的图片了。问题是，JS怎么实现上传图片到服务器上，结合php或者Nodejs
ringa_lee
写个上传文件的的表单即可
<form action="upload.php" method="post" enctype="multipart/form-data"> <input type="file" name="file" id="file" /> <input type="submit" name="submit" value="Submit" /> </form>
再写个处理文件的php
<?php if ((($_FILES["file"]["type"] == "image/gif") || ($_FILES["file"]["type"] == "image/jpeg") || ($_FILES["file"]["type"] == "image/pjpeg")) && ($_FILES["file"]["size"] < 20000)) { if ($_FILES["file"]["error"] > 0) { echo "Return Code: " . $_FILES["file"]["error"] . "<br />"; } else { echo "Upload: " . $_FILES["file"]["name"] . "<br />"; echo "Type: " . $_FILES["file"]["type"] . "<br />"; echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />"; echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br />"; if (file_exists("upload/" . $_FILES["file"]["name"])) { echo $_FILES["file"]["name"] . " already exists. "; } else { move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . $_FILES["file"]["name"]); echo "Stored in: " . "upload/" . $_FILES["file"]["name"]; } } } else { echo "Invalid file"; } ?>
http://www.jq22.com/jquery-in...参考着插件转成base64编码，将编码串ajax到后端保存本地。上传之前最好等比例压缩再上传。难点应该是上传按钮<input type="file" name="file" id="file" />的美化上。
ajaxupload
看看这个插件后端正常处理就行 图片保存成功之后 返回图片地址 然后 把页面里的图片地址替换掉
<html> <head> <title>ajaxupload上传</title> <meta charset="utf-8"/> <style type="text/css"> .pMain{ position:absolute; width:140px; height:100px; padding-left:60px; padding-top:40px; } #upload{ width:150px; height:30px; } .content{ width:300px; height:200px; } </style> <script type="text/javascript" src="./jquery.1.8.js"></script> <script type="text/javascript" src="./ajaxupload.js"></script> </head> <body> <p><img id='face' src='pic.jpg'></p> <p class="pMain"> <button id="upload">文件上传</button> <p class="content"></p> </p> </body> <script type="text/javascript"> /* ajaxupload上传 */ $(document).ready(function(){ var button = $('#upload'), interval; var fileType = "all",fileNum = "one"; new AjaxUpload(button,{ action: './upload.php', name: 'userfile', onSubmit : function(file, ext){ if(fileType == "pic") { if (ext && /^(jpg|png|jpeg|gif)$/.test(ext)){ this.setData({ 'info': '文件类型为图片' }); } else { $('<li></li>').appendTo('.files').text('非图片类型文件，请重传'); return false; } } button.text('文件上传中'); if(fileNum == 'one') this.disable(); interval = window.setInterval(function(){ var text = button.text(); if (text.length < 14){ button.text(text + '.'); } else { button.text('文件上传中'); } }, 200); }, onComplete: function(file, response){//上传成功的函数；response代表服务器返回的数据 //清楚按钮的状态 button.text('文件上传'); window.clearInterval(interval); this.enable(); //修改下方p的显示文字 if('success'==response.status){ $('#face').attr('src',response.path);//修改头像路径 $(".content").text("上传成功"); }else{ $(".content").text("上传失败"); } } }); }); </script> </html>
改了下链接里的代码
写个上传文件的的表单即可
再写个处理文件的php
http://www.jq22.com/jquery-in...参考着插件
转成base64编码，将编码串ajax到后端保存本地。上传之前最好等比例压缩再上传。
难点应该是上传按钮<input type="file" name="file" id="file" />的美化上。
ajaxupload
看看这个插件
后端正常处理就行 图片保存成功之后 返回图片地址 然后 把页面里的图片地址替换掉
改了下链接里的代码