c# - 使用HTML5 FileReader、c#、jquery上传文件

Question

我正在尝试将文件上传到 C# 中的通用 HttpHandler。我使用拖放事件获取文件:

 $s("#dropArea")
    .on("drop", function(e) {
        e.preventDefault && e.preventDefault();

        var file = e.originalEvent.dataTransfer.files[0];

        var reader = new FileReader();

    reader.onload = function(evt) {
        $s.ajax({
            url: MY_SERVER_URL,
            type: "POST",
            data: reader.result,
            headers: {
                "x-file-name": file.name
            }                
        });
    };
    reader.readAsDataURL(file);

这似乎工作正常，但是当发布到 ashx 页面时，我尝试像这样解码图像:

var form = context.Request.Form[0];
var attachment = form.Split(new[] {","}, StringSplitOptions.RemoveEmptyEntries)[1];

byte[] data = Convert.FromBase64String(attachment);

当我尝试将byte[]数据写入磁盘时，生成的文件不正确。我哪里出错了？

编辑:我也尝试过使用 FormData，但 Request.Form 和 Request.Files 集合始终为空，我必须手动解析边界。这是我用来执行此操作的代码:

var formData = new FormData();
    formData.append(file.name, file);

    $s.ajax({
        url: MY_SERVER_URL,
        type: "POST",
        data: formData,
        processData: false,
        contentType: 'multipart/form-data',
        mimeType: 'multipart/form-data',
        headers: {
            "x-file-name": file.name            
    });

Answer 1

当使用 jQuery 的 $.ajax 发送文件时，必须将 processData 和 contentType 选项设置为 false .

将processData 设置为 false 可确保 jQuery 不会以任何方式处理 formData 对象。

将 contentType 设置为 false 可确保 jQuery 不会添加边界，这是它通常会做的事情。也就是说，jQuery 添加了 contentType、 和 边界，因此它看起来像:

Content-Type=multipart/form-data; boundary=----------------993434535254

我们不希望 jQuery 设置特定的边界，因为这样服务器端就无法理解发生了什么，所以为了避免它，contentType 必须发送文件时设置为 false。

var formData = new FormData();

    formData.append(file.name, file);

$s.ajax({
    url: MY_SERVER_URL,
    type: "POST",
    data: formData,
    processData: false,
    contentType: false,
});

这实际上是使用 jQuery 发送文件所需的所有选项