使用Ajax调用上传文件到虚拟目录

本文关键字：虚拟 文件 Ajax 调用 使用 | 更新日期: 2023-09-27 18:03:15

我正在构建一个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);
                })
}

使用Ajax调用上传文件到虚拟目录

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

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

下面是一个如何使用HTML 5文件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();
}

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

相关文章：