locked
Read the uploaded json file RRS feed

  • Question

  • User-1404740798 posted
    <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.

    Thursday, January 17, 2019 6:50 PM

All replies

  • User503812343 posted

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

    Thursday, January 17, 2019 8:36 PM
  • User1520731567 posted

    Hi 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

    Friday, January 18, 2019 9:13 AM