不允許加載本地資源錯誤

Question

我想在上傳後顯示上傳的圖片，但我不能。我從我的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 
       } 
      }); 

Answer 1

要返回物理文件路徑考慮這個：

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

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

Answer 2

你不能返回物理文件路徑

試圖返回圖像的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); 

Answer 3

不允許加載本地資源錯誤，可能是這個鏈接可以解決你的答案.. http://www.scriptscoop.net/t/17cccd1064d6/angularjs-1-2-not-allowed-to-load-local-resource.html

Answer 4

我解決了有問題，這裏是我的控制器方法：

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

          } 
          } 

Answer 5

我想指出的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屬性）。

這是一場勝利。你已經獲得了預覽圖像，而且你不必繞過明智的瀏覽器安全性來做到這一點。