Javascript 上载图像时未触发onprocess_Javascript_Html

Javascript 上载图像时未触发onprocess

javascript html

Javascript 上载图像时未触发onprocess,javascript,html,Javascript,Html,我试图上传一个图像，并显示正在进行的加载百分比 <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript"> function myFunction(){ console.dir(event.target.files[0].name); var read

我试图上传一个图像，并显示正在进行的加载百分比

<!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>


函数myFunction（）{
console.dir（event.target.files[0].name）；
var reader=new FileReader（）；
reader.onprogress=函数（progressEvent）{
if（progressEvent.LengthComputeable）{
var percentLoaded=数学四舍五入（(
progressEvent.loaded*100）/progressEvent.total）；
}
console.log（“总计：+progressEvent.total+”，已加载：
+progressEvent.loaded+”（“+percentLoaded+”）”；
}
}

当我上传图像时，会触发“onchange”。但是reader.onprogress不会被触发。如何触发onprocess事件？

事件

在函数中未定义。因此，在change函数中传递

事件

，并通过

readAsDataURL

将文件插入

读卡器

函数

函数myFunction（e）{
console.dir（e.target.files[0].name）；
var reader=new FileReader（）；
reader.readAsDataURL（e.target.files[0]）//将文件插入读取器
reader.onprogress=函数（progressEvent）{
if（progressEvent.LengthComputeable）{
var percentLoaded=Math.round((
progressEvent.loaded*100）/progressEvent.total）；
}
console.log（“总计：+progressEvent.total+”，已加载：+
progressEvent.loaded+”（“+percentLoaded+”）”；
}
}