上传文件并将其内容添加到网页上的表格中

时间:2012-05-12 13:45:20

标签: jquery ajax asp.net-mvc file-upload

我需要在网页上创建一个组件来导入excel文件,以便它包含的数据可以插入到表中。这需要我将文件发送到服务器,提取数据并将数据发回以插入表中。我在服务器端使用ASP.NET MVC3。

我在不使用Ajax的情况下完成了文件上传工作,并使用OleDB连接执行数据提取以访问文件。问题围绕发送数据以插入表中。我原以为我可以使用Ajax.BeginForm()帮助器方法来上传文件,但这显然不适用于文件上传(任何人都能告诉我为什么?)。所以我需要找到一种使用Ajax将数据发送回客户端的方法。谷歌搜索我找到了许多启用ajax文件上传器的工具。我看过的那个是:

http://valums.com/ajax-upload/

这可以通过在上传文件时返回json成功消息来实现。这不适合我正在尝试做的事情,因为我不想将文件存储在服务器上,而是想要将数据传回。我只是学习JavaScript和JQuery,所以我想知道我可以只返回json格式的数据,并在客户端创建一个处理程序将其添加到表中吗?我很欣赏任何代码片段或如何实现这一点的方向。

或者,如果有更好的方法来做到这一点,我很乐意改变我的方法。

2 个答案:

答案 0 :(得分:1)

我不熟悉你提到的ajax上传工具包。但是你的问题并没有真正解释你被困的地方,而是你想要实现的目标。您可以上传到服务器,但是您能够返回正确的JSON吗?

一旦你开始使用该部分,看起来该工具包允许你设置OnComplete函数:

onComplete: function(id, fileName, responseJSON){},

这将允许您按照responseJSON并按照您认为合适的方式填充表格。例如(尽管不是最好的):

onComplete: function(id, fileName, responseJson){
    $(responseJson).each(function(){    
        $('#yourTable').append('<tr><td>' + this + </td></tr>')
    });
}

这是关于这个主题的另一个很好的链接:http://aspzone.com/tech/jquery-file-upload-in-asp-net-mvc-without-using-flash/

这里有一个hanselman链接,你可能正在寻找更多细节:http://www.hanselman.com/blog/ABackToBasicsCaseStudyImplementingHTTPFileUploadWithASPNETMVCIncludingTestsAndMocks.aspx

答案 1 :(得分:1)

试试这个:

  1. 将文件上传到服务器中的某个自定义临时文件夹,为其提供随机文件名

  2. 上传完成后,使用ASP创建一个表(在指定的页面本身。我的意思是使用从文件中收集的数据修改主页)

  3. 创建表格后,删除文件并完成剩下的工作