Javascript 不允许加载本地资源错误

我想在上传后显示上传的图像，但我不能。我从JS控制台收到一个错误，它说：

不允许加载本地资源错误

这是我的密码：

控制器方法：

获取文件并将其保存到localsystem

[HttpPost]
// public static readonly string TEMPORARY_FILES_UPLOADS_PATH = "~/Uploads/Tmp";     
public ActionResult UploadFileToTemporaryFolder(HttpPostedFileBase file)
            {
                string fileName = String.Empty;
                string path = String.Empty;
                if (file != null)
                {
                    try
                    {
                       string timestamp = DateTime.UtcNow.ToString("yyyy_MM_dd_HH_mm_ss_fff",CultureInfo.InvariantCulture);
                       fileName = timestamp + "_" + Path.GetFileName(file.FileName);
                       path = string.Format("{0}/{1}", Server.MapPath(ApplicationConfig.TEMPORARY_FILES_UPLOADS_PATH), fileName);
                        System.IO.Directory.CreateDirectory(Server.MapPath(ApplicationConfig.TEMPORARY_FILES_UPLOADS_PATH));
                        file.SaveAs(path);
                    }
                    catch (Exception)
                    {}
                }
                return Json(new { FileName = fileName, FilePath=path }, JsonRequestBehavior.AllowGet);
            }

HTML:

<input id="HotelJustificatifFile" type="file" value="joindre pièce" name="upload"  >
<div id="JustificatifsHotelSection" style="display:block;"></div>

Js

<input id="HotelJustificatifFile" type="file" value="joindre pièce" name="upload"  >
<div id="JustificatifsHotelSection" style="display:block;"></div>

上传文件并将结果附加到div

 $('body').on('change', '#HotelJustificatifFile', function () {

               var file = document.getElementById('HotelJustificatifFile').files[0];
               if (file != null) {
                   var myData = new FormData();
                   myData.append("file", file);

                   // Uploading File via Ajax To Temporar Folder
                   $.ajax({
                       type: "POST",
                       url: "<%: Url.Action("UploadFileToTemporaryFolder","Enqueteur") %>",
                       processData: false,
                       contentType: false,
                       data: myData,
                       cache: false,
                       dataType: "json",
                       success: function (result) {
                           if (result.FileName != '') {

                               var fileName = result.FileName;
                               var filePath = result.FilePath;

                               //alert(filePath );
                               var imageDiv = "<div>";
                               imageDiv+='<div style="z-index: 10; position: absolute; top: 4px; left: 10px;">';
                               imageDiv += '<a onclick="afficherImage(' + fileName + ')" >Supprimer</a>';
                               imageDiv +='</div>';
                               imageDiv += '<img u=image src="' +filePath + '" />';
                               imageDiv += '</div>';
                               // Adding Image To the Div 
                               $('#JustificatifsHotelSection').append(imageDiv);

                           }
                           },
                       failure: function () {
                       }
                   });

                   // Else
                }
           });

$（'body'）。关于（'change'，'hoteljustificatifile'，函数（）{
var file=document.getElementById（'HotelRightificationFile'）。文件[0]；
如果（文件！=null）{
var myData=new FormData（）；
追加（“文件”，文件）；
//通过Ajax将文件上载到临时文件夹
$.ajax({
类型：“POST”，
url:“”，
processData:false，
contentType:false，
数据：myData，
cache:false，
数据类型：“json”，
成功：功能（结果）{
如果（result.FileName！=''）{
var fileName=result.fileName；
var filePath=result.filePath；
//警报（文件路径）；
var imageDiv=“”；
imageDiv+=''；
imageDiv+='供应商'；
imageDiv+=''；
imageDiv+=''；
imageDiv+=''；
//将图像添加到Div
$（'#justificationshotelsection'）.append（imageDiv）；
}
},
失败：函数（）{
}
});
//否则
}
});

无法返回物理文件路径

尝试返回图像url（http://…/imageName）

或者，您可以使用html5 API在浏览器中显示图像，而无需将图像上载到服务器：

var file = document.getElementById(HotelJustificatifFile).files[0];
var reader = new FileReader();
var img = new Image();
img.src = reader.result;
youDivContainerForImage.appendChild(img);

---

不允许加载本地资源错误，可能是此链接解决了您的答案。。

---

您正在返回物理文件路径，而不是这样考虑：

var virtualPath=Url.Content(string.Format("{0}/{1}",
    ApplicationConfig.TEMPORARY_FILES_UPLOADS_PATH, fileName));

return Json(new { FileName = fileName, FilePath=virtualPath}, 
    JsonRequestBehavior.AllowGet);

---

我解决了问题，以下是我的控制器方法：

    [HttpPost]
            public ActionResult UploadFileToTemporaryFolder(HttpPostedFileBase file)
            {
                string fileName = String.Empty;
                string path = String.Empty;
                if (file != null)
                {
                    try
                    {
                       string timestamp = DateTime.UtcNow.ToString("yyyy_MM_dd_HH_mm_ss_fff",CultureInfo.InvariantCulture);
                       fileName = timestamp + "_" + Path.GetFileName(file.FileName);
                      // Relative Path ex "/uploads/Tmp"
                       path = Url.Content(ApplicationConfig.TEMPORARY_FILES_UPLOADS_PATH);
                       System.IO.Directory.CreateDirectory(Server.MapPath(ApplicationConfig.TEMPORARY_FILES_UPLOADS_PATH));
                       // absolute path : C://........../uploads/Tmp
                       string fileSystemPath = string.Format("{0}/{1}", Server.MapPath(ApplicationConfig.TEMPORARY_FILES_UPLOADS_PATH), fileName);
                       file.SaveAs(fileSystemPath);
                    }
                    catch (Exception)
                    {}
                }
               // i send the relative path + filename
                return Json(new { FileName = fileName, FilePath=path }, JsonRequestBehavior.AllowGet);
            }

我在Js代码中得到的路径如下：

success: function (result) {
                           if (result.FileName != '') {

                               var fileName = result.FileName;
                               var filePath = result.FilePath;

                               //alert(filePath );
                                var imageDiv = '<div>';
                                imageDiv+='<div style="z-index: 10; position: absolute; top: 4px; left: 10px;">';
                                        imageDiv += '<a onclick="afficherImage(' + fileName + ')" >Supprimer</a>';
                                     imageDiv +='</div>';
                                     imageDiv += '<img style="width:100%; height:500px" u=image src="' +filePath +'/'+fileName+ '" />';
                                   imageDiv += '</div>';
                               // Adding Image To the Div 
                                   $('#HotelJustifS').append(imageDiv);

                           }
                           }

成功：函数（结果）{
如果（result.FileName！=''）{
var fileName=result.fileName；
var filePath=result.filePath；
//警报（文件路径）；
var imageDiv=''；
imageDiv+=''；
imageDiv+='供应商'；
imageDiv+=''；
imageDiv+=''；
imageDiv+=''；
//将图像添加到Div
$（'HotelJustifS'）.append（imageDiv）；
}
}

我想指出，Javascript可以自己完成这项工作，而无需通过API发送文件

网页不允许在用户的计算机上到处乱放文件（物理文件路径以

文件开始：//

），我很高兴他们没有这样做。你想让互联网上的随机人玩你电脑上的东西吗？你当然不知道

幸运的是，您可以使用数据url（以

data:[MIME type]；base64开头，

）访问用户选择上载的任何文件（通过文件输入），并且可以通过Javascript的内置

FileReader

对象获取一个文件。见下文：

var previewImage = document.getElementById('my-preview');

var filereader = new FileReader();
filereader.onload = function (event) {
  var data = event.target.result;

  previewImage.src = data;
};

var file = document.getElementById('file-input').files[0];
filereader.readAsDataUrl(file);

基本上，它使用

FileReader

将用户上传的文件转换为base64

data:

URL，您可以随意使用它（以及

属性）

这是一场胜利。您已经获得了预览图像，并且无需绕过合理的浏览器安全性即可完成此操作。
您只需将所有图像网络路径（或本地路径）替换为存储的编码HTML中的字节字符串即可。
为此，您需要HtmlAgilityPack将Html字符串转换为Html文档。

查找下面的代码，将每个映像src网络路径（或本地路径）转换为字节。
它肯定会在IE、chrome和firefox中显示所有带有网络路径（或本地路径）的图像

字符串encodedHtmlString=Emailmodel.DtEmailFields.Rows[0][“Body”].ToString（）

看起来您正在返回服务器本地路径（例如
C:\uploads\blah.jpg
而不是URL
http://myserverrocks.com/images/blah.jpg
没错，如何解决？