理论上来说此类的文件/图片上传插件已经很多了，但是在使用的过程中还是会遇到各种各样的问题，，兼容问题、后台问题~~等等，所以既然别人的轮子我用不好，那就自己动手造一个吧。
本文中使用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部分，比较简单：
<div class="upload"> <div 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></div></div>
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,//不处理数据流 !importantcontentType: false,//不设置http头 !importantxhr: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 处理文件（为了服务器安全，仅贴出代码片段）：
<?phpif(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';}?>