理论上来说此类的文件/图片上传插件已经很多了，但是在使用的过程中还是会遇到各种各样的问题，，兼容问题、后台问题~~等等，所以既然别人的轮子我用不好，那就自己动手造一个吧。
本文中使用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实现文件上传的详细内容。