我正在尝试上传图片并显示正在进行的加载百分比
<!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 没有被触发。如何触发那个 onprocess 事件？
最佳答案
Event 在函数中是 undefined。所以在 change 函数中传递 event 并将文件插入到 reader 函数通过 readAsDataURL
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)">关于javascript - 上传图片时不触发onprocess，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48124477/