0

我正在构建一个 CMS 作为 MVC 4 项目，其中一个功能是上传您的照片。用户从他的硬盘驱动器中选择一张照片，这会触发控制器上的 UploadFile 方法的 ajax 请求。这应该将照片复制到服务器上的虚拟文件夹中。问题是我真的不明白浏览器将文件存储在哪里并将其发送到服务器，以及我应该在控制器上做什么。

到目前为止，这是我的代码-

风景：

<input id="cng_pic_btn" type="file" name="file" accept="image/*" /></td>

JavaScript 调用服务器：

$('#cng_pic_btn').live('change', function () {

    custom_url = "/SideBar/UploadFile";
    return_msg = "file uploaded";

    var file_path = $('#cng_pic_btn').attr("value");
    alert(file_path);
    sendInfo = {
        upload_from: file_path
    }

    CreataAjaxRequest(custom_url, sendInfo, return_msg);

})

控制器方法：

    [HttpPost]
    public void UploadFile(string upload_from)
    {
            string path = @"D:\Temp\";

            HttpPostedFileBase photo = Request.Files[upload_from];

            photo.SaveAs(path + photo.FileName);
    }

发送ajax请求：

function CreataAjaxRequest(custom_url, sendInfo, return_msg) {

    $.ajax({ type: "POST", url: custom_url, data: sendInfo })
                .success(function (html) {
                    $(".query-result").replaceWith(html);

                })

}
4

1 回答 1

1

您还没有展示您的CreataAjaxRequest方法，但是如果您想使用 AJAX 上传文件，有几个选项：

  • 您的客户端浏览器支持HTML 5 File API在这种情况下您可以使用 XmlHttpRequest2 对象
  • 您的客户端浏览器不支持文件 API（例如 Internet Explorer），在这种情况下，您可以使用文件上传插件，例如Uploadify或Fine Uploader使用隐藏 iframe 或 Flash 电影等技术用于那些旧版浏览器。

下面是如何使用 HTML 5 File API 上传文件的示例：

function CreataAjaxRequest(custom_url, sendInfo, return_msg) {
    var xhr = new XMLHttpRequest();
    var fd = new FormData();
    xhr.open('POST', custom_url, true);
    var file = document.getElementById('cng_pic_btn').files[0];;
    fd.append('myFile', file);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            $('.query-result').replaceWith(xhr.responseText);
        }
    };
    xhr.send(fd);
}

然后在您的服务器上：

[HttpPost]
public ActionResult UploadFile(HttpPostedFileBase myFile)
{
    var path = string path = @"D:\Temp\";
    myFile.SaveAs(Path.Combine(path, myFile.FileName));

    return PartialView();
}

PartialView 另请注意，如果您想在 AJAX 回调中使用该方法，您的控制器操作需要返回 a $('.query-result').replaceWith(xhr.responseText);，否则您要替换什么？

于 2013-03-10T12:29:09.853 回答