Question

我正在尝试上传多张图片。所以我读到我可以生成一个临时URL并用ajax发送它们。

这个想法是将使用filereader创建的url推送到一个数组中，并使用ajax发送但是url的发送不正确。当我看到结果时，我得到一个空数组：

但是，如果我点击箭头，我可以看到里面的网址

但他们似乎无法接近。

这是我的代码：

$('form').on('submit',function(e) {

        e.preventDefault();

        var filesToUpload = document.getElementById("myFile");
        var files = filesToUpload.files;
        var fd = new FormData();
        var arr = [];

        if (FileReader && files && files.length) {

            for (i=0; i< files.length; i++){


                (function(file) {

                    var name = file.name;
                    var fr = new FileReader();  


                    fr.onload = function () {

                            arr.push(fr.result);

                    }

                    fr.readAsDataURL(file);

                })(files[i]);

            }

            console.log(arr);

        }


    });

最后的想法是转换为字符串JSON.stringify(arr)，然后在php json_decode($_POST['arr'])中解析。

当然这不起作用，因为JSON.stringify(arr)变空了。

Answer 1

也许以下简单的解决方案适合您？我已将console.log()和您的ajax调用放入fr.onload()方法，但仅在结果数组填满所有值后才启动它：

$('form').on('submit',function(e) {
        e.preventDefault();
        var filesToUpload = document.getElementById("myFile");
        var files = filesToUpload.files;
        var fd = new FormData();
        var arr = [];
        if (FileReader && files && files.length) {
            for (var i=0; i< files.length; i++){
                (function(file) {
                    var name = file.name;
                    var fr = new FileReader();  
                    fr.onload = function () {
                            arr.push(fr.result);

                            if(arr.length==files.length) {
                              console.log(arr);
                              // place your ajax call here!
                            }
                        }
                       fr.readAsDataURL(file);
                })(files[i]);
            }
        }
});

Javascript文件阅读器未存储在数组

1 个答案: