Read the uploaded json fileRSS

• • Reply
  slkim

  Member

  22 Points

  143 Posts

  Read the uploaded json file

  Jan 17, 2019 06:50 PM|slkim|LINK

  <div class="dropify-wrapper">
                              <div class="dropify-message">
                                  <span class="file-icon"></span>
                                  <p>
                                      <font style="vertical-align: inherit;">
                                          <font style="vertical-align: inherit;">
                                              여기로 파일을 드래그 앤 드롭하거나 클릭하십시오.
                                          </font>
                                      </font>
                                  </p>
                                  <p class="dropify-error">Ooops, something wrong appended.</p>
                              </div>
                              <div class="dropify-loader"></div>
                              <div class="dropify-errors-container"><ul></ul></div>
                              <input type="file" id="input-file-now" class="dropify">
                              <button type="button" class="dropify-clear">Remove</button>
                              <div class="dropify-preview">
                                  <span class="dropify-render"></span>
                                  <div class="dropify-infos">
                                      <div class="dropify-infos-inner">
                                          <p class="dropify-filename"><span class="file-icon"></span><span class="dropify-filename-inner"></span></p>
                                          <p class="dropify-infos-message">Drag and drop or click to replace</p>
                                      </div>
                                  </div>
                              </div>
                          </div>

  I want to upload the json file stored in my computer and read the data value of the uploaded json file.

• • Reply
  l.laxmikant

  Contributor

  3480 Points

  865 Posts

  Re: Read the uploaded json file

  Jan 17, 2019 08:36 PM|l.laxmikant|LINK

  Try below code

  $(document).ready(function() {
    $("#retrieve-resources").click(function() {
      var displayResources = $("#display-resources");
      
      
  
      $.ajax({
        type: "GET",
        url: "resources.json", // location of your json file.
        success: function(result) {
          console.log(result);
          var output =
            "<table><thead><tr><th>Name</th><th>Provider</th><th>URL</th></thead><tbody>";
          for (var i in result) {
            output +=
              "<tr><td>" +
              result[i].name +
              "</td><td>" +
              result[i].provider +
              "</td><td>" +
              result[i].url +
              "</td></tr>";
          }
          output += "</tbody></table>";
  
          displayResources.html(output);
          $("table").addClass("table");
        }
      });
    });
  });
  

  dotnetmentors
  
• • Reply
  Yuki Tao

  Contributor

  2170 Points

  932 Posts

  Re: Read the uploaded json file

  Jan 18, 2019 09:13 AM|Yuki Tao|LINK

  Hi slkim,

  slkim

  I want to upload the json file stored in my computer and read the data value of the uploaded json file.

  1.read the data value of the uploaded json file,you could refer to this demo:

  https://jsfiddle.net/Ln37kqc0/

  Javascript:

  document.getElementById('import').onclick = function() {
      var files = document.getElementById('selectFiles').files;
    console.log(files);
    if (files.length <= 0) {
      return false;
    }
  
    var fr = new FileReader();
  
    fr.onload = function(e) { 
    console.log(e);
      var result = JSON.parse(e.target.result);
      var formatted = JSON.stringify(result, null, 2);
          document.getElementById('result').value = formatted;
    }
  
    fr.readAsText(files.item(0));
  };

  View:

  <input type="file" id="selectFiles" value="Import" /><br />
  <button id="import">Import</button>
  <textarea id="result"></textarea>

  2.And then based on 1,you could add action code in back end to save file which has been uuploaded:

  @using (Html.BeginForm("UploadOutSubmit", "Home", FormMethod.Post))
  {
  
  
    <input type="file" id="selectFiles" value="Import" /><br /> 
    <button id="import">Import</button>
  
    <input type="submit" id="doSubmit" value="import" />
  }

  Controller:

   public ActionResult UploadOutSubmit(HttpPostedFileBase file2)
          {
              
  
              if (file2 != null && file2.ContentLength > 0)
              {
  
                  var fileName = Path.GetFileName(file2.FileName);
  
                  var path = Path.Combine(Server.MapPath("/images/"), fileName);
  
                  file2.SaveAs(path);//save file to path /images/
  
                 //if you would like to save file to database,you should add in model
                  Model model= new Model();
                  model.xxx="xx";
                  model.fileName="~/images/" + fileName;
                  ...
                  db.Tables.Add(model);
                  db.SaveChanges();
              }
             
              return View();
          }

  In addition,the other way to read json file in controller,you could refer to this link:

  https://forums.asp.net/p/2147069/6230491.aspx?Re+Saving+data+to+the+json+file

  Best Regards.

  Yuki Tao

  Please remember to "Mark as Answer" if suggestion helps.