本文中使用jq.ajax和php实现上传功能，前端代码一般无差，有的小伙伴后台不是php的，请参考贵语言的文档进行操作即可。
先看一下效果图，整个上传界面大概是这样的：查看demo
整体思路：
1、创建input设置type=file，id=file，样式设置opacity:0，position:absolute
2、创建一个遮罩层，并设置position:absolute并且z-index大于file
3、创建formdata对象，把file放到formdata中做为数据
4、创建ajax，发送formdata数据到upload.php，监听ajax的progress事件，实时返回上传进度
5、在html页面输出服务器的响应
6、上传完成之后，点击“继续上传”按钮，打开文件选择框，可继续上传。
html部分，比较简单：
<p class="upload"> <p class="uploadbox"> <span class="inputcover">选择文件</span> <form enctype=""> <input type="file" name="file" id="file" /> <button type="button" class="submit">上传</button> </form> <button type="button" class="upagain">继续上传</button> <span class="processbar"></span> <span class="processnum">未选择文件</span> </p> </p>
css，样式可以根据个人喜好自由调整，这里仅供参考：
*{ font-family: 'microsoft yahei'; color: #4a4a4a; } .upload{ width: 700px; padding: 20px; border: 1px dashed #ccc; margin: 100px auto; border-radius: 5px; } .uploadbox{ width: 100%; height: 35px; position: relative; } .uploadbox input{ width: 200px; height: 30px; background: red; position: absolute; top: 2px; left: 0; z-index: 201; opacity: 0; cursor: pointer; } .uploadbox .inputcover{ width: 200px; height: 30px; position: absolute; top: 2px; left: 0; z-index: 200; text-align: center; line-height: 30px; font-size: 14px; border: 1px solid #009393; border-radius: 5px; cursor: pointer; } .uploadbox button.submit{ width: 100px; height: 30px; position: absolute; left: 230px; top: 2px; border-radius: 5px; border: 1px solid #ccc; background: #f0f0f0; outline: none; cursor: pointer; } .uploadbox button.submit:hover{ background: #e0e0e0; } .uploadbox button.upagain{ width: 100px; height: 30px; position: absolute; left: 340px; top: 2px; display: none; border-radius: 5px; border: 1px solid #ccc; background: #f0f0f0; outline: none; cursor: pointer; } .uploadbox button.upagain:hover{ background: #e0e0e0; } .processbar{ display: inline-block; width: 0; height: 7px; position: absolute; left: 500px; top: 14px; background: #009393; } .processnum{ position: absolute; left: 620px; color: #009393; font-size: 12px; line-height: 35px; }
js部分，jq.ajax：
$(document).ready(function(){ var inputcover = $(".inputcover"); var processnum = $(".processnum"); var processbar = $(".processbar"); //上传准备信息 $("#file").change(function(){ var file = document.getelementbyid('file'); var filename = file.files[0].name; var filesize = file.files[0].size; processbar.css("width",0); //验证要上传的文件 if(filesize > 1024*2*1024){ inputcover.html("<font>文件过大，请重新选择</font>"); processnum.html('未选择文件'); document.getelementbyid('file').value = ''; return false; }else{ inputcover.html(filename+' / '+parseint(filesize/1024)+'k'); processnum.html('等待上传'); } }) //提交验证 $(".submit").click(function(){ if($("#file").val() == ''){ alert('请先选择文件！'); }else{ upload(); } }) //创建ajax对象，发送上传请求 function upload(){ var file = document.getelementbyid('file').files[0]; var form = new formdata(); form.append('myfile',file); $.ajax({ url: 'upload.php',//上传地址 async: true,//异步 type: 'post',//post方式 data: form,//formdata数据 processdata: false,//不处理数据流 !important contenttype: false,//不设置http头 !important xhr:function(){//获取上传进度 myxhr = $.ajaxsettings.xhr(); if(myxhr.upload){ myxhr.upload.addeventlistener('progress',function(e){//监听progress事件 var loaded = e.loaded;//已上传 var total = e.total;//总大小 var percent = math.floor(100*loaded/total);//百分比 processnum.text(percent+"%");//数显进度 processbar.css("width",percent+"px");//图显进度}, false); } return myxhr; }, success: function(data){//上传成功回调 console.log("文档当前位置是："+data);//获取文件链接 document.cookie = "url="+data;//此行可忽略 $(".submit").text('上传成功'); $(".upagain").css("display","block"); } }) } //继续上传 $(".upagain").click(function(){ $("#file").click(); processnum.html('未选择文件'); processbar.css("width",0); $(".submit").text('上传'); document.getelementbyid('file').value = ''; $(this).css("display","none"); }) })
上传完毕，upload.php处理文件（为了服务器安全，仅贴出代码片段）：
<?php if(isset($_files["myfile"])){ move_uploaded_file($_files["myfile"]["tmp_name"],"ajax/".$_files["myfile"]["name"]); echo "http://www.xuxiangbo.com/ajax/".$_files["myfile"]["name"]; }else{ echo 'no file'; } ?>
转自博客
作者：imin
链接：http://blog.xuxiangbo.com/im-22.html
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
php+sftp 实现文件的上传与下载
四种php随机字生成符串的方法
以上就是利用ajax+php实现文件上传的详细内容。