Javascript 将网格附加到文件上载程序

Javascript 将网格附加到文件上载程序,javascript,asp.net,Javascript,Asp.net,我试图使一个文件上传器,可以上传多个文件,一旦文件上传,有一个网格得到更新,以及。我已经完成了文件和网格部分的上传。现在,我需要知道如何将我的上传程序连接到我的网格,以便在上传文件时,网格在不刷新页面的情况下得到更新?以下是我的代码的一部分: DataTable dt = getDataTableFromQuery(@"select id,Name from tblFiles2"); html = "<h2> Files List </h2&g

我试图使一个文件上传器,可以上传多个文件,一旦文件上传,有一个网格得到更新,以及。我已经完成了文件和网格部分的上传。现在,我需要知道如何将我的上传程序连接到我的网格,以便在上传文件时,网格在不刷新页面的情况下得到更新?以下是我的代码的一部分:

        DataTable dt = getDataTableFromQuery(@"select id,Name from tblFiles2");
        html = "<h2> Files List  </h2><br/><table border =\"1\" class=\"display unbreakable\" 
        id=\"tblFilesGrid\" style=\"width:100%; border-collapse: collapse\"><thead>";

        #region Header

        html += "<tr><th height='40' class=\"Greyheader\" style=\"width:5%\">S.No</th>";
        html += "<th height='40' class=\"Greyheader\" style=\"width:10%\">File Name</th>";
        html += "<th class=\"Greyheader\" style=\"width:12%\">Action</th>";

        html += "</tr></thead>";

        #endregion

        #region Body

        html += "<tbody>";

        if (dt.Rows.Count > 0)
        {
            foreach (DataRow dr in dt.Rows)
            {

                html += "<tr class=\"GreyBorder\" id='tblFilesGrid_" + dr["Id"].ToString() + "'  
                pkid=\"" + dr["id"].ToString() +  "\"  class=\"DataRow\">";
                html += "<td class=\"GreyBorder\" style=\"text-align:center !important;\">" + Count + 
               "</td>";

                html += "<td class=\"GreyBorder\"><input  id='txtFileName_" + dr["id"].ToString() + 
                "' type=\"textbox\" style=\" text-align: right; width:95;\" value='" + 
                dr["Name"].ToString() + "' class=\"mediumTextField\" /></td>";
                html += "<td class=\"GreyBorder\" align='center'><img id='view' title='view' 
                onclick=showDocument('" + dr["id"] + "');  src='../../Images/folder.gif'> &nbsp&nbsp 
                <img title='remove' onclick='return DeleteRow(this)'  src='../../images/delete.png'> 
                </td>";


                html += "</tr>";
                Count++;

使用像这样的东西

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // files is a FileList of File objects.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                  '</li>');
    }
    document.getElementById('list').innerHTML += '<ul>' + output.join('') + '</ul>'+"<br>";
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>