0

Se tiene un formulario con HTML donde hay dos campos, uno de texto y otro para archivos, al hacer el Submit, el controlador obtiene los datos y se puede trabajar con estos, pero al terminar el action, la pagina se recarga, en vez de ejecutar el AJAX o POST, y al final lo que necesito es que despues de ejecutar el action, me devuelve un JSON con los errores, y se vean en la vista donde esta el formulario de HTML (esto si funciona si solo se envía texto).

  • He intentado incluso convertir los archivos a texto.
  • Usar AJAX (Recarga).
  • Usar POST (Recarga).
  • Usar iFrame (funciona en parte pero abre una nueva pestaña).

Este es el formulario junto con algunos metodos de JS que he usado, algunos funcionan, pero siempre recargan la pagina (otros son de otro formulario pero al final hace lo mismo):

<script>
function crea() {
    var data = new FormData();
    var inputs_data = {
        cia_base: $("#cia_base").val(),
        compania: $("#compania").val(),
        division: $("#division").val()
    }
    for (var x in inputs_data) {

        data.append(x, inputs_data[x]);
    }
    data.append("logo", $("#logo").val());
    data.append("archivo2", $("#archivo2").val());
    $.ajax({
        type: "POST",
        url: "/Files/Post",
        data: data,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success: function (msg) {

            console.log("success")
        },
        error: function () {
            console.log("error")
        }
    });
}
    function metodo() {

        var data = new FormData();
        data.append("file", document.getElementById("file"));
        console.log("2");
        $.ajax({
            type: "POST",
            url: "api/FileUpload/UploadFile",
            contentType: false,
            processData: false,
            data: data,
            success: function (result) {
                console.log("3");
                if (result) {
                    alert('Archivos subidos correctamente');
                    $("#inputFile").val('');
                }
            },
            fail: function (result) {
                console.log("4");
                if (result) {
                    alert('Archivos subidos INcorrectamente');
                    $("#inputFile").val('');
                }
            }

        });
    }
     function enviar() {

            var url = "@Url.Action("Upload", "Home")";
         var file = $("#file").val();
         var data = { "file": file };

            $.post(url, file).done(function (data) {


        });
    }
</script>
<form action="Home/upload" method="post" enctype="multipart/form-data" id="miForm" name="miForm" target="request">
    <label for="photo">Photo:</label>
    <input type="file" name="file" id="file" />
    <label>Texto:</label>
    <input type="text" name="text" id="text" />
    <input type="submit" value="Upload" />
    @*<input type="button" onclick="enviar()" value="Upload" />*@
</form>

Y este es el controlador:

        [HttpPost]
        public JsonResult Upload()
        {


        HttpPostedFileBase photo = Request.Files["file"];
        string texto2 = Request.Params["text"];
        //if (photo != null && photo.ContentLength > 0)
        //{
        //    var fileName = Path.GetFileName(photo.FileName);
        //    photo.SaveAs(Path.Combine(directory, fileName));
        //}

        return Json("Index", JsonRequestBehavior.AllowGet);
        }
2

1 respuesta 1

0

De acuerdo al comentario hecho por Tegito123, edité un poco el codigo de acuerdo a la respuesta del comentario, quedando así:

El script, ya no se usaría Ajax, sino XMLHttpRequest:

    window.onload = function(){
    document.getElementById('uploader').onsubmit = function () {
        var checkboxInput = document.getElementById('checkboxInput');
        var formdata = new FormData(); //FormData object
        var fileInput = document.getElementById('fileInput');
        var fileInput2 = document.getElementById('fileInput2');
     
        var textoInput = document.getElementById('textoInput');
        //Iterating through each files selected in fileInput
        for (i = 0; i < fileInput.files.length; i++) {
            //Appending each file to FormData object
            formdata.append(fileInput.files[i].name, fileInput.files[i]);
        }
        for (i = 0; i < fileInput2.files.length; i++) {
            //Appending each file to FormData object
            formdata.append(fileInput2.files[i].name, fileInput2.files[i]);
        }
        formdata.append(textoInput.id, textoInput.value);
        formdata.append(checkboxInput.id, checkboxInput.checked);
        //Creating an XMLHttpRequest and sending
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/Home/Upload');
        xhr.send(formdata);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                alert(xhr.responseText);
            }
        }
        return false;
    }  
    };
<form id="uploader">

    <input type="checkbox" id="checkboxInput" />
    <input id="textoInput" type="text" />
    <input id="fileInput" type="file" />
    <input id="fileInput2" type="file" />
    <input type="submit" value="Upload file" />
</form>

Mientras que el action del controlador sería:

public JsonResult Upload()
    {
        for (int i = 0; i < Request.Files.Count; i++)
        {
            HttpPostedFileBase file = Request.Files[i]; //Uploaded file
                                                        //Use the following properties to get file's name, size and MIMEType
            int fileSize = file.ContentLength;
            string fileName = file.FileName;
            string mimeType = file.ContentType;
            System.IO.Stream fileContent = file.InputStream;
            //To save file, use SaveAs method
            file.SaveAs(Server.MapPath("~/") + fileName); //File will be saved in application root

        }
        string texto = Request.Params["textoInput"];
        string check = Request.Params["checkboxInput"];
        return Json("Uploaded " + Request.Files.Count + " files. Texto:"+texto);
    }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.