输入类型文件多个jQuery laravel

Question

我正在准备做一个网络应用程序，我可以将任何文件附加到电子邮件中并在数据库中插入名称。

我可以在这个网站上看到关于这个主题的帖子，但我做不到。

我有一个输入倍数，我可以选择任何文件：

<input type="file" name="adjunto" id="adjunto" multiple>

使用 jQuery 我正在托盘获取选定的文件：

var archivo = $("#adjunto").prop('files')[0];
var nombreArchivo = $("#adjunto").val();

这个文件或文件我插入到FormData

formData.append('file', archivo);

使用 Ajax 将 formData 发送到控制器后：

public function setIncidenciaPost(Request $request){


    $uploadedFile = "";
    $filename = "";


    // bloque para adjuntar fichero al email al abrirIncidencia


    if($request->file('file') != ""){

        $uploadedFile = $request->file('file');
        $destino = public_path().'/subidas';

        for($i = 0; $i < count($uploadedFile); $i++){
            $filename = $uploadedFile[$i]->getClientOriginalName();

            $uploadedFile[$i]->move($destino, $filename);
        }


        
    }





    $resultado = \DB::table('incidencias')->insert([
                                                     'fecha_solicitud' => $request["fechaSolicitud"],
                                                     'fecha_respuesta' => $request["fechaRespuesta"],
                                                           'categoria' => $request["categoria"],
                                                           'asignadoA' => $request["tecnico"],
                                                         'solicitante' => $request["solicitante"],
                                                           'prioridad' => $request["prioridad"],
                                                              'estado' => "pendiente",
                                                              'asunto' => $request["asunto"],
                                                              'cuerpo' => $request["mensaje"],
                                                             'cliente' => $request["cliente"],
                                                             'adjunto' => $filename
                                                    ]);

    $idIncidencia = \DB::getPdo()->lastInsertId();

    // ENVIA EMAIL A LOS TÉCNICOS CUANDO SE GENERA LA INCIDENCIA
    $this->enviarEmail($request);

}

当我执行 var_dump($filename) 时，我只能显示一个文件。如果我做 var_dump($uploadedFile)

网络浏览器控制台显示：

 array(1) {
 [0]=>
  object(Illuminate\Http\UploadedFile)#248 (7) {
    ["test":"Symfony\Component\HttpFoundation\File\UploadedFile":private]=>
    bool(false)
    ["originalName":"Symfony\Component\HttpFoundation\File\UploadedFile":private]=>
    string(11) "Captura.PNG"
    ["mimeType":"Symfony\Component\HttpFoundation\File\UploadedFile":private]=>
    string(9) "image/png"
    ["error":"Symfony\Component\HttpFoundation\File\UploadedFile":private]=>
    int(0)
    ["hashName":protected]=>
    NULL
    ["pathName":"SplFileInfo":private]=>
    string(24) "C:\xampp\tmp\phpB785.tmp"
    ["fileName":"SplFileInfo":private]=>
    string(11) "phpB785.tmp"
  }
}

只有一个文件。如果在 jquery 中删除 web broser 控制台中的索引 [0] 显示：

    array(1) {
  [0]=>
  object(Illuminate\Http\UploadedFile)#248 (7) {
    ["test":"Symfony\Component\HttpFoundation\File\UploadedFile":private]=>
    bool(false)
    ["originalName":"Symfony\Component\HttpFoundation\File\UploadedFile":private]=>
    string(11) "Captura.PNG"
    ["mimeType":"Symfony\Component\HttpFoundation\File\UploadedFile":private]=>
    string(9) "image/png"
    ["error":"Symfony\Component\HttpFoundation\File\UploadedFile":private]=>
    int(0)
    ["hashName":protected]=>
    NULL
    ["pathName":"SplFileInfo":private]=>
    string(24) "C:\xampp\tmp\php2397.tmp"
    ["fileName":"SplFileInfo":private]=>
    string(11) "php2397.tmp"
  }
}

我不知道我做错了...感谢您的帮助，对不起我的英语

在回复之后，我把它托盘了：

formData.append('file[]',  document.getElementById('fileToUpload').files[0]);

结果如下：

