如何发送文件以接收返回值（适用于 Internet Explorer 8-9）？
Posted
技术标签:
【中文标题】如何发送文件以接收返回值（适用于 Internet Explorer 8-9）？【英文标题】：How I can send a file to receive a value back (that works for internet explorer 8-9)? 【发布时间】：2014-11-17 21:59:17 【问题描述】：各位同事，我遇到了技术问题，希望您能帮助我，因为我已经投入了很多时间。
我有一个文件列表，其中包含一些描述作为文档类型和表中的描述，第一列用于 ID，其中 0 是一个新文件，我还有另一列用于
你需要做的表格是： -1 您可以在客户端添加新文件，直到单击“保存”按钮才保存。 （服务器上不存在记录）。 -2 更新文件（在服务器上存在的记录中上传新文件） -3 要通过客户端上传下一个文件，会生成“上传”按钮，要点击它必须上传文件，并且必须收到服务器端返回的 ID 才能更新列，然后您点击保存服务器检测到该文件已经在服务器上。这是因为业务规则。
查看
<p class="options">
<a id="attach_file">Attach File</a>
</p>
<table id="files" class="grid">
<tr>
<th class="id">ID</th>
<th class="name">File</th>
<th class="kindName">Find Of file</th>
<th class="observations">Observations</th>
<th class="attach">File (input)</th>
<th class="options">options</th>
</tr>
@for (var i = 0; i < Model.Files.Count; i++)
<tr>
<td class="id">@html.TextBoxFor(x => Model.Files[i].FileID)</td>
<td class="name">@Html.TextBoxFor(x => Model.Files[i].Name)</td>
<td class="kindName">@Html.TextBoxFor(x => Model.Files[i].KindOfFile.Name)</td>
<td class="observations">@Html.TextBoxFor(x => Model.Files[i].Version.Observations)</td>
<td class="attach">this options is only for client side when upload a new file</td>
<td class="options">
<a class="file_upload">Upload</a>
<a class="file_delete">Delete</a>
</td>
</tr>
</table>
当用户单击“附加文件”按钮以添加以下带有必要数据的 javascript 代码 tr 时，可以选择“上传”该上传文件（在服务器上）
JavaScript
function GetTR(index, _ID, _FileName, _KindOfFile, _Observations)
var tr = "<tr>";
tr += '<td class="id"><input data-val="true" data-val-number="The field FileID must be a number." data-val-required="The FileID field is required." id="Files_' + index + '__FileID" name="Files[' + index + '].FileID" type="text" value="' + _ID + '" readonly></td>';
tr += '<td class="name"><input data-val="true" data-val-length="La longitud Máxima es de 250" data-val-length-max="50" data-val-required="El Nombre es requerido" id="Files_' + index + '__Name" name="Files[' + index + '].Name" type="text" value="' + _FileName + '" readonly></td>';
tr += '<td class="kindName"><input data-val="true" data-val-length="La longitud Máxima es de 100" data-val-length-max="50" data-val-required="El Nombre es requerido" id="Files_' + index + '__KindOfFile_Name" name="Files[' + index + '].KindOfFile.Name" type="text" value="' + _KindOfFile + '" readonly></td>';
tr += '<td class="observations"><input id="Files_' + index + '__Version_Observations" name="Files[' + index + '].Version.Observations" type="text" value="' + _Observations + '" aria-invalid="false" class="valid" readonly></td>';
tr += "<td class='attach'></td>";
tr += '<td class="options">'
+ '<a class="file_upload" style="background-color:#FF9D4B;">Upload</a>'
+ '<a class="file_delete">Delete</a>'
+ '</td>';
tr += "</tr>";
return tr;
通过 JQuery 将选中的文件添加到模态 div 中并添加某一列
$(fileInput).attr( "id": "Files_" + index + "__Version_FileUpload", “名称”：“文件[”+索引+“].Version.FileUpload” ).appendTo(".attach:last");
你看，我使用带有命名法和索引的 ID 和名称来匹配 MVC。我这样做是为了发送模型占用的属性和文件。因此您可以上传多个文件以创建新文件或更新。
解决方案在 Internet Explorer 中不起作用
将文件上传到服务器并使用 AJAX 和 FormData 对象接收 ID 的事件。函数在 Chrome 中有效，但在 Internet Explorer 中无效 分享此解决方案以备不时之需
var fileViewModel = GetFileViewModel($(this).closest("tr"));
var formdata = new FormData(); //FormData object
var fileInput = $(this).closest("tr").find("td.attach > input:first")[0];
// si son varios archivos iterar
if (fileInput.files != null)
for (i = 0; i < fileInput.files.length; i++)
formdata.append(fileInput.files[i].name, fileInput.files[i]); // attach file
formdata.append("ViewModel", JSON.stringify(fileViewModel)); // attach object
var ctrl = $(this).closest("tr");
$.ajax(
url: '/ProvisionOfService/Upload',
data: formdata,
processData: false,
contentType: false,
type: 'POST',
success: function (data)
$(ctrl).find("td.options > a.file_upload").remove();
// actualizar ID
if (data != null && data.length > 0)
$(ctrl).find("td.id > input").val(data[0]);
$("#Loading").hide();
,
error: function (xhr, status)
console.log(xhr, status);
alert("error");
$("#Loading").hide();
);
C# 控制器和动作
[HttpPost]
public JsonResult Upload()
string msg = null;
List<int> FileIDs = new List<int>();
try
if (Request.Files.Count > 0)
// get Object from the client
string JsonObject = Request.Form["ViewModel"];
FileViewModel _file = Newtonsoft.Json.JsonConvert.DeserializeObject<FileViewModel>(JsonObject);
// Save file and object
string Path = "/Content/files/" + _file.Transaction.TransactionID + "/";
string FullPath = Server.MapPath(Path);
if (!System.IO.Directory.Exists(FullPath))
System.IO.Directory.CreateDirectory(FullPath);
_file.Version.FileUpload.SaveAs(FullPath + _file.Version.Name);
_file.Version.Path = Path;
_file.Versions.Add(_file.Version);
// Save record and get IDs
List<FileViewModel> files = new List<FileViewModel>();
files.Add(_file);
FileIDs = _FileService.AddFiles(files);
catch (Exception ex)
msg = ex.InnerException == null ? ex.Message : ex.InnerException.Message;
if (string.IsNullOrEmpty(msg) && FileIDs.Count > 0)
return Json(FileIDs);
else
return Json(msg);
研究
通过表单发送文件，这仅适用于发送文件，但不适用于回复（ID）=（
if (document.getElementById('upload_form') == null)
$('body').append('<form id="upload_form" name="upload_form" action="/ProvisionOfService/Upload" method="POST" enctype="multipart/form-data" >');
var $upload_form = $('#upload_form');
var fileInput = $(this).closest("tr").find("td.attach > input:first")[0];
$(fileInput).appendTo($upload_form);
upload_form.submit();
通过 Ajax 思想并发送文件服务器（驱动程序）思想接收 HttpPostedFileBase 类型的对象 但我遇到了一个错误
Ajax
var fileInput = $(this).closest("tr").find("td.attach > input:first")[0];
$.ajax(
type: "POST",
url: '/ProvisionOfService/Upload',
data: file: fileInput ,
success: function (data)
// update ID
if (data != null && data.length > 0)
$(ctrl).find("td.id > input").val(data[0]);
$("#Loading").hide();
,
error: function (xhr, status)
console.log(xhr, status);
alert("error");
$("#Loading").hide();
);
C# 控制器
[HttpPost]
public JsonResult Upload(HttpPostedFileBase file)
// code
我得到的错误是：
未捕获的 InvalidStateError：无法读取“selectionDirection” 'HTMLInputElement' 的属性：输入元素的类型（'file'） 不支持选择。
出于安全原因，我不确定这是否有效
如何发送文件以接收返回值（适用于 Internet Explorer）？ （能够指出第 3 点）
【问题讨论】：
嗯，首先，如果没有来自 HTML5 的 File API，您将无法通过 AJAX 提交文件。这意味着您只能使用现代浏览器这样做，对于 IE，这意味着 10+。如果你需要支持 IE6-9 范围内的任何东西，那你就倒霉了。 运气不好，需要IE8-9才能工作，谢谢回复 有一些 File API polyfill 尝试在不支持它的浏览器中模拟功能。 github.com/Modernizr/Modernizr/wiki/… 它将允许您模拟文件 API 的功能，但不能通过 AJAX 发送实际文件数据。如果您必须支持 IE8-9，那么您要么需要进行常规表单发布，要么使用支持自动上传到后端端点的 Flash 或 Java 上传控件。那时，通信是通过插件而不是 JavaScript 进行的。 @Ben-Robinson 我在看你关于使用 polyfills 的建议，而 Moxie 有对象 FormData 下载 moxie.js (github.com/moxiecode/moxie#compile-js)，我在 IE9 中包含了参考并且仍然错误地标记了对象，在那里阅读文档说它必须被编译，然后有 flash 和 silverlight 的代码。 ..我错过了什么吗？ 【参考方案1】：作为一个建议，当 JSON ajax 调用需要在所有浏览器和 IE8 中工作时，我遇到了类似的问题。我不熟悉这一切是如何工作的，但我们最终得到的解决方案是使用 JQuery。通过一点温和的哄骗，它已经满足了我们所有的浏览器要求，类似于以下内容......
jQuery.ajax(
url: http://myAjaxTestURL,
dataType: 'text',
cache: false,
success: function(data)
var returnData = jQuery.parseJSON(data);
if(returnData.length>0)
for(var i=0;i<returnData.length;i++)
var myHappyObject = returnData[i];
//do something with my returned object
else
//do something else
,
error: function(request, status, error)
//error processing
);
如果找不到更合适的，可能值得一看。
注意：只是补充一下，我还没有尝试过发布文件。
【讨论】：
【参考方案2】：Achieves 已经解决了这个问题，解决方法是： - 在正文中添加一个额外的表格： + 指向我的控制器的动作属性 + 动作 + 我的 iframe 的目标属性 + 添加此文件输入类型 = "file" 以形成 - 制作一份 - 在控制器+动作 ActionResult 返回（将在 iframe 中加载）并使用 Request.Files [0] 救援文件 - 在 iframe 事件中模拟成功和错误事件来挽救值
$(document).on("click", ".Archivo_Upload", function ()
// inyectamos el iframe para obtener el resultado
// el form al que se le dara sumbit contendra el archivo y el input hidden para parametros adicionales
if (document.getElementById('upload_form') == null)
$('body').append('<iframe id="upload_frame" name="upload_frame"></iframe>'
+ '<form id="upload_form" name="upload_form" action="/ProvisionOfService/Upload" method="POST" enctype="multipart/form-data" target="upload_frame" >'
+ '<input id="fileViewModel" type="hidden" name="ViewModel" value="" />'
+ '</form>');
// obtenemos el form
var $upload_form = $('#upload_form');
// obtenemos el archivo que se adjunto
var fileInput = $(this).closest("tr").find("td.attach > input:first")[0];
$(fileInput).appendTo($upload_form); // lo adjuntamos al form que se dara submit
var fileViewModel = GetFileViewModel($(this).closest("tr")); // obtener objeto fileViewModel
$('#fileViewModel').val(JSON.stringify(fileViewModel)); // agregar valor en el input
$upload_form.submit(); // enviar form
var ctrl = $(this).closest("tr"); // obtener el control tr para que este dispnible en el load del frame
// evento load del frame simula el success y el error event
$("#upload_frame").load(function ()
var result = $("#upload_frame").contents().find("body").text();
try
var ID = parseInt(result);
$(ctrl).find("td.id > input").val(ID);
$(ctrl).find("td.options > a.Archivo_Upload").remove();
$("#Loading").hide();
catch(ex)
// si esta vacio el result
if (result == "")
result = ex.message;
// mostrar error
$("#msgFiles").text(result).addClass("error").show();
finally
// limpiar iframe y form
$('#upload_frame').remove();
$('#upload_form').remove();
);
);
);
【讨论】：
以上是关于如何发送文件以接收返回值（适用于 Internet Explorer 8-9）？的主要内容，如果未能解决你的问题，请参考以下文章