De prueba del navegador:
Versión de Chrome: 52.0.2743.116

Es un simple javascript que es para abrir un archivo de imagen desde el nivel local como ‘C:\002.jpg’

function run(){

   var URL = "file:///C:
function run(){
var URL = "file:///C:\002.jpg";
window.open(URL, null);
}
run();
2.jpg"
; window.open(URL, null); } run();

Aquí está mi código de ejemplo.
https://fiddle.jshell.net/q326vLya/3/

Por favor darme alguna adecuado sugerencias.

  • uso <input type=file> para obtener acceso a los locales reources
InformationsquelleAutor KBH | 2016-08-17

11 Comentarios

  1. 43

    Saber que esto es un poco viejo, pero ver a muchas preguntas como esta…

    Utilizamos Chrome mucho en el salón de clase y es necesario trabajar con archivos locales.

    Lo que hemos estado usando es «Servidor Web para Chrome». De arrancarlo, elija la carpeta en la que desee trabajar y de ir a URL (como 127.0.0.1:puerto elegido)

    Es un simple servidor y no se puede utilizar PHP, pero para el trabajo simple, puede ser tu solución:

    https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

    • Woody: ¡muchas gracias! Este enfoque ha ayudado a mí. Tengo un local de Tomcat + un local de AWS S3 en Windows 10. Ahora puedo cambiar entre el vivir de AWS y un servidor local. Saludos. Q
  2. 16

    Bueno gente, estoy totalmente de entender las razones de seguridad detrás de este mensaje de error, pero a veces, necesitamos una solución… y aquí está el mío. Se utiliza ASP.Net (en lugar de JavaScript, que esta pregunta se basa en) pero espero que nos sea útil a alguien.

    Nuestra aplicación tiene una página web donde los usuarios pueden crear una lista de accesos directos a archivos de utilidad extendió a lo largo de nuestra red. Al hacer clic en uno de estos accesos directos, queremos abrir estos archivos… pero claro, Chrome error impide esto.

    No se puede abrir el archivo local - Chrome: No se permite la carga de recursos locales

    Este sitio web utiliza AngularJS 1.x a la lista de los diversos accesos directos.

    Originalmente, mi página estaba tratando de crear directamente una <a href..> elemento que apunta a los archivos, pero esto produjo la «Not allowed to load local resource» error cuando un usuario hace clic en uno de estos enlaces.

    <div ng-repeat='sc in listOfShortcuts' id="{{sc.ShtCut_ID}}" class="cssOneShortcutRecord" >
        <div class="cssShortcutIcon">
            <img ng-src="{{ GetIconName(sc.ShtCut_PathFilename); }}">
        </div>
        <div class="cssShortcutName">
            <a ng-href="{{ sc.ShtCut_PathFilename }}" ng-attr-title="{{sc.ShtCut_Tooltip}}" target="_blank" >{{ sc.ShtCut_Name }}</a>
        </div>
    </div>

    La solución fue reemplazar a los <a href..> elementos con este código, para llamar a una función en mi Angulares controlador…

    <div ng-click="OpenAnExternalFile(sc.ShtCut_PathFilename);" >
        {{ sc.ShtCut_Name }}
    </div>

    La función en sí es muy simple…

    $scope.OpenAnExternalFile = function (filename) {
        //
        // Open an external file (i.e. a file which ISN'T in our IIS folder)
        // To do this, we get an ASP.Net Handler to manually load the file, 
        // then return it's contents in a Response.
        //
        var URL = '/Handlers/DownloadExternalFile.ashx?filename=' + encodeURIComponent(filename);
        window.open(URL);
    }

    Y en mi ASP.Net proyecto, he añadido un archivo de Controlador llamado DownloadExternalFile.aspx que contiene este código:

    namespace MikesProject.Handlers
    {
        ///<summary>
        ///Summary description for DownloadExternalFile
        ///</summary>
        public class DownloadExternalFile : IHttpHandler
        {
            // We can't directly open a network file using Javascript, eg
            //     window.open("\SomeNetworkPath\ExcelFile\MikesExcelFile.xls");
            //
            // Instead, we need to get Javascript to call this groovy helper class which loads such a file, then sends it to the stream.  
            //     window.open("/Handlers/DownloadExternalFile.ashx?filename=//SomeNetworkPath/ExcelFile/MikesExcelFile.xls");
            //
            public void ProcessRequest(HttpContext context)
            {
                string pathAndFilename = context.Request["filename"];               // eg  "\SomeNetworkPath\ExcelFile\MikesExcelFile.xls"
                string filename = System.IO.Path.GetFileName(pathAndFilename);      // eg  "MikesExcelFile.xls"
    
                context.Response.ClearContent();
    
                WebClient webClient = new WebClient();
                using (Stream stream = webClient.OpenRead(pathAndFilename))
                {
                    //Process image...
                    byte[] data1 = new byte[stream.Length];
                    stream.Read(data1, 0, data1.Length);
    
                    context.Response.AddHeader("Content-Disposition", string.Format("attachment; filename={0}", filename));
                    context.Response.BinaryWrite(data1);
    
                    context.Response.Flush();
                    context.Response.SuppressContent = true;
                    context.ApplicationInstance.CompleteRequest();
                }
            }
    
            public bool IsReusable
            {
                get
                {
                    return false;
                }
            }
        }

    Y eso es todo.

    Ahora, cuando un usuario hace clic en uno de mis enlaces de acceso directo, llama a la OpenAnExternalFile función, la que se abre este .archivo ashx, pasando la ruta+nombre de archivo del archivo que queremos abrir.

    Este código de Controlador de carga el archivo, a continuación, pasa el contenido de la espalda en la respuesta HTTP.

    Y, trabajo hecho, la página web se abre el archivo externo.

    Ufff ! De nuevo – hay una razón por qué Chrome lanza este «Not allowed to load local resources» de excepción, así que ten cuidado con esto… pero yo soy la publicación de este código sólo para demostrar que esta es una manera simple alrededor de esta limitación.

    Sólo un último comentario: la pregunta original se quería abrir el archivo «C:\002.jpg«. Usted no puede hacer esto. Su sitio web va a sentarse en un servidor (con su propia unidad C:) y no tiene acceso directo a su propia del usuario de la unidad C:. Así que lo mejor que puedes hacer es utilizar un código como el mío para acceder a los archivos en algún lugar en una unidad de red.

    • Suena bien, pero ¿cómo se puede controlar la autorización (permisos de lectura)? Lo que si no todos los usuarios pueden ver un archivo? No es necesario realizar la lectura en el nombre del usuario que solicita?
  3. 12

    Chrome bloquea específicamente el acceso a archivos locales de esta manera por razones de seguridad.

    Aquí un artículo para solucionar la bandera en Chrome (y abrir su sistema de seguridad para vulnerabilidades):

    http://www.chrome-allow-file-access-from-file.com/

    • Yo traté de seguir la solución «c:\path\chrome.exe» -permitir-archivo-acceso-de-archivos pero no puedo abrirlo. Por favor, prueba de este sitio web fiddle.jshell.net/q326vLya/3. ¿Qué estoy haciendo mal?
    • Esto no funciona para mí, el mismo error exacto
    • no trabajo para mí
    • No funciona para mí demasiado 🙁
    • En GoogleChrome 66 no su trabajo. Chrome se inicia con la bandera, pero todavía muestra que el archivo local canbt abrirse.
  4. 6

    Hay una solución con Servidor Web para Chrome.
    Aquí están los pasos:

    1. Agregar la Extensión para chrome.
    2. Elegir la carpeta (C:\images) y lanzar el servidor
      en el puerto deseado.

    Ahora de fácil acceso a su local de archivo:

    function run(){
       //8887 is the port number you have launched your serve
       var URL = "http://127.0.0.1:8887/002.jpg";
    
       window.open(URL, null);
    
    }
    run();

    PS: Usted puede ser que necesite para seleccionar el Encabezado CORS opción de configuración avanzada que en caso que se enfrentan a algún error de cualquier origen de la cruz de error de acceso.

  5. 5

    1)
    Abre tu terminal y escriba

    npm install -g http-server

    2)
    Ir a la raíz de la carpeta que desea servir a los archivos y escriba:

    http-server ./

    3)
    Leer la salida de la terminal, algo un poco http://localhost:8080 aparecerá.

    Todo lo que allí se podrán adquirir.
    Ejemplo:

    background: url('http://localhost:8080/waw.png');

  6. 3

    Usted no será capaz de cargar una imagen fuera del directorio del proyecto o de un nivel de usuario de directorio, de ahí el «no se puede tener acceso local a los recursos de advertencia».

    Pero si se va a colocar el archivo en una carpeta raíz de tu proyecto como en {rootFolder}\Content\my-image.jpg y se hace referencia a ella como:

    <img src="/Content/my-image.jpg" />
  7. 1

    Si pudieran hacer esto, va a representar un gran problema de seguridad, como usted puede tener acceso a su sistema de ficheros, y potencialmente actuar sobre los datos disponibles no… por Suerte no es posible hacer lo que estamos tratando de hacer.

    Si usted necesita los recursos locales para acceder, puede intentar iniciar un servidor web en la máquina, y en este caso, su método de trabajo. Otras soluciones son posibles, tales como actuar en la configuración de Chrome, pero yo siempre prefiero la manera limpia, la instalación de un servidor web local, tal vez en un puerto diferente (no, no es tan difícil!).

    Ver también:

    • la razón de esta regla es más social que técnico; de los navegadores de hacer un buen trabajo de prevención de la programática de acceso a los recursos del dominio ya (por ejemplo. SOP, CDN scripts, profundamente vinculado etiquetas IMG, etc), pero desconcierta a la gente de ver sus contenidos locales en una ventana del navegador, incluso si el script no puede decir lo que muestra…
    • sí, tienes razón, todavía creo que puede ser bueno para prevenir que esto suceda. Aparte de los bugs en algunas implementaciones (si no se puede abrir un recurso local, usted está probablemente más seguro), puede haber algunas situaciones específicas en las que otras personas están buscando en su pantalla (uso compartido de la pantalla de aplicaciones, o simplemente detrás de su espalda en su oficina) y no quieres que tus imágenes (potencialmente una Tarjeta de Crédito o una imagen privada) puede ser abierto sólo por visitar algunos sitios web que pueden adivinar la ubicación en el sistema de ficheros local…
  8. 1

    Este problema viene cuando la estoy usando PHP como lenguaje del lado del servidor y en el trabajo fue generar una codificación base64 de mi imagen antes de enviar el resultado al cliente

    $path = 'E:/pat/rwanda.png';
    $type = pathinfo($path, PATHINFO_EXTENSION);
    $data = file_get_contents($path);
    $base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);

    Creo que puede dar alguna idea de crear su propio trabajo alrededor de

    Gracias

  9. 0

    Sólo tienes que sustituir la imagen de la red de rutas de acceso a cadenas de bytes almacenados en HTML Codificado de la cadena.
    Para ello se requiere HtmlAgilityPack para convertir una cadena Html a un documento Html.
    https://www.nuget.org/packages/HtmlAgilityPack

    Encontrar a Continuación el código para convertir cada imagen src ruta de acceso de red(o ruta de acceso local) byte de sting.
    Definitivamente va a mostrar todas las imágenes con la ruta de acceso de red(o ruta de acceso local) en IE,chrome y firefox.

    string encodedHtmlString = Emailmodel.DtEmailFields.Rows[0]["Body"].ToString();
    //Decode the encoded string.
    StringWriter myWriter = new StringWriter();
    HttpUtility.HtmlDecode(encodedHtmlString, myWriter);
    string DecodedHtmlString = myWriter.ToString();
    //find and replace each img src with byte string
    HtmlDocument document = new HtmlDocument();
    document.LoadHtml(DecodedHtmlString);
    document.DocumentNode.Descendants("img")
    .Where(e =>
    {
    string src = e.GetAttributeValue("src", null) ?? "";
    return !string.IsNullOrEmpty(src);//&& src.StartsWith("data:image");
    })
    .ToList()
    .ForEach(x =>
    {
    string currentSrcValue = x.GetAttributeValue("src", null);                                
    string filePath = Path.GetDirectoryName(currentSrcValue) + "\\";
    string filename = Path.GetFileName(currentSrcValue);
    string contenttype = "image/" + Path.GetExtension(filename).Replace(".", "");
    FileStream fs = new FileStream(filePath + filename, FileMode.Open, FileAccess.Read);
    BinaryReader br = new BinaryReader(fs);
    Byte[] bytes = br.ReadBytes((Int32)fs.Length);
    br.Close();
    fs.Close();
    x.SetAttributeValue("src", "data:" + contenttype + ";base64," + Convert.ToBase64String(bytes));                                
    });
    string result = document.DocumentNode.OuterHtml;
    //Encode HTML string
    string myEncodedString = HttpUtility.HtmlEncode(result);
    Emailmodel.DtEmailFields.Rows[0]["Body"] = myEncodedString;
  10. 0

    Google Chrome no permite la carga de los recursos locales debido a la seguridad. Chrome necesidad url http. Internet Explorer y el Borde permite cargar los recursos locales, pero Safari, Chrome y Firefox no permite la carga de los recursos locales.

    Vaya a la ubicación del archivo y comenzar la Python Server a partir de ahí.

    python -m SimpleHttpServer

    a continuación, poner la url en función de:

    function run(){
    var URL = "http://172.271.1.20:8000/" /* http://0.0.0.0:8000/or http://127.0.0.1:8000/; */
    window.open(URL, null);
    }
  11. 0

    Esta solución funcionó para mí en PHP. Se abre el PDF en el navegador.

    //$path is the path to the pdf file
    public function showPDF($path) {
    if($path) {
    header("Content-type: application/pdf");
    header("Content-Disposition: inline; filename=filename.pdf");
    @readfile($path);
    }
    }

Dejar respuesta

Please enter your comment!
Please enter your name here