html资源文件记载进度条,html5 文件上传 带进度条

图片上传

$(function(){

var tmpImg = ‘data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0A%3Csvg%20width%3D%22153%22%20height%3D%22153%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%3Cg%3E%0A%20%20%3Ctitle%3ENo%20image%3C/title%3E%0A%20%20%3Crect%20id%3D%22externRect%22%20height%3D%22150%22%20width%3D%22150%22%20y%3D%221.5%22%20x%3D%221.500024%22%20stroke-width%3D%223%22%20stroke%3D%22%23666666%22%20fill%3D%22%23e1e1e1%22/%3E%0A%20%20%3Ctext%20transform%3D%22matrix%286.66667%2C%200%2C%200%2C%206.66667%2C%20-960.5%2C%20-1099.33%29%22%20xml%3Aspace%3D%22preserve%22%20text-anchor%3D%22middle%22%20font-family%3D%22Fantasy%22%20font-size%3D%2214%22%20id%3D%22questionMark%22%20y%3D%22181.249569%22%20x%3D%22155.549819%22%20stroke-width%3D%220%22%20stroke%3D%22%23666666%22%20fill%3D%22%23000000%22%3E%3F%3C/text%3E%0A%20%3C/g%3E%0A%3C/svg%3E‘;

var oPreview = document.getElementById("uploadPreview");

var oUpimg = document.getElementById("upimg");

var oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

oFReader.onload = function(oFREvent){

oPreview.src = oFREvent.target.result;

};

$(oUpimg).change(function(){

var oFile = oUpimg.files[0];

if(oFile.size > 2000000){

oPreview.src = tmpImg;

alert("最大只能上传2M的文件!");

return;

}

if(!rFilter.test(oFile.type)){

oPreview.src = tmpImg;

alert("请上传有效的图片!");

return;

}

oFReader.readAsDataURL(oFile);

var xhr = new XMLHttpRequest();

var url = ‘/upimg/upimg‘;//上传地址

xhr.open("POST", url, true);

//进度条

if(xhr.upload){

xhr.upload.addEventListener("progress",

function(e){

console.log((e.loaded / e.total * 100).toFixed(0) + ‘%‘);

},

false);

}

//上传

xhr.onreadystatechange = function(e){

if(xhr.readyState == 4){

if(xhr.status == 200){

//成功处理

var data = xhr.responseText;

console.log(data);

}

}

};

var fd = new FormData();

fd.append(‘upimg‘, oFile);//上传域名称

xhr.send(fd);

});

});

原文：http://www.cnblogs.com/hefei/p/5526713.html