首页 > 解决方案 > 使用ajax请求上传文件后div标签不刷新

问题描述

我正在尝试在我的 C# MVC 应用程序中上传文件,并希望在使用 ajax meethod 上传后立即显示文件名。它正在绑定文件名,但不会立即显示名称,但是当我刷新页面时,它正在加载文件名。

<div id="refreshFiles">
    <input type="file" name="fileUpload" id="fileUpload" size="23" multiple /><br />
    <button>Upload</button>
    </form>*@
    <input type="file" id="FileUpload1" multiple />
    <input type="button" id="btnUpload" value="Upload Files" onclick="FileUploadd()" />
    <div>
      @if (Session["fileUploader"] != null) 
      {
        <div class="upload">
          <div style="width: 500px;">
            <table id="uloadTable" border="1">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody name="bodyFiles">
                @foreach (var item in (List<UL.RADAR.ViewModel.FileUploadModel>)Session["fileUploader"]) 
                {
                  <tr id="@item.FileName">
                    <td>@item.FileName</td>
                    <td style="text-align: center">
                      <a class="viewc" href="@Url.Action(" OpenFile ", "FileUpload ", new { @fileName = item.FileName })">
                        <img width="16" height="16" border="0" src="~/Images/view.png" class="viewc">
                      </a>
                      <a class="viewc" href="">
                        <img width="16" height="16" border="0" src="~/Images/Delete.png" class="link">
                      </a>
                    </td>
                  </tr>
                }
              </tbody>
            </table>
          </div>
        </div>
      }
    </div>
  @*end*@
</div>
function FileUploadd() {
  if (window.FormData !== undefined) {
    var fileUpload = $("#FileUpload1").get(0);
    var files = fileUpload.files;
    var fileData = new FormData();

    for (var i = 0; i < files.length; i++) {
      fileData.append(files[i].name, files[i]);
    }
    //fileData.append('username', ‘Manas’);

    $.ajax({
      url: '/RequirementManagement/FilesUpload',
      type: "POST",
      contentType: false, // Not to set any content header
      processData: false, // Not to process data
      data: fileData,
      success: function(result) {
        $.get(location.href).then(function(page) {          $("#refreshFiles").html($(page).find("#refreshFiles").html())
        })
      },
      error: function(err) {
        alert(err.statusText);
      }
    });
  } else {
    alert("FormData is not supported.");
  }
};

标签: jqueryhtmlajaxasp.net-mvcfile-upload

解决方案


推荐阅读