Question

我想要实现的是将文件附加到我从拖拽和放大器获得的帖子请求中。用javascript删除字段。问题是，我不想读取所有输入字段并通过ajax调用发布数据，我想使用@HTML.BeginForm中的默认提交方法。当我这样做时，multipart并不真正包含该文件。

（注意：当我提交文件或手动读取所有输入字段并使用单独的ajax提交时，它可以正常工作。）

我的代码：拖放js：

var file;
var isDragged = false;
var formData;
function dropHandler(ev) {
    isDragged = true;
    ev.preventDefault();
    // Use DataTransfer interface to access the file(s)
    for (var i = 0; i < ev.dataTransfer.files.length; i++) {
        file = ev.dataTransfer.files[i];

        formData = new FormData($("#form"));
        formData.append("File.PayLoad", file);
        formData.append("File.FileMetadataId", $('#File_FileMetadataId').val())
        formData.append("File.FileObjectId", $('#File_FileObjectId').val())      
   }
}

HTML：

  @using (Html.BeginForm("Edit", "DocumentTemplates", FormMethod.Post, new { role = "form", enctype = "multipart/form-data", id = "form" }))
    {
     @Html.AntiForgeryToken()
     <div class="row">
         <div class="col-xs-4">
             @Html.LabelFor(model => model.Language)
         </div>
         <div class="col-xs-8">
             @Html.HiddenFor(model => model.Language) @Html.DisplayFor(model => model.Language)
         </div>
     </div>
     <div class="row">
         <div class="col-xs-8">
             @Html.TextBoxFor(model => model.File.Payload, new { type = "file", @id = "browseFile", ondrop = "dropHandler(event);", ondragover = "dragOverHandler(event);" }) 
             @Html.ValidationMessageFor(model => model.File.Payload, null, new { @class = "text-danger" }) or Drag & Drop a File.
         </div>
     </div>
    }

在Fiddler中请求空文件名：

-----------------------------7e27b381715d4
Content-Disposition: form-data; name="File.FileMetadataId"

44
-----------------------------7e27b381715d4
Content-Disposition: form-data; name="File.FileObjectId"

44
-----------------------------7e27b381715d4
Content-Disposition: form-data; name="File.Payload"; filename=""
Content-Type: application/octet-stream


-----------------------------7e27b381715d4--

更新：我发现，您可以从文件输入中覆盖文件，但只能在Chrome中覆盖。因为我需要它在IE 11上工作，这对我没有帮助，但也许它可以帮助别人。您不需要附加所有表单字段，只需将输入类型文件设置为已删除的文件并提交...

Answer 1

你有几个问题。其中一个问题是下面的代码。您在代码中遗漏了一个TextField。

如果你把它放在下面，那么最后一个值只存储在new TextField( decoration: const InputDecoration( contentPadding: const EdgeInsets.symmetric(vertical: 40.0), ) )中是不正确的。

如果你把它放在下面，那么最后一个值只存储在file中是不正确的。

for (var i = 0; i < ev.dataTransfer.files.length; i++) {
        file = ev.dataTransfer.files[i];
} // missing }

第二个问题是formData。正如您在File drag and drop中看到的那样，最好检查function dropHandler(ev) { isDragged = true; ev.preventDefault(); // Use DataTransfer interface to access the file(s) for (var i = 0; i < ev.dataTransfer.files.length; i++) { file = ev.dataTransfer.files[i]; formData = new FormData($("#form")); formData.append("File.PayLoad", file); formData.append("File.FileMetadataId", $('#File_FileMetadataId').val()); formData.append("File.FileObjectId", $('#File_FileObjectId').val()); } } // missing }，有时它会包含您的文件，ev.dataTransfer.files为空。

最后，你可以这样做：

ev.dataTransfer.items

使用formdata追加@ HTML.BeginForm而不调用ajax

1 个答案: