Home / Questions / 42358
Accepted
eezzekl
Asked: 2020-01-05 09:18:48 +0800 CST 2020-01-05 09:18:48 +0800 CST

Data type to receive file in Asp.net (C# ) sent from JavaScript

  • 772

I have a page made in HTML and JavaScript , in this I have a form with several inputsamong them is a input file, and I send them to the server through Ajax and JS .

On the server side I receive the data from the inputs, but when I receive the input fileI get an incorrect data type error.

My question is: What type of data do I have to use on the server side ( ASP.net and C# ) in order to receive the file correctly.

Here part of the code I have:

HTML

  <form id='frm1'>
     <input type='text' id='nombre'>
     <input type='file' id='balance'>
  </form>

javascript

fuction guardar(){
 var nombre = $('#nombre').val();
 var files = $("#balance").get(0).files;
 PageMethods.Guardar(nombre,files[0],guardar_Callback, Failed_CallBack,context);
}

On the server side I have the following method:

[WebMethod()]
public static int guardar(string nombre, tipoArchivo balance){
//lo que haga con la informacion
}

As I told you, with the exception of the data type to receive the file, everything works fine.

javascript

2 Answers

  1. Best Answer

    After a lot of research and with the mentioned requirements of Using JavaScrip , PageMethods and WebMethod , I must say that it is not possible to upload a file to the server, due to the limitations of the technologies themselves and their way of working.

    In order to perform this action, it is necessary to either use a UpdatePanelserver-side control, which is what I ended up doing, as @weimar indicated and as this link shows https://www.codeproject.com/Articles/16945/ Simple-AJAX-File-Upload

    Or use MVC as @Lazarok shows in his answer https://stackoverflow.com/a/42734/24364

    • 2

  2. I enclose a code using ASP.NET MVC 4, this is the structure of the project enter image description here

    Body of the Index.cshtml file

    <!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
    <input type="file" id="file" value="enviar" /><br />
    </div>

</body>

<script type="text/javascript">

    function ficheroSeleccionado(e) {
        if (e.target.files.length > 0) {
            subirFichero(e.target.files[0]);
        }
    }

    function subirFichero(file) {
        var xhr = new XMLHttpRequest();
        var formData = new FormData();
        formData.append("file", file);
        xhr.addEventListener("error", function (e) {
            alert("Error subiendo el archivo.");
        }, false);
        xhr.addEventListener("load", function (e) {
            //Codigo subido OK
            alert("fichero subido: " + e.target.statusMessage + "->" + e.target.statusText);
        });
        xhr.open("POST", "@Url.Action("UpLoad")", true);
        xhr.send(formData);
    }

        document.getElementById("file").addEventListener("change", ficheroSeleccionado, false);

</script>

</html>

    UpLoad.cshtml file body

        <!DOCTYPE html>

<html>
<head>
    <title>title</title>
</head>
<body>
    <div>
        OK
    </div>
</body>
</html>

    Body of the IndexController.cs file

     using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;

    namespace SubiendoFicheroAJAX_ASP.MET.Controllers
    {
        public class IndexController : Controller
        {
            //
            // GET: /Index/

            public ActionResult Index()
            {
                return View();
            }

            [HttpPost]
            public ActionResult UpLoad(string descripcion, HttpPostedFileBase file)
            {
                if (file!=null)
                file.SaveAs(Server.MapPath("~/" + file.FileName));
                return View();
            }

        }
    }
    • 1