如何将上传的excel文件从javascript发送到MVC 4中的控制器

时间:2013-07-05 13:23:45

标签: javascript ajax asp.net-mvc json file-upload

我有一个文件上传按钮,可以上传多个文件。我想使用javascript将这些文件存储到文件夹中,并将这些文件详细信息从视图发送到控制器。我正在做mvc 4 razor app。对MVC来说是新手。我知道可以使用json和ajax post方法完成它。但不知道如何使用它。

 <script type="text/javascript">
       var fileNames = [];
       function handleFileUpload(evt) {
                     evt.stopPropagation();
                     evt.preventDefault();
                     var files = document.getElementById('file1').files;
                     for (var i = 0; files[i]; i++) {
                         fileNames.push(files[i]);
                     }
                  }
            $(function () {
                        $("#btnSubmit").click(function () {
                           $.post("@Url.Action("FileDetails")", { filename: JSON.stringify(fileNames) }, "json");
                      });
                 });
</script>

这是我到目前为止所做的。

1 个答案:

答案 0 :(得分:2)

我使用名为Uploadify

的jquery插件

HTML:

<input type="file" id="uploadBtn" />

使用Javascript:

<script type='javascript/text'>
$('#uploadBtn').uploadify({
        'uploader': '/uploadify/uploadify.swf',
        'script': 'URL',
        'cancelImg': '/uploadify/cancel.png',
        'buttonText': 'Upload',
        'auto': true,
        'multi': false,
        'removeCompleted': true,
        'simUploadLimit': 1,
        'scriptData': {  },
        'onAllComplete': function () {
           //finished
        }
    });
</script>

MVC行动:

public void UploadFile(){
 //Get the file
 HttpPostedFileBase upload = this.Request.Files[0];

 //DO STUFF
}

参数“script”的javascript方法中的url只是您操作的url。例如,如果UploadFile操作在控制器文件中,那么url将是这样的:

/文件/ UploadFile

您还可以使用'scriptData'参数传递额外数据,然后按以下方式访问它们

String name = Request["name"];