内部原理这里就不详述了,后面给出原生代码:
1、jquery实现
html 代码:
<form id="myForm"> <input type="file" id="u_photo" name="u_photo" /> <input type="button" id="submit-btn" value="上传" /> </form>jquery代码:
$("#submit-btn").on(\'click\', function() { $.ajax({ url:"/test/upload", type:"post", data:new FormData($("#myForm").get(0)), //十分重要,不能省略 cache: false, processData: false, contentType: false, success: function () { alert("上传成功!"); } }); });2、原生实现代码
<!DOCTYPE html> <html> <head> <title>使用XMLHttpRequest上传文件</title> <script type="text/javascript"> var xhr = new XMLHttpRequest(); //监听选择文件信息 function fileSelected() { //HTML5文件API操作 var file = document.getElementById(\'fileName\').files[0]; if (file) { var fileSize = 0; if (file.size > 1024 * 1024) fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + \'MB\'; else fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + \'KB\'; document.getElementById(\'fileName\').innerHTML = \'Name: \' + file.name; document.getElementById(\'fileSize\').innerHTML = \'Size: \' + fileSize; document.getElementById(\'fileType\').innerHTML = \'Type: \' + file.type; } } //上传文件 function uploadFile() { var fd = new FormData(); //关联表单数据,可以是自定义参数 fd.append("name", document.getElementById(\'name\').value); fd.append("fileName", document.getElementById(\'fileName\').files[0]); //监听事件 xhr.upload.addEventListener("progress", uploadProgress, false); xhr.addEventListener("load", uploadComplete, false); xhr.addEventListener("error", uploadFailed, false); xhr.addEventListener("abort", uploadCanceled, false); //发送文件和表单自定义参数 xhr.open("POST", "upload.php"); xhr.send(fd); } //取消上传 function cancleUploadFile(){ xhr.abort(); } //上传进度 function uploadProgress(evt) { if (evt.lengthComputable) { var percentComplete = Math.round(evt.loaded * 100 / evt.total); document.getElementById(\'progressNumber\').innerHTML = percentComplete.toString() + \'%\'; } else { document.getElementById(\'progressNumber\').innerHTML = \'unable to compute\'; } } //上传成功响应 function uploadComplete(evt) { //服务断接收完文件返回的结果 alert(evt.target.responseText); } //上传失败 function uploadFailed(evt) { alert("上传失败"); } //取消上传 function uploadCanceled(evt) { alert("您取消了本次上传."); } </script> </head> <body> <div class="row"> <label for="fileToUpload">选择文件</label> <input type="file" name="fileName" id="fileName" onchange="fileSelected();"/> </div> <div id="fileName"></div> <div id="fileSize"></div> <div id="fileType"></div> <div class="row"> 上传者:<input type="text" name="name" id="name"/> <input type="button" onclick="uploadFile()" value="上传" /> <input type="button" onclick="cancleUploadFile()" value="取消" /> </div> <div id="progressNumber"></div> </body> </html>