在项目中碰到的提交表单时单文件的上传，整理总结：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文件上传</title> <style media="screen"> .wrap{ width: 450px; height: 450px; border: 1px solid black; margin: 100px auto; padding: 20px; } .file-name{ } .progressNumber{ width: 80%; height: 20px; background: #ccc; margin: auto; border-radius: 10px; text-align: center; } .file-wrap{ position: relative; width: 80%; margin: 30px auto; } .file-div{ position: absolute; left: 36%; z-index: 50; } .fileInputP{ display: inline-block; width: 120px; height: 30px; border-radius: 5px; overflow: hidden; position: relative; } .fileInputP span{ display: inline-block; width: 110px; height: 30px; color: #fff; background: #0e90d2; text-align: center; line-height: 30px; cursor: pointer; border-radius: 5px; } .fileInputP input{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: 0; } #fileSpan{ display: inline-block; width: 100%; height: 150px; border: 2px dashed #ccc; text-align: center; line-height: 100px; position: relative; } .file{ position: relative; } .updata{ cursor: pointer; color: #142ae4; font-weight: bold; position: absolute; right: 30px;ß } </style> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <body> <div class="wrap"> <div class="file"> <p> <span>文件上传：</span> <span class="file-name"></span> <span class="updata">上传</span> </p> <p class="progressNumber" id="progressNumber"> 我是进度条 </p> </div> <div class="file-wrap"> <div class="file-div"> <p class="fileInputP"> <span>选择文件</span> <input type="file" multiple id="fileInput" /> </p> </div> <span id="fileSpan"> <p class="span-p">或者将文件拖到此处</p> </span> </div> </div> </body> <script type="text/javascript"> var fileobj; // 文件对象 $("#fileInput").on("change",function(){ // 当前所选文件 fileList(this.files); }); // 拖拽外部文件，进入目标元素触发 dragenter 用户开始拖动元素时触发 $("#fileSpan").on("dragenter",function(){ $(this).css("background","#ccc"); $(".span-p").text('可以释放鼠标了'); }); //拖拽外部文件，进入目标，离开目标，防止连续触发 //ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件 $("#fileSpan").on("dragover",function(){ return false; }); //拖拽外部文件，离开目标元素触发 //ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件 $("#fileSpan").on("dragleave",function(){ $(this).css("background","none"); $(".span-p").text("或者将文件拖到此处!"); }); //ondrop - 在一个拖动过程中，释放鼠标键时触发此事件 $("#fileSpan").on("drop",function(e){ //HTML5的File API提供了一个FileList的接口，它 // 可以通过拖拽事件的e.dataTransfer.files来传递的文件信息，获取本地文件列表信息。 var file = e.originalEvent.dataTransfer.files; fileList(file); $(this).css("background", "none"); return false; }); function fileList(obj){ // 如果没有文件 if(obj.length < 1){ return false; }else if(obj.length > 1){ $("#fileSpan").text("每次只能上传一个文件！"); }else { $("#fileSpan").text("或者将文件拖到此处！"); } fileObj = obj[0]; // 获取当前的文件对象 var name = obj[0].name; $(".file-name").html(name); } // 点击文件上传的方法 function uploadFileFun(){ var fd = new FormData(); // 定义fromdata对象 fd.append("file",fileObj); // 传给后台的参数 “file” 参数名 fileObj 文件对象 /** 可以通告append 方法在 FormData对象里面添加参数 //fd.append("fileOid",fileOid); // 可以在添加参数，fileOid是后台返回的，判断当前上传的文件是第几次上传的，第一次 传空字符串 XMLHTTPRequest 对象，有progress 事件，用来返回进度信息 -- 下载的progress 事件属于XMLHTTPRequest 对象 -- 上传的progress 事件属于 XMLHTTPRequest.upload 对象 **/ var xhr = new XMLHTTPRequest(); xhr.upload.addEventListener("progress",uploadProgress,false); // 传输进度 xhr.addEventListener("load",uploadComplete,false);// 传输成功 xhr.addEventListener("error",uploadFailed,false); //传输中出现错误 xhr.addEventListener("abort",uploadCanceled,false); //传输被用户取消 // xhr.addEventListener("loadstart", " 我是函数名 ",false); // 传输开始 // xhr.addEventListener("loadEnd", " 我是函数名 ",false); // 传输结束，但是不知道是否成功 xhr.open("POST", "/file/upload_file"); // 给后台提交的路径 xhr.send(fd); } // 传输进度的方法 进度条显示 function uploadProgress(evt) { if (evt.lengthComputable) { //evt.total 需要传输的总字符，evt.loaded 是已经上传的字节 // if evt.lengthComputable 不为真 evt.total 等于 0 var percentComplete = Math.round(evt.loaded * 100 / evt.total); // 上传的进度状态 $('#progressNumber').progressbar('setValue', percentComplete); } else {//大小无法计算 document.getElementById('progressNumber').innerHTML = "大小无法计算"; } } //传输成功的方法 function uploadComplete(evt){ //服务器返回的数据 var message = JSON.parse(evt.target.responseText); if(message.code == "success"){ // 后台返回的code值 alert("上传成功！"); }else if(message.code == "fail"){ alert("上传失败！"); } } // 传输中出现错误 function uploadFailed(evt){ alert("删除出错！"); } // 上传由用户或者浏览器取消链接 function uploadComplete(evt){ alert("上传由用户或者浏览器取消链接"); } </script> </html>
效果图：
这个就是单个文件上传的方法，如果想要多文件上传，可以看看我的另一篇文章，希望大家多提意见！