Read the uploaded json file RSS

• • Reply
  slkim

  Member

  23 Points

  157 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

  3540 Points

  905 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");
        }
      });
    });
  });
  

  Follow GeeksArray at
  
• • Reply
  Yuki Tao

  Contributor

  3710 Points

  1431 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

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.