Formból feltöltöttXLSX + json küldése egy ajaxszal jquery
2019-09-15T19:45:54+02:00
2019-09-26T16:10:11+02:00
2022-08-11T14:55:31+02:00
gyendresz
Egy formban van egy fájl feltöltés(xlsx) meg a form adatai jsonbe töltve.
Eddig csak a paramétereket kellett küldeni xlsx nélkül (ez jó volt).
Azért, hogy ne keljen nagyon átírni a logikát, szeretném egyben elküldeni és php-val szétcincálni.
Kiszedtem a relevánsnak gondolt részt, de lehet benne hiba. Nem az esetleges hiba érdekel,és kritika is csak mérsékelten  , hanem az, hogy tudnám egyben átküldeni a szervernek és ott kettévágni a legkevesebb változtatással (hogy a többi rész működőképes maradjon).

<form enctype="multipart/form-data" > <input class="param" title="text" type="text" name="parameter1" size="10" value="" data-select2-id="5"> <input class="param" title="text" type="text" name="id" size="5" value=""> <input type="file" name="file" id="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"> <input type="submit" id="upload_form_2" class="button" value="SEND" name="group" onclick=runUpload("UPLOAD_FILE")> </form> <script> function runUpload(type){ //kiválasztott file és paraméterek visszaküldése if(kivalasztott==","){ alert("Válassz ki valamit!"); return; } var els = document.getElementsByClassName("param"); var param=""; var tarol=true; var value=""; Array.prototype.forEach.call(els, function(el) { // Do stuff here tarol=true; console.log(el.tagName); console.log(el.type); console.log(el.name); console.log(el.value); console.log(el.checked); if(el.type=="checkbox"){ value=el.checked; }else if(el.type=="radio"){ if(el.checked==true){ value=el.value; tarol=true; }else{ tarol=false; } }else{ value=el.value.addslashes(); } if(tarol==true){ param=param+'"'+el.name+'":"'+value+'",'; } }); // ez a rész jó, a formData-ban benne kellene lenni az adatnak? if(type=="UPLOAD_FILE"){ var formData = new FormData(); // Attach file formData.append('file', $('input[type=file]')[0].files[0]); //ha kiiratom, látnom kellene az xlsx zanzásított tartalmát? console.log($('input[type=file]')[0].files[0]); } var request =$.ajax({ url: "task_run", method: "POST", data: {id: a_id, type: act_type, json_data: kivalasztott}, dataType: "html" }); request.done(function(html_string){ alert("Feltöltés sikeres!"); window.location.reload(); }); request.fail(function(errMsg) { console.log(errMsg); alert("ERROR"); }); } </script>
Mutasd a teljes hozzászólást!
Egy kicsit tulgondoltrad:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>xls_upload</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=""> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <form id="form" enctype="multipart/form-data"> <input id="parameter1" class="param" title="text" type="text" name="parameter1" size="10" value="" data-select2-id="5"> <input id="parameter2" class="param" title="text" type="text" name="id" size="5" value=""> <input type="file" name="file" id="fileInput" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"> <input type="submit" class="button" value="SEND" name="group"> </form> <script> $("#form").on("submit", function (event) { event.preventDefault(); // alert($("#file").length); var file = $("#fileInput").get(0).files[0]; var parameter1 = $("#parameter1").val(); var parameter2 = $("#parameter2").val(); var formData = new FormData(); formData.append("xls", file); formData.append("parameter1", parameter1); formData.append("parameter2", parameter2); $.ajax({ type: "post", url: "http://localhost:8080/upload_server.php", enctype: 'multipart/form-data', processData: false, contentType: false, cache: false, data: formData, success: function (response) { alert(response); } }) }); </script> </body> </html>

upload_server.php:

<?php echo $_POST['parameter1']; echo "<br>"; echo $_POST['parameter2']; echo "<br>"; echo "<br>"; echo "<pre>"; echo var_dump($_FILES['xls']); echo "</pre>"; ?>
Mutasd a teljes hozzászólást!

  • multipart ajax post a baratod:

    jQuery ajax file upload - SoftDevPractice
    Mutasd a teljes hozzászólást!
  • Valahogy láthatom a böngésző oldalon hogy a postban milyen kérés ment ki?
    Mutasd a teljes hozzászólást!
  • Mutasd a teljes hozzászólást!
  • A multipart/form-data tartalmára gondoltam emberileg olvasható formában hogy miből áll, mint amikor POST paraméterként  json megy el vagy a GET paraméterei:

    parameter1: 1asxaxax
    id: 1803110543301684

    Vagy ez így hülyeség? 

    Az első példában egy form adatai mennek el a csatolt fájlal.
    Én a fájlt meg egy generált jsont szeretném elküldeni nem a nyers formot.

    Accept: */*
    Accept-Encoding: gzip, deflate, br
    Accept-Language: hu-HU,hu;q=0.9,en-US;q=0.8,en;q=0.7
    Cache-Control: no-cache
    Connection: keep-alive
    Content-Length: 1377
    Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryZCAwRysFuetepAbW
    DNT: 1
    Host: localhost
    Origin: http://localhost
    Pragma: no-cache
    Referer: http://localhost/proba/upload.html
    Sec-Fetch-Mode: cors
    Sec-Fetch-Site: same-origin
    User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36
    X-Requested-With: XMLHttpRequest
    Mutasd a teljes hozzászólást!
  • var formData = new FormData(); formData.append('xlsx', files[0]); formData.append('json', JSON.stringify(data)); $.ajax({ type: 'post', url: 'path/to/route', enctype: 'multipart/form-data', processData: false, contentType: false, cache: false, data: formData, } });
    Mutasd a teljes hozzászólást!
  • Chromeban jobb click a requesten es copy-> copy all as cURL.

    Nekem speciel a httpie.org kimenete a leginformatívabb erre az esetre.
    Mutasd a teljes hozzászólást!
  • Szia!
    A formData.append('xlsx', files[0]); sorral van valami baja.
    (Ha benne van, hibára fut és újratölti az oldalt mielőtt látnám mi a baja.)
    A sor nélkül megy a kommunikáció.
    Kiszedtem egy részt és megpróbálom azt életre kelteni, de még rosszabb mint az eredeti.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <form enctype="multipart/form-data"> <input class="param" title="text" type="text" name="parameter1" size="10" value="" data-select2-id="5"> <input class="param" title="text" type="text" name="id" size="5" value=""> <input type="file" name="file" id="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"> <input type="submit" id="upload_form_2" class="button" value="SEND" name="group" onclick=send_Param("UP")> </form> <script> function send_Param(type){ alert("upload-"); if(kivalasztott==","){ alert("Válassz ki valamit!"); return; } var els = document.getElementsByClassName("param"); var param=""; var tarol=true; var value=""; Array.prototype.forEach.call(els, function(el) { //paraméter json összeállítása tarol=true; console.log(el.tagName); console.log(el.type); console.log(el.name); console.log(el.value); console.log(el.checked); if(el.type=="checkbox"){ value=el.checked; }else if(el.type=="radio"){ if(el.checked==true){ value=el.value; tarol=true; }else{ tarol=false; } }else{ value=el.value.addslashes(); } if(tarol==true){ param=param+'"'+el.name+'":"'+value+'",'; } }); //var formData =param; var formData = new FormData(); formData.append('xlsx', files[0]); formData.append('html', param); console.log(formData); var request =$.ajax({ type: 'post', url: "http://localhost/upload_server.php", //dataType: "html", enctype: 'multipart/form-data', processData: false, contentType: false, cache: false, data: formData }); alert("AJAx"); request.done(function(html_string){ console.log(html_string); alert("UPLOADED"); //window.location.reload(); }); request.fail(function(errMsg) { console.log(errMsg); alert("ERROR"); }); alert("vege"); } </script>
    Mutasd a teljes hozzászólást!
  • Egy kicsit tulgondoltrad:

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>xls_upload</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=""> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <form id="form" enctype="multipart/form-data"> <input id="parameter1" class="param" title="text" type="text" name="parameter1" size="10" value="" data-select2-id="5"> <input id="parameter2" class="param" title="text" type="text" name="id" size="5" value=""> <input type="file" name="file" id="fileInput" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"> <input type="submit" class="button" value="SEND" name="group"> </form> <script> $("#form").on("submit", function (event) { event.preventDefault(); // alert($("#file").length); var file = $("#fileInput").get(0).files[0]; var parameter1 = $("#parameter1").val(); var parameter2 = $("#parameter2").val(); var formData = new FormData(); formData.append("xls", file); formData.append("parameter1", parameter1); formData.append("parameter2", parameter2); $.ajax({ type: "post", url: "http://localhost:8080/upload_server.php", enctype: 'multipart/form-data', processData: false, contentType: false, cache: false, data: formData, success: function (response) { alert(response); } }) }); </script> </body> </html>

    upload_server.php:

    <?php echo $_POST['parameter1']; echo "<br>"; echo $_POST['parameter2']; echo "<br>"; echo "<br>"; echo "<pre>"; echo var_dump($_FILES['xls']); echo "</pre>"; ?>
    Mutasd a teljes hozzászólást!
  • Egy kicsit tulgondoltrad:

    Szoktam , de most nem véletlen a json generálás. Ez egy nagyobb Codeigniter program része, sok minden megy még a jsonbe több forrásból. Azért van külön függvényben (valahol itt lehet a hiba a láthatósággal) egy egységes kommunikáció reményében .
    Alapjában backendel foglalkozom, ezt csak most épp meg kellene csinálnom.
    Mutasd a teljes hozzászólást!
  • Az alltalam csatolt/keszitett kod, miert nem jo?
    backenden meg csinalsz belole jsont ha annyira az kell.
    Mutasd a teljes hozzászólást!
  • Jó az, csak nem akarom nagyon széttúrni a jelenlegi progit.
    Mindenképp jó lenne a függvényen keresztül kommunikálni, meg tudni, hogy mit rontok el.
    Még nem tudom, melyik ujjamat harapjam.
    Csináltam hasonló kódot, de $("#form")-ra meg nem került rá a vezérlés (ott is elrontottam valamit).
    A form sem egy stabil dolog, hanem egy jsonból generálom. 1000 helyen el tudom rontani azt is.
    Mutasd a teljes hozzászólást!
  • Végül csak sikerült megcsinálni az én verziómat is.
    Sokat segített, hogy adtál egy működő mintát.

    Köszönöm: EGY
    Mutasd a teljes hozzászólást!
  • welcome
    Mutasd a teljes hozzászólást!
abcd