如何使用 Javascript 创建无格式文件上传？

Question

我有以下表格：

$("#multimedia_upload").on('submit',function(e){
            e.preventDefault();
            console.log("files submited");
            
            
            var images = $("#multimedia_upload input[name='images']")[0].files;
            if(images.length == 0){
                uploadStatus.images=true;
                redirect();
            }

            uploadStatus.images=false;
            var status = true;
            var uploadedTimes = images.length

            Array.from(images).forEach(function(img){
                fileReader.onload = function(){

                    $.ajax({
                        method: "post",
                        url: $("#multimedia_upload").attr('action'),
                        processData: false,
                        dataType: "json",
                        data: JSON.stringify({"image": fileReader.result}),
                        success: function(){
                            status = status && true;
                        },
                        fail: function(){
                            status = status && false;
                            alert("Αδυναμία ανεβάσματος εικόνας");
                        },
                        complete: function(){
                            uploadedTimes--;
                            if(uploadedTimes == 0){
                                uploadStatus.images=status;
                                redirect();
                            }
                        }
                    });
                }

                fileReader.onerror = function(){
                    uploadStatus.images=false;
                    alert("Αδυναμία ανεβάσματος εικόνας");
                }

                fileReader.readAsDataURL(img)
            });
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="multimedia_upload" action=".p/stores/action-uploadStoreImage"  method="POST">
    <input type="file" style="display:hidden;" name="images" multiple="multiple" accept="image/*"/>
</form>

但数据上传为 json 包含 base64。我想要做的是复制一个表单上传，因为每个图像都在它自己的输入字段上，有它自己的表单。

那么你知道我该怎么做吗？我想一次上传一个文件的原因是由于服务器对最大上传文件的限制。我也想通过模拟 ajax 文件上传来避免代码 ingiter 的 Disallowed Key Characters. 过滤。

本题中出现的任何方案都需要修改codeingiter的核心： CodeIgniter Disallowed Key Characters

而且我想避免我的应用程序太老了，而且我的老板更换框架的工时成本太高。

更新 1

我也试过这个：

$("#multimedia_upload").on('submit',function(e){
            e.preventDefault();
            console.log("files submited");
            
            
            var images = $("#multimedia_upload input[name='images']")[0].files;
            if(images.length == 0){
                uploadStatus.images=true;
                redirect();
            }

            uploadStatus.images=false;
            var status = true;
            var uploadedTimes = images.length

            Array.from(images).forEach(function(img){


                    $.ajax({
                        method: "post",
                        url: $("#multimedia_upload").attr('action'),
                        processData: false,
                        data: img,
                        success: function(){
                            status = status && true;
                        },
                        fail: function(){
                            status = status && false;
                            alert("Αδυναμία ανεβάσματος εικόνας");
                        },
                        complete: function(){
                            uploadedTimes--;
                            if(uploadedTimes == 0){
                                uploadStatus.images=status;
                                redirect();
                            }
                        }
                    });
                
            });
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="multimedia_upload" action=".p/stores/action-uploadStoreImage"  method="POST">
    <input type="file" style="display:hidden;" name="images" multiple="multiple" accept="image/*"/>
</form>

但还是无法一一上传每张图片

Answer 1

在您的 javascript 代码中有 2 个问题：

正如@Thanh Dao 提到的那样跳过文件读取。

Ajax 调用还应包含以下配置：

    async: false,
    cache: false,
    contentType: false,
    processData: false,

并且 Input 应该在它自己的 FormData 对象中。只需将 img 放入专用的 FromData。

因此最终结果应该是：

        $("#multimedia_upload").on('submit',function(e){
            e.preventDefault();
            console.log("files submited");
            
            
            var images = $("#multimedia_upload input[name='images']")[0].files;
            if(images.length == 0){
                uploadStatus.images=true;
                redirect();
            }

            uploadStatus.images=false;
            var status = true;
            var uploadedTimes = images.length

            Array.from(images).forEach(function(img){
                var formData = new FormData();
                formData.append('image',img);
                $.ajax({
                    method: "post",
                    url: $("#multimedia_upload").attr('action'),
                    // url: "http://etable.local/test.php",
                    processData: false,
                    async: false,
                    cache: false,
                    contentType: false,
                    processData: false,
                    data: formData,
                    success: function(){
                        status = status && true;
                    },
                    fail: function(){
                        status = status && false;
                        alert("Αδυναμία ανεβάσματος εικόνας");
                    },
                    complete: function(){
                        uploadedTimes--;
                        if(uploadedTimes == 0){
                            uploadStatus.images=status;
                            redirect();
                        }
                    }
                });
            });
        });

最后，您可以通过将 JS 调用的 url 替换为包含此简单脚本的 url 来测试文件上传是否正常（为简单起见，只需放置 $_SERVER['DOCUMENT_ROOT'] 点） :

<?php

var_dump($_FILES);

如果它显示了一个输出，那么 Ajax 上传是可以的，如果不是你弄乱了执行 ajax 调用的 Js 部分。这样你就可以绕过任何框架并确保JS部分正常工作。

如何使用 Javascript 创建无格式文件上传？

How I can create a formless file upload using Javascript?

javascript

php

ajax

codeigniter-2

更新 1