Javascript 从ViewBag加载文件？

我有一个Razor页面，其中加载了一些数据（不是表单），其中一个“字段”是一个文件

<div class="col-sm-3">
   <label>Upload Construction Map:</label>
   <br />
   <div class="input-group">
      <span class="input-group-btn">
         <span class="btn btn-primary btn-file">
            Browse @Html.TextBoxFor(m => m.ShapeFileModel.ConstructFile, new { id = "fu-construct", type = "file", accept = ".pdf" })
         </span>
      </span>
      @{
         if (fileId != "")
         {
            int theId = int.Parse(fileId);
            CrossCData.DAL.File fileMap = (from f in dbCrossingsCloud.Files
                                           where f.Id == theId
                                           select f).SingleOrDefault();
      <input type="text" id="txtPathConstruct" class="form-control" value="@fileMap.FileName" contenteditable="false" readonly />
         }
         else
         {
      <input type="text" id="txtPathConstruct" class="form-control" value="" contenteditable="false" readonly />
         }
      }
   </div>
</div>

是否可以在Razor中使用IO将文件加载到输入？和一个javascript变量

Razor创建一个文本流，该文本流将被发送到浏览器。文本的内容（通常）应该是html。如果您想包含一个文件，您必须将其写入一个字段（可能是输入类型隐藏），作为二进制文件的base64或文本文件的纯文本。我将避免这种方法，并且不在视图本身中包含文件内容

---

更好的选择是创建一个

MVC

控制器方法或

webapi

方法，该方法可以基于唯一标识符提供文件（您提到的文件Id可能是完美的）。然后，您可以在Razor输出中包含标识符（而不是文件的内容），并在需要时通过JavaScript的AJAX调用检索它。

通常认为通过ViewBag传递数据是不好的做法。我建议使用强类型视图模型和HttpPostedFile类作为字段。我重新阅读了您的问题。您正在尝试从服务器提供文件，还是让用户将文件上载到服务器？如果是晚一点（客户端将文件发送到服务器），我的答案不正确，但我可以用我的建议重写它。用户上载文件，一旦他们在Add.cshtml中提交，我将其保存到服务器，然后从Audit.cshtml文件中，用户希望返回并修复信息，但我需要再次将该文件加载到javascript中的

constructData

。

$("#fu-construct").fileupload({
        url: 'UploadConstructFile',
        dataType: 'json',
        // File was added
        add: function (e, data) {
            var fileExtension = ['pdf'];  // Valid file extensions
            if ($.inArray($("#txtPathConstruct").val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                swal("Error", "Only PDF files are allowed. Please select a file in PDF format.", "error");
                $("#txtPathConstruct").val("No file chosen...");
                constructData = null;
            } else {
                constructData = data;
            }
        },
        // UploadConstructFile is done
        done: function (event, data) {
            fileId = data.result.fileId;
            if (projectCompany == "" || typeof projectCompany == 'undefined') {
                swal("Error", "Please enter a requesting company", "error");
            }
            else if (projectName == "" || typeof projectName == 'undefined') {
                swal("Error", "Please enter a project name.", "error");
            }
            else if (projectType == "" || typeof projectType == 'undefined') {
                swal("Error", "Please select a project type.", "error");
            }
            else {
                post('Audit', 'post', JSON.stringify(myDataTable.rows().data().toArray()), fileId, projectCompany, projectName, projectType, projectFileNumber, projectAFECC);
            }
        },
        fail: function (event, data) {
            alert("Error uploading the file.");
            $("#txtPathShape").val("No file chosen...");
        }
    });

    $("#construct-upload").on('click', function () {
        if (constructData) {
            constructData.submit();
        }
        return false;
    });