Question

我在MVC视图中具有以下ImageUpload文本框字段。

for (int i = 0; i < Model.Count; i++)
{
    @Html.TextBox("file", new { type = "file", @class = "form-control" })
}

现在，当用户选择图像时，我想再增加一列以显示图像的路径。

我尝试了以下代码，但不起作用

<script type="text/javascript">

$(function ()
 {
 $("#file").on("input", function ()
  { // trigger when you input to textbox
        if ($(this).val().length > 0)
            {
              <td>
                 @{
                     @Html.DisplayFor(m => imagePath)
                  }
              </td>
           }
         }
       }
   </script>

Answer 1

这里是经过测试的示例，出于安全原因，浏览器将没有访问文件路径的详细信息，因此在新列中显示了文件的名称，因此您将无法显示路径（至少这是我所知道的）随便附上链接）

<table>
    <tbody>
        @for (int i = 0; i < Model.Count; i++)
        {
            <tr>
                <td>
                    @*Second parameter is the value field for texbox which is missing in oyur code*@
                    @Html.TextBox("file", i, new { @type = "file", @class = "form-control" })
                </td>
            </tr>

        }
    </tbody>
</table>
<script>
    $(".form-control").on("change", function (event) {
        var fileName = event.target.files[0].name;
        $(this).parent().append('<td>' + fileName + '</td');
    });
</script>

引用Sam Axe “ JavaScript在浏览器中运行，您可以通过操作DOM在屏幕上进行更改。 Razor在服务器上运行并执行代码，或将代码转换（通常转换为文本，例如HTML）。“因此，如果您编写Razor代码以显示新列，它将无法工作，因为它是在服务器端呈现的。

TextBox值onchange添加新列

1 个答案: