Загрузка файла с загрузкой файла jquery без обновления страницы

Question

Я использую плагин для загрузки файлов jquery для загрузки файлов на свой сервер, но когда сервер возвращает json, как отображать эти данные без обновления страницы. Я знаю, что многие сообщения говорят об использовании iframe мы можем добиться того, что я очень новичок в jquery, и ajax может любой понять это и помочь мне поблагодарить вас заранее.

$('#fileupload').fileupload({ 
    xhrFields: {withCredentials: true}, 
    url: "fileUpload.do?", 
    type:"POST", 
    autoUpload: true, 
    formdata:{name:'FolderId',value:getfolderId()}, 
}); 


function getfolderId(){ 
    var FolderId 
    alert(); 
    $('#fileupload').on("click",function(){ 
     FolderId=document.getElementById('currentFolder').value; 
     document.getElementById('selectedFolder').value = FolderId; 
    }); 
    return FolderId; 
}` 


      </form>`<form id="fileupload" on action="fileUpload.do" method="POST" enctype="multipart/form-data"> 

        <div class="row fileupload-buttonbar"> 
        <label for="form-upload"> 
          <img src="htdocs/images/add_file.png" 
        style="width: 20px; height: 20px; border: 0" > 
         </label> 
          <input id="form-upload" type="file" name="upload" multiple style="opacity: 0; filter:alpha(opacity: 0);"> 
          <im:hidden name="selectedFolder" id="selectedFolder" value="1" /> 
         </div> 
         <div class="col-lg-5 fileupload-progress fade"> 
           <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"> 
           <div class="progress-bar progress-bar-success" style="width:0%;"></div> 
           </div> 
          <div class="progress-extended">&nbsp;</div> 
        </div> 
        </div> 

       <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table> 

      </form>` 

Answer 1

$('#addFile-link').bind("click",function(){ 
     var FolderId 

     FolderId=document.getElementById('currentFolder').value; 
     document.getElementById('selectedFolder').value = FolderId; 

     if(FolderId==" " || FolderId==0){ 
      $('#input').prop('disabled', true); 
      showFileMSg(); 
      //alert("kindly select a folder to upload files"); 

     } 
     else{ 

      $('#input').prop('disabled', false); 
     $('#fileupload').fileupload({ 
     xhrFields: {withCredentials: true}, 
      url: "fileUpload.do?", 
      type:"POST", 
      dataType : "JSON", 
      autoUpload: true, 
      formdata:{name:'FolderId',value:FolderId}, 
      disableImagePreview:true, 
      filesContainer: $('table.files'), 
      uploadTemplateId: null, 
      downloadTemplateId: null, 
      uploadTemplate: function (o) { 
       var rows = $(); 
       $.each(o.files, function (index, file) { 
        var row = $('<tr class="template-upload fade">' + 
         '<td><span class="preview"></span></td>' + 
         '<td><p class="name"></p>' + 
         '<div class="error"></div>' + 
         '</td>' + 
         '<td><p class="size"></p>' + 
         '<div class="progress"></div>' + 
         '</td>' + 
         '<td>' + 
         (!index && !o.options.autoUpload ? 
          '<button class="start" disabled>Start</button>' : '') + 
         (!index ? '<button class="cancel">Cancel</button>' : '') + 
         '</td>' + 
         '</tr>'); 
        row.find('.name').text(file.name); 
        row.find('.size').text(o.formatFileSize(file.size)); 
        if (file.error) { 
         row.find('.error').text(file.error); 
        } 
        rows = rows.add(row); 
       }); 
       return rows; 
      }, 
      downloadTemplate: function (o) { 
       var rows = $(); 
       $.each(o.files, function (index, file) { 
        var row = $('<tr class="template-download fade">' + 
         '<td><span class="preview"></span></td>' + 
         '<td><p class="name"></p>' + 
         (file.error ? '<div class="error"></div>' : '') + 
         '</td>' + 
         '<td><span class="size"></span></td>' + 
         '<td><button class="delete">Delete</button></td>' + 
         '</tr>'); 
        row.find('.size').text(o.formatFileSize(file.size)); 
        if (file.error) { 
         row.find('.name').text(file.name); 
         row.find('.error').text(file.error); 
        } else { 
         row.find('.name').append($('<a></a>').text(file.name)); 
         if (file.thumbnailUrl) { 
          row.find('.preview').append(
           $('<a></a>').append(
            $('<img>').prop('src', file.thumbnailUrl) 
           ) 
          ); 
         } 
         row.find('a') 
          .attr('data-gallery', '') 
          .prop('href', file.url); 
         row.find('button.delete') 
          .attr('data-type', file.delete_type) 
          .attr('data-url', file.delete_url); 
        } 
        rows = rows.add(row); 
       }); 
       return rows; 
      }, 
      always:function (e, data) { 
       $.each(function() { 
        $(this).removeClass('fileupload-processing'); 
       }); 

      }, 
      done: function (e, data) { 
       $('.template-upload').remove(); 
       $.each(data.files, function (index, file) { 
        openFolder(FolderId); 
       }); 

      }, 
      error: function (jqXHR, textStatus, errorThrown) { 
       alert("jqXHR: " + jqXHR.status + "\ntextStatus: " + textStatus + "\nerrorThrown: " + errorThrown); 
      } 



      /*add: function (e, data) { 
      $('body').append('<p class="upl">Uploading...</p>') 
      data.submit(); 
     },*/ 
    }) 

     } 

    });