varias - subir multiples imagenes php jquery

Cómo subir varios archivos usando PHP, jQuery y AJAX

Question

Diseñé un formulario simple que permite al usuario subir archivos al servidor. Inicialmente, el formulario contiene un botón ''examinar''. Si el usuario desea cargar varios archivos, debe hacer clic en el botón "Agregar más archivos", que agrega otro botón "examinar" en el formulario. Cuando se envía el formulario, el proceso de carga del archivo se maneja en el archivo ''upload.php''. Funciona perfectamente bien para cargar múltiples archivos. Ahora necesito enviar el formulario usando ''.submit ()'' de jQuery y enviar una solicitud ajax [''.ajax ()''] al archivo ''upload.php'' para manejar la carga del archivo.

Aquí está mi formulario HTML:

<form enctype="multipart/form-data" action="upload.php" method="post">
    <input name="file[]" type="file" />
    <button class="add_more">Add More Files</button>
    <input type="button" id="upload" value="Upload File" />
</form>

Aquí está el JavaScript:

$(document).ready(function(){
    $(''.add_more'').click(function(e){
        e.preventDefault();
        $(this).before("<input name=''file[]'' type=''file'' />");
    });
});

Aquí está el código para procesar la carga de archivos:

for($i=0; $i<count($_FILES[''file''][''name'']); $i++){
$target_path = "uploads/";
$ext = explode(''.'', basename( $_FILES[''file''][''name''][$i]));
$target_path = $target_path . md5(uniqid()) . "." . $ext[count($ext)-1]; 

if(move_uploaded_file($_FILES[''file''][''tmp_name''][$i], $target_path)) {
    echo "The file has been uploaded successfully <br />";
} else{
    echo "There was an error uploading the file, please try again! <br />";
}

}

Cualquier sugerencia sobre cómo debería escribir mi función ''.submit ()'' será realmente útil.

Answer 1

Finalmente encontré la solución usando el siguiente código:

$(''body'').on(''click'', ''#upload'', function(e){
        e.preventDefault();
        var formData = new FormData($(this).parents(''form'')[0]);

        $.ajax({
            url: ''upload.php'',
            type: ''POST'',
            xhr: function() {
                var myXhr = $.ajaxSettings.xhr();
                return myXhr;
            },
            success: function (data) {
                alert("Data Uploaded: "+data);
            },
            data: formData,
            cache: false,
            contentType: false,
            processData: false
        });
        return false;
});

Answer 2

HTML

<form enctype="multipart/form-data" action="upload.php" method="post">
    <input name="file[]" type="file" />
    <button class="add_more">Add More Files</button>
    <input type="button" value="Upload File" id="upload"/>
</form>

Javascript

 $(document).ready(function(){
    $(''.add_more'').click(function(e){
        e.preventDefault();
        $(this).before("<input name=''file[]'' type=''file''/>");
    });
});

para subir ajax

$(''#upload'').click(function() {
    var filedata = document.getElementsByName("file"),
            formdata = false;
    if (window.FormData) {
        formdata = new FormData();
    }
    var i = 0, len = filedata.files.length, img, reader, file;

    for (; i < len; i++) {
        file = filedata.files[i];

        if (window.FileReader) {
            reader = new FileReader();
            reader.onloadend = function(e) {
                showUploadedItem(e.target.result, file.fileName);
            };
            reader.readAsDataURL(file);
        }
        if (formdata) {
            formdata.append("file", file);
        }
    }
    if (formdata) {
        $.ajax({
            url: "/path to upload/",
            type: "POST",
            data: formdata,
            processData: false,
            contentType: false,
            success: function(res) {

            },       
            error: function(res) {

             }       
             });
            }
        });

PHP

for($i=0; $i<count($_FILES[''file''][''name'']); $i++){
    $target_path = "uploads/";
    $ext = explode(''.'', basename( $_FILES[''file''][''name''][$i]));
    $target_path = $target_path . md5(uniqid()) . "." . $ext[count($ext)-1]; 

    if(move_uploaded_file($_FILES[''file''][''tmp_name''][$i], $target_path)) {
        echo "The file has been uploaded successfully <br />";
    } else{
        echo "There was an error uploading the file, please try again! <br />";
    }
}

/** 
    Edit: $target_path variable need to be reinitialized and should 
    be inside for loop to avoid appending previous file name to new one. 
*/

Utilice la secuencia de comandos de la secuencia de comandos anterior para cargar ajax. Funcionará

Answer 3

Mi solución

• Asumiendo que forma id = "my_form_id"
• Detecta el método de formulario y forma acción desde HTML

código jQuery

$(''#my_form_id'').on(''submit'', function(e) {
    e.preventDefault();
    var formData = new FormData($(this)[0]);
    var msg_error = ''An error has occured. Please try again later.'';
    var msg_timeout = ''The server is not responding'';
    var message = '''';
    var form = $(''#my_form_id'');
    $.ajax({
        data: formData,
        async: false,
        cache: false,
        processData: false,
        contentType: false,
        url: form.attr(''action''),
        type: form.attr(''method''),
        error: function(xhr, status, error) {
            if (status==="timeout") {
                alert(msg_timeout);
            } else {
                alert(msg_error);
            }
        },
        success: function(response) {
            alert(response);
        },
        timeout: 7000
    });
});