不允许加载本地资源错误

我想在上传后显示上传的图片，但我不能。我从我的JS控制台得到一个错误说：Not allowed to load local resource Error不允许加载本地资源错误

这里是我的代码：

控制器的方法：

获取文件并将其保存到本地系统

[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

上传文件&追加结果一个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 
       } 
      });

来源

2015-10-06 Kevorkian

看起来你正在返回服务器本地路径（例如'C：\ uploads \ blah.jpg'不是URL http：// myserverrocks.com/images/blah.jpg' – AlG

这是正确的，如何解决这个问题？ – Kevorkian

要返回物理文件路径考虑这个：

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

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

来源

2015-10-06 13:29:58

你不能返回物理文件路径

试图返回图像的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);

来源

2015-10-06 11:45:01 adrianillo

不允许加载本地资源错误，可能是这个链接可以解决你的答案.. http://www.scriptscoop.net/t/17cccd1064d6/angularjs-1-2-not-allowed-to-load-local-resource.html

来源

2015-10-06 11:45:27

我解决了有问题，这里是我的控制器方法：

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

          } 
          }

来源

2015-10-06 16:12:33 Kevorkian

我想指出的JavaScript可以做到这一点就其本身而言，不通过API发送文件的。

不允许网页与用户计算机上的文件混在一起（物理文件路径以file:///开头），我很高兴它们不是。你想在互联网上随机的人在你的电脑上玩东西吗？当然你不知道。

幸运的是，你可以访问用户选择使用数据链接（这些开始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，您可以自由，但是你想（和<img>标签不害怕使用它作为使用一个src属性）。

这是一场胜利。你已经获得了预览图像，而且你不必绕过明智的浏览器安全性来做到这一点。

来源

2016-01-19 22:02:41

不允许加载本地资源错误

回答

相关问题