MVC - 单击时打开文件上传对话框 (vb.net)

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

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

 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); });

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

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

public ActionResult UploadFile(HttpPostedFileBase upload)

请注意，动作参数的名称与传递给formData.append的字符串formData.append 。 这很重要。

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

1. 将multiple添加到文件输入：

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

2. 更改formData.append行以使名称成为数组：

    formData.append('uploads[]', file, file.name);

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

    public ActionResult UploadFiles(List<HttpPostedFileBase> uploads)