Jquery POST image and string with FormData

Question

This is JQuery part :

            $(".btnGorevOlustur").click(function (e) {

                var fileUpload = $(".fileGorevResim").get(0);
                var files = fileUpload.files;
                var dt = new FormData();
                for (var i = 0; i < files.length; i++) {
                    dt.append(files[i].name, files[i]);
                }

                var gPanoID = id;
                var gListeID = gorevListeID;
                var gBaslik = $(".txtGorevBaslik").val();
                var gAciklama = $(".txtareaGorevAciklama").val();
                var gSure = $(".txtGorevSure").val();

                dt.append("gpid", gPanoID);
                dt.append("glid", gListeID);
                dt.append("gbas", gBaslik);
                dt.append("gacik", gAciklama);
                dt.append("gsur", gSure);


                if (gBaslik != null && gBaslik != "" && gAciklama != null && gAciklama != "" && gSure != null && gSure != "") {
                    $.ajax({
                        type: "POST",
                        url: "PanoHandler.ashx",
                        dataType: "json",
                        data: dt,
                        contentType: false,
                        processData: false,
                    });
                    e.preventDefault();
                }
            });

And this is handler part :

        var gorevBaslik = context.Request.Form["gbas"];
        var gorevAciklama = context.Request.Form["gacik"];
        var gorevSure = context.Request.Form["gsur"];
        var gorevPanoID = context.Request.Form["gpid"];
        var gorevListeID = context.Request.Form["glid"];
        var tarih = DateTime.Now.ToString("ddMMyyyyHHmmss");
        if (context.Request.Files.Count > 0)
        {
            HttpFileCollection files = context.Request.Files;
            for (int i = 0; i < files.Count; i++)
            {
                HttpPostedFile file = files[i];
                string fname = context.Server.MapPath("~/img/panofoto/" + file.FileName + tarih);
                file.SaveAs(fname);
                sgFoto = file.FileName + tarih;
            }
        }
        if (!String.IsNullOrEmpty(gorevBaslik) && !String.IsNullOrEmpty(gorevAciklama) && !String.IsNullOrEmpty(gorevSure))
        {
            var gorev = new Pano_Gorev
            {
                Baslik = gorevBaslik,
                Aciklama = gorevAciklama,
                GorevSuresi = gorevSure,
                PanoID = Convert.ToInt32(gorevPanoID),
                ListeID = Convert.ToInt32(gorevListeID),
                Resim = sgFoto,
                Olusturan = 1,
                OlusturmaTarihi = DateTime.Now
            };
            dbo.Pano_Gorev.AddObject(gorev);
            dbo.SaveChanges();
            sresult = true;
            context.Response.Write(sresult);
        }
        else
        {
            sresult = false;
            context.Response.Write(sresult);
        }

The problem is on handler, because all values come as null.

  context.request.Form[..] //all coming as null.

I also tried the following :

context.request[..]

But this did not work either.

What should I do to solve this issue?

What browser are you using? Check here if you meet the requirements developer.mozilla.org/en/docs/Web/API/…. If you don't you'll have to go old school using forms — Liviu Boboia
– Liviu Boboia, Commented Nov 13, 2015 at 13:22
@LiviuBoboia I am using mozilla and I used these code before in another project and it worked. However this time doesn't work. Ajax is posting formdata well, there is not a problem but on the handler, I can't reach any data or value. — Adem Büyük
– Adem Büyük, Commented Nov 13, 2015 at 13:27
That is very strange, did you make sure that the name and ids for you upload elements match the keys for the context.Request.Form[...] ? — Liviu Boboia
– Liviu Boboia, Commented Nov 13, 2015 at 14:25
@LiviuBoboia Yes, I checked and it is true. I think context.request.Form not enought to get data. I am trying something random like context.request.Form.GetValues (just example) but couldn't find anything. Can you vote up the question please? — Adem Büyük
– Adem Büyük, Commented Nov 13, 2015 at 14:39

Adem Büyük · Accepted Answer · 2015-11-16 09:00:25Z

1

I finally found the problem. Jquery document in the project was old version and it was the problem why these codes did not work. When i update the jquery, codes work truely.

I edited some little mistakes.

In Consequence, this code can be usable and problem is solved.

answered Nov 16, 2015 at 9:00

Adem Büyük

5948 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nika Javakhishvili · Accepted Answer · 2015-11-16 09:02:40Z

1

Use native javascript. For example this is html :

<form id="upload_form" enctype="multipart/form-data" method="post">
  <input type="file" name="file1" id="file1"><br>
  <input type="button" value="Upload File" onclick="uploadFile()">
</form>

This is javascript :

function uploadFile(){
    var file = _("file1").files[0];
    // alert(file.name+" | "+file.size+" | "+file.type);
    var formdata = new FormData();
    formdata.append("file1", file);
    var ajax = new XMLHttpRequest();
    ajax.open("POST", "url");
    ajax.send(formdata);
}

answered Nov 16, 2015 at 9:02

Nika Javakhishvili

4628 silver badges19 bronze badges

Collectives™ on Stack Overflow

Jquery POST image and string with FormData

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related