javascript - FileReader.onload无法及时返回成功

Question

我想像asp.net一样获取图像文件流并将它们传递到后台，但是每次我尝试触发onload事件时，它总是在编程通过后完成。

我尝试使用setTimeout来阻止它并让它处理并等待它成功，但它失败了。下面的评论解释了我失败的步骤。谢谢。

 $("#goodsImage").change(function (e) {
        if ($("#goodsImage").val() == "")
        {
            alert("please choose the image you want to upload");
            return;
        }

        var filepath = $("#goodsImage").val();

        //$("#goodsImage").val();
        var extStart=filepath.lastIndexOf(".");
        var ext=filepath.substring(extStart,filepath.length).toUpperCase();
        if(ext!=".BMP"&&ext!=".PNG"&&ext!=".GIF"&&ext!=".JPG"&&ext!=".JPEG"){
            alert("only images could be uploaded");
            return;
        }
        readFile(e.target.files[0]);
        setTimeout(function () {
            //I want to use setTimeOut to delay it
        }, 1000);


       //always undefined!!!
       if ($("#hidImageStream").val() != "")
       {
           $.post("@Url.Action("UploadGoodImage")", { localPath: readerRs }, function (e)
           {
               if (e) {
                   $("#ImagePreviewUrl").val(e.data);
               }
               else {

               }
           });
       }



    });

    function readFile(file) {
        var reader = new FileReader();
        reader.onload = readSuccess;

        //always success after post request accomplished.
        function readSuccess(evt) {

            document.getElementById("hidImageStream").
                value = evt.target.result;

        };
        reader.readAsText(file);
    }

Answer 1

这里有一些提示

<-- use accept and only allow image mimetype. It can accept extension to -->
<input type="file" name="pic" accept="image/*">

• 将文件读取为 readAsText 对于二进制来说也是一个可怕的想法。 (我看到你都改成了base64)。
• readAsDataURL 也不是那么好，因为它的上传量大约是原来的 3 倍，并且需要更多的 CPU/内存。
• 欺骗文件名非常容易，因此最好实际测试它是否是图像

$("#goodsImage").change(function() {
    // We use `this` to access the DOM element instead of target
    for (let file of this.files) {
        // Test if it's a image instead of looking at the filename
        let img = new image
        img.onload = () => {
            // Success it's a image
            // upload file
            let fd = new FormData
            fd.append('file', file)

            $.ajax({
                url: 'http://example.com',
                data: fd,
                processData: false, // so jquery can handle FormData
                type: 'POST',
                success: function( data ) {
                    alert( data )
                }
            })
        }

        img.onerror = () => {
            // only images dude
        }

        img.src = URL.createObjectURL(file)
    }
})