Question

我希望当用户在服务器端单击<a>，打开文件对话框，然后在完成后，向用户返回“ok”消息。我想到了这个观点：

<a onclick="uploadFile()">Edit</a>

Javascript：

function uploadFile() {

            //Call the controller, open file dialog at server side, and 
            //return message to the user.
            //alert(responseMessage)

        }

方法：

Function OpenFileDialog() As ActionResult

            //open file dialog, upload the file
            //Dim message = success or not

            Return Content(message)
        End Function

我如何在服务器端的vb.net中打开文件上传对话框？

Answer 1

无法随心所欲地弹出文件对话框。这只会在单击文件输入时发生。也就是说，您可以在链接上捕获click事件，然后使用JavaScript单击文件输入。然后，您只需要处理文件输入上的更改事件（即用户选择了一个或多个文件）以使用包含的文件激发您的AJAX请求。但是，通过AJAX上传文件需要File API，它是HTML5的一部分。这意味着这只适用于现代浏览器（IE10 +）。要在以前版本的IE中上传文件而没有刷新页面的传统表单帖子，您必须使用为异步上载文件而创建的Flash或Java控件。但这超出了这个答案的范围。

＆＃13;

document.getElementById('FileUploadLink').addEventListener('click', function (e) {
    e.preventDefault();
    document.getElementById('FileUploadInput').click();
});

document.getElementById('FileUploadInput').addEventListener('change', function () {
    var fileInput = this;
    var formData = new FormData();
    for (var i = 0; i < fileInput.files.length; i++) {
        var file = fileInput.files[i];
        formData.append('upload', file, file.name);
    }
  
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload/handler', true);
    xhr.onload = function () {
        if (xhr.status === 200) {
            // file(s) uploaded successfully
        } else {
            // error uploading file(s)
        }
    };
  
    // Commented to not send a real AJAX request for this example
    // Uncomment in your real code to actually send the request
    // xhr.send(formData);
});

＆＃13;

<a id="FileUploadLink" href="#">Upload File</a>
<input type="file" id="FileUploadInput" style="display:none">

＆＃13;

然后，在服务器端，您的MVC操作将如下所示：

public ActionResult UploadFile(HttpPostedFileBase upload)

请注意，action param的名称与传递给formData.append的字符串对齐。这很重要。

要进行多文件上传，您只需要更改一些内容：

将multiple添加到文件输入：

<input type="file" id="FileUploadInput" style="display:none" multiple>

更改formData.append行以使名称成为数组：
```
formData.append('uploads[]', file, file.name);
```

更改操作方法签名以接受List<HttpPostedFileBase>：

public ActionResult UploadFiles(List<HttpPostedFileBase> uploads)

MVC - 单击打开文件上载对话框（vb.net）

1 个答案: