首页 > 代码库 > Ajax提交进度显示实例
Ajax提交进度显示实例
概述:ajax提交比较大的文件的时候,我们希望能够看到它上传的进度,代码放下面了。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>XMLHttpRequest 上传文件进度条示例</title> </head> <body> <progress id="upload_progress" value="0" max="100"></progress> <input id="upload_file" type="file" name="upload_file" /> <button id="btn_start">Start</button> <button id="btn_cancel">Cancel</button> <script type="text/javascript" src="/res/lib/jquery-1.11.3.js"></script> <script type="text/javascript"> var xhr = new XMLHttpRequest(); var progressBar = document.getElementById(‘upload_progress‘); $(‘#btn_start‘).click(function() { var uploadFile = document.getElementById(‘upload_file‘).files[0]; var formData = new FormData(); formData.append(‘upload_file‘, uploadFile); // --------------------------------------- // 原生xmlHttpRequest发送 xhr.open(‘post‘, ‘/server_url.php‘); xhr.onload = function() { alert(‘完成!‘); }; xhr.onerror = function() { alert(‘无法连接服务器!‘); }; xhr.upload.onprogress = function(progress) { if (progress.lengthComputable) { console.log(progress.loaded / progress.total * 100); progressBar.max = progress.total; progressBar.value = progress.loaded; } }; xhr.upload.onloadstart = function() { console.log(‘started...‘); }; xhr.send(formData); // --------------------------------------- // 使用ajax发送 /** $.ajax({ type: "POST", url: "/server_url.php", data: formData , //这里上传的数据使用了formData 对象 processData: false, contentType: false, //必须false才会自动加上正确的Content-Type //这里我们先拿到jQuery产生的 XMLHttpRequest对象,为其增加 progress 事件绑定,然后再返回交给ajax使用 xhr: function() { var xhr = $.ajaxSettings.xhr(); if (xhr.upload) { xhr.upload.onprogress = function(progress) { if (progress.lengthComputable) { console.log(progress.loaded / progress.total * 100); progressBar.max = progress.total; progressBar.value = http://www.mamicode.com/progress.loaded;>*/ }); $(‘#btn_cancel‘).click(function() { xhr.abort(); }); </script> </body> </html>
原理就是这样,需要在此基础上做扩展的可以随意添加自己想要的功能。
Ajax提交进度显示实例
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。