我如何发送一个文件来接收一个值(对于8-9有效)？

Question

大家好，我有一个技术问题，我希望你能帮助我，因为我已经投入了很多时间。

我有一个文件列表，其中包含一些描述作为文档类型和表中的描述，第一列用于ID，其中0是一个新文件，另一列用于

您需要做的表单是：-1您可以在客户端添加新文件，直到单击" save“按钮才能保存。(服务器上不存在记录)。-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_“+索引+ "__Version_FileUpload"，"name"："Files”+ index + ".Version.FileUpload“}).appendTo(".attach:last")；

您看，我使用ID和名称以及名称和索引来匹配MVC。我这样做是为了发送用于模型的属性和文件。因此，您可以上传多个文件来创建一个新的或更新。

解决方案不适用于Internet

事件将文件上载到服务器，并使用AJAX和FormData对象接收ID。功能在Chrome中工作，但在Internet中不起作用，共享这个解决方案，以防有人需要它，

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);
    }
}

研究

通过表单发送文件，这只用于发送文件，而不用于答复(IDs) =(

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
}

我得到的错误是：

Uncaught :无法从‘HTMLInputElement’读取'selectionDirection‘属性:输入元素的类型('file')不支持选择。

我不确定这是出于安全考虑

我如何发送一个文件来接收一个值(对internet有效)？(为了能够点3)

Answer 1

实现已经解决了这个问题，解决方案是：-add一个附加的表单到主体：+ ActionResult指向我的控制器+ action +目标属性指向我的iframe +将这个文件输入类型=“-make”添加到-make中-在控制器+ action ActionResult返回(将在iframe中加载)和救援文件与Request.Files -在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();
            }
        });
    });
});

Answer 2

作为一个建议，当JSON调用需要在所有浏览器和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
    }
});

如果找不到更合适的东西，也许值得一看。

注意:我想补充的是，我还没有在投递文件中尝试过。