如何发送文件以接收返回值(适用于InternetExplorer8-9)
本文关键字：适用于 InternetExplorer8-9 返回值 何发送 文件 | 更新日期: 2023-09-27 18:24:01
同事们，您好，我遇到了一个技术问题，我希望你能帮助我，因为我投入了很多时间。
我有一个文件列表，其中有一些描述作为表中的文档类型和描述，第一列用于ID，其中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"，"name"："Files["+index+"].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）
作为一个建议，当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
}
});
如果你找不到更合适的，也许值得一看。
注意：只是补充一下，我还没有在发布文件中尝试过。
已经解决了这个问题，解决方案是：-在正文中添加一个附加表单：+指向我的控制器的action属性+action+我的iframe的目标属性+将此文件输入type="file"添加到表单-做一个sumbit-在控制器+动作中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();
}
});
});
});