array(1) {
  [0]=>
  object(Illuminate\Http\UploadedFile)#261 (7) {
    ["test":"Symfony\Component\HttpFoundation\File\UploadedFile":private]=>
    bool(false)
    ["originalName":"Symfony\Component\HttpFoundation\File\UploadedFile":private]=>
    string(11) "Captura.PNG"
    ["mimeType":"Symfony\Component\HttpFoundation\File\UploadedFile":private]=>
    string(9) "image/png"
    ["error":"Symfony\Component\HttpFoundation\File\UploadedFile":private]=>
    int(0)
    ["hashName":protected]=>
    NULL
    ["pathName":"SplFileInfo":private]=>
    string(24) "C:\xampp\tmp\php3A08.tmp"
    ["fileName":"SplFileInfo":private]=>
    string(11) "php3A08.tmp"
  }
}

我正在托盘选择两个图像，但只有我能看到一个

更新

php 控制器

public function setIncidenciaPost(Request $request){


    $uploadedFile = "";
    $filename = "";


    // bloque para adjuntar fichero al email al abrirIncidencia


    if($request->file('file') != ""){

        $uploadedFile = $request->file('file');
        $destino = public_path().'/subidas';

        for($i = 0; $i < count($uploadedFile); $i++){
            $filename = $uploadedFile[$i]->getClientOriginalName();

            $uploadedFile[$i]->move($destino, $filename);
        }


        
    }





    $resultado = \DB::table('incidencias')->insert([
                                                     'fecha_solicitud' => $request["fechaSolicitud"],
                                                     'fecha_respuesta' => $request["fechaRespuesta"],
                                                           'categoria' => $request["categoria"],
                                                           'asignadoA' => $request["tecnico"],
                                                         'solicitante' => $request["solicitante"],
                                                           'prioridad' => $request["prioridad"],
                                                              'estado' => "pendiente",
                                                              'asunto' => $request["asunto"],
                                                              'cuerpo' => $request["mensaje"],
                                                             'cliente' => $request["cliente"],
                                                             'adjunto' => $filename
                                                    ]);

    $idIncidencia = \DB::getPdo()->lastInsertId();

    // ENVIA EMAIL A LOS TÉCNICOS CUANDO SE GENERA LA INCIDENCIA
    $this->enviarEmail($request);

}

向控制器发送文件的SCRIPT JS：

if(contador == 1){

    /*
    * Tenemos que crear un formData, para enviar el archivo adjunto
    * Una vez creado, debemos añadirle todos los campos del formulario
    * Así los recibiremos en el controlador.
    */

    var fechaSolicitud = $("#fechaSolicitud").val();
    var categoria = $("#categoria").val();
    var prioridad = $("#Abrirprioridad").val();
    var telefono = $("#telefonoContacto").val();
    var asunto = $("#asunto").val();
    var mensaje = $("#cuerpoMensaje").val();
    var token = $("#token").val();
    var archivo = $("#adjunto").prop('files')[0];
    var nombreArchivo = $("#adjunto").val();
    var formData = new FormData();

    formData.append('file[]', archivo);
    formData.append('fechaSolicitud', fechaSolicitud);
    formData.append('categoria', categoria);
    formData.append('prioridad', prioridad);
    formData.append('asunto', asunto);
    formData.append('mensaje', mensaje);
    formData.append('solicitante', codigoSolicitante);
    formData.append('cliente', codigoCliente);
    formData.append('tecnico', tecnicoSeleccionado);
    formData.append('telefono', telefono);

    $.ajax({
        url: "/setIncidencia",
        type: "POST",
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        contentType: false,
        processData: false,   
        cache: false, 
        data: formData,
        success: function(data){
            $("#correcto").show();
            $("#correcto").append("Incidencia Generada");

            //UNA VEZ CREADA LA INCIDENCIA ENVIAMOS EL EMAIL DESDE EL CONTROLADOR Y REDIRECCIONAMOS A:
            window.location.href = "/home";
        },
        error: function(xhr){
            var data = xhr.responseJSON;
            console.log("Error: "+xhr.status);
            $("#error").show();
            $("#error").append("Ha ocurrido un error al crear la incidencia -> Código de Error: " + xhr.status);
        }
    }); 

}// fin if

Answer 1

您可以尝试使用 file[] 代替 file:

formData.append('file[]',  document.getElementById('fileToUpload').files[0]);

它将返回包含您的文件数据的数组。

Answer 2

试试这个

public function setIncidenciaPost(Request $request){

    //Get the array of uploaded files from request data or initialise as empty array
    $uploadedFile = $request->input('adjunto', []);

    $filename = [];


    if(count($uploadedFile)){

        $destino = public_path().'/subidas';

        for($i=0; $i<count($uploadedFile); $i++){
            //Validate the uploaded file
            // $uploadedFile[0]->isValid();

            //Get the original filename of uploaded file
            $filename[] = $fname = $uploadedFile[$i]->getClientOriginalName();

            //Store the file
            $uploadedFile[$i]->move($destino, $fname)
        }
        

        echo var_dump($uploadedFile);
        exit();
    }

    //Rest of the code regarding database persistence etc
}

根据您更新的 javascript 代码，进行以下更改以上传所有文件。您当前的代码似乎只将一个文件附加到 formData。

jQuery

$.each($("#adjunto")[0].files,function(key,input){
    formData.append("#adjunto", input);
});

原版Javascript

const uploadedFiles = document.getElementById("#adjunto");
const noOfFilesUploaded = uploadedFiles.files.length;

for(let i = 0; i < uploadedFiles.files.length; i++) {
    formData.append('adjunto', uploadedFiles.files[i];
}

Answer 3

我的解决办法是：

if(contador == 1){

        /*
        * Tenemos que crear un formData, para enviar el archivo adjunto
        * Una vez creado, debemos añadirle todos los campos del formulario
        * Así los recibiremos en el controlador.
        */

        var fechaSolicitud = $("#fechaSolicitud").val();
        var categoria = $("#categoria").val();
        var prioridad = $("#Abrirprioridad").val();
        var telefono = $("#telefonoContacto").val();
        var asunto = $("#asunto").val();
        var mensaje = $("#cuerpoMensaje").val();
        var token = $("#token").val();
        var archivo =  $("#adjunto").prop('files');
        var datosFormulario = new FormData();



        for(let i=0; i < document.getElementById('adjunto').files.length; i++){
            datosFormulario.append('adjunto[]', document.getElementById('adjunto').files[i]);
        }


        datosFormulario.append('fechaSolicitud', fechaSolicitud);
        datosFormulario.append('categoria', categoria);
        datosFormulario.append('prioridad', prioridad);
        datosFormulario.append('asunto', asunto);
        datosFormulario.append('mensaje', mensaje);
        datosFormulario.append('solicitante', codigoSolicitante);
        datosFormulario.append('cliente', codigoCliente);
        datosFormulario.append('tecnico', tecnicoSeleccionado);
        datosFormulario.append('telefono', telefono);



        $.ajax({
            url: "/setIncidencia",
            type: "POST",
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            contentType: false,
            processData: false,   
            cache: false, 
            data: datosFormulario,
            success: function(data){
                $("#correcto").show();
                $("#correcto").append("Incidencia Generada");

                //UNA VEZ CREADA LA INCIDENCIA ENVIAMOS EL EMAIL DESDE EL CONTROLADOR Y REDIRECCIONAMOS A:
                window.location.href = "/home";
            },
            error: function(xhr){
                var data = xhr.responseJSON;
                console.log("Error: "+xhr.status);
                $("#error").show();
                $("#error").append("Ha ocurrido un error al crear la incidencia -> Código de Error: " + xhr.status);
            }
        }); 

    }// fin if

在控制器中：

$nombreArchivo = array();
        $destino = public_path().'/subidas';


        // bloque para subir fichero/s a la carpeta subida en public y posterior envio de email

        if($request->file('adjunto') != ""){

            for( $i=0; $i<count($request->file('adjunto')); $i++ ){
                $nombreArchivo[] = $request->file('adjunto')[$i]->getClientOriginalName();
                


                $request->file('adjunto')[$i]->move($destino, $request->file('adjunto')[$i]->getClientOriginalName());
            }
        }
        //fin bloque


        $resultado = \DB::table('incidencias')->insert([
                                                         'fecha_solicitud' => $request["fechaSolicitud"],
                                                         'fecha_respuesta' => $request["fechaRespuesta"],
                                                               'categoria' => $request["categoria"],
                                                               'asignadoA' => $request["tecnico"],
                                                             'solicitante' => $request["solicitante"],
                                                               'prioridad' => $request["prioridad"],
                                                                  'estado' => "pendiente",
                                                                  'asunto' => $request["asunto"],
                                                                  'cuerpo' => $request["mensaje"],
                                                                 'cliente' => $request["cliente"],
                                                                 'adjunto' => implode(',', $nombreArchivo),
                                                        ]);

        $idIncidencia = \DB::getPdo()->lastInsertId();

        // ENVIA EMAIL A LOS TÉCNICOS CUANDO SE GENERA LA INCIDENCIA
        $this->enviarEmail($request);

    }