上传图像时，onprocess不会触发
提问于 2018-01-05 21:12:54
我正在尝试上传一个图像，并显示正在进行的加载百分比。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function myFunction(){
console.dir(event.target.files[0].name);
var reader = new FileReader();
reader.onprogress = function(progressEvent) {
if(progressEvent.lengthComputable) {
var percentLoaded = Math.round( (
progressEvent.loaded * 100) / progressEvent.total );
}
console.log("total: " + progressEvent.total + ", loaded: "
+ progressEvent.loaded + "(" + percentLoaded + "%)");
}
}
</script>
</head>
<body>
<input type="file" id="myFile" accept="image/*" onchange="myFunction()">
</body>
</html>当我上传一张图片时，"onchange“会被触发。但是reader.onprogress没有被触发。如何触发进程中的事件？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-01-05 21:23:00
Event是function.So中的undefined，在更改函数中传递event，并通过readAsDataURL将文件插入reader函数。
function myFunction(e) {
console.dir(e.target.files[0].name);
var reader = new FileReader();
reader.readAsDataURL(e.target.files[0]) //insert the file into reader
reader.onprogress = function(progressEvent) {
if (progressEvent.lengthComputable) {
var percentLoaded = Math.round((
progressEvent.loaded * 100) / progressEvent.total);
}
console.log("total: " + progressEvent.total + ", loaded: " +
progressEvent.loaded + "(" + percentLoaded + "%)");
}
}<input type="file" id="myFile" accept="image/*" onchange="myFunction(event)">
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48124477
复制相关文章
点击加载更多
腾讯云开发者
