js⽂件上传进度条
<!DOCTYPE html>
jquery下载文件请求
<html>description缩写怎么写
<head>
<meta charset="UTF-8">
<title>XMLHttpRequest上传⽂件进度实现</title>
<script type="text/javascript">
var xhr;
var ot;//
var oloaded;
//上传⽂件⽅法
function UpladFile() {
var fileObj = ElementById("file").files[0]; // js 获取⽂件对象
var url = "uploadFile"; // 接收上传⽂件的后台地址
var form = new FormData(); // FormData 对象
form.append("mf", fileObj); // ⽂件对象
xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
xhr.open("post", url, true); //post⽅式，url为服务器请求地址，true 该参数规定请求是否异步处理。
progress = progressFunction;//【上传进度调⽤⽅法实现】
loadstart = function(){//上传开始执⾏⽅法
ot = new Date().getTime();  //设置上传开始时间
oloaded = 0;//设置上传开始时，以上传的⽂件⼤⼩为0
};
xhr.send(form); //开始上传，发送form数据
}
//上传进度实现⽅法，上传过程中会频繁调⽤该⽅法
function progressFunction(evt) {
var progressBar = ElementById("progressBar");
var percentageDiv = ElementById("percentage");
// al是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则al等于0            if (evt.lengthComputable) {//
progressBar.max = al;
progressBar.value = evt.loaded;
percentageDiv.innerHTML = und(evt.loaded / al * 100) + "%";
}
var time = ElementById("time");
var nt = new Date().getTime();//获取当前时间
var pertime = (nt-ot)/1000; //计算出上次调⽤该⽅法时到现在的时间差，单位为s
ot = new Date().getTime(); //重新赋值时间，⽤于下次计算
var perload = evt.loaded - oloaded; //计算该分段上传的⽂件⼤⼩，单位b
oloaded = evt.loaded;//重新赋值已上传⽂件⼤⼩，⽤以下次计算
//上传速度计算
var speed = perload/pertime;//单位b/s
var bspeed = speed;
var units = 'b/s';//单位名称
if(speed/1024>1){
speed = speed/1024;
units = 'k/s';
版式设计}
if(speed/1024>1){
speed = speed/1024;
units = 'M/s';
}
speed = Fixed(1);
/
/剩余时间
var resttime = ((al-evt.loaded)/bspeed).toFixed(1);
time.innerHTML = '，速度：'+speed+units+'，剩余时间：'+resttime+'s';
if(bspeed==0)
time.innerHTML = '上传已取消';
}
//上传成功响应
function uploadComplete(evt) {
//服务断接收完⽂件返回的结果
//    alert(sponseText);
alert("上传成功！");
}
//上传失败
派森编程function uploadFailed(evt) {
alert("上传失败！");
}
//取消上传
function cancleUploadFile(){
xhr.abort();
}
</script>
</head>
<body>
<progress id="progressBar" value="0" max="100" ></progress>
<span id="percentage"></span><span id="time"></span>
<br /><br />
<input type="file" id="file" name="myfile" />
<input type="button" onclick="UpladFile()" value="上传" />
<input type="button" onclick="cancleUploadFile()" value="取消" />
</body>
</html>
若想⽤jQuery 中的ajax实现的话，jQuery的 ajax ⽅法没有关于 progress 事件的操作，此时需要调⽤的XMLHttpRequest对象是指定progress 事件。
$.ajax({
type: "POST",
  url: "upload",
  data: formData ,  //这⾥上传的数据使⽤了formData 对象
  processData : false,
  //必须false才会⾃动加上正确的Content-Type
  contentType : false ,
  //这⾥我们先拿到jQuery产⽣的 XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使⽤
  xhr: function(){
    var xhr = $.ajaxSettings.xhr();
    if(onprogress && xhr.upload) {
      progress = progressFunction;
商品订单查询数据库      return xhr;
    }
  }
linux常用命令博客});
XMLHttpRequest对象，传送数据的时候，有⼀个progress事件，⽤来返回进度信息。
它分成上传和下载两种情况
１）下载的progress事件属于XMLHttpRequest对象
２）上传的progress事件属于XMLHttpRequest.upload对象。
下载进度实现：
function downloadProgress(event) {//未测试
if(event.lengthComputable) {
var percentComplete = event.loaded / al;
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。