javascript - type - validar tamaño imagen laravel

¿Es posible realizar una carga de archivos asíncrona entre dominios?

Question

¡Es posible! Lee abajo.

En primer lugar, permítanme usar este diagrama para explicar cómo se pueden lograr las cargas de archivos asíncronos :

Lo siento. Cerré uno de mis dominios y la imagen ya no está. Aunque fue una imagen realmente bonita. Esto fue antes de descubrir que Stack Overflow permite subir imágenes a través de Imgur.

Como puede ver, el truco es dejar que la respuesta HTTP se cargue en un elemento IFRAME oculto en lugar de la página en sí. (Esto se hace al establecer la propiedad de target del elemento FORM al enviar el FORMULARIO con JavaScript).

Esto funciona. Sin embargo, el problema que estoy enfrentando es que la secuencia de comandos del lado del servidor está en un dominio diferente . El FORM-submit es una solicitud HTTP entre dominios. Ahora, el script del lado del servidor tiene CORS habilitado, lo que le da a mi página web los derechos para leer los datos de respuesta de las solicitudes HTTP hechas desde mi página a esa secuencia de comandos, pero eso solo funciona si recibo la respuesta HTTP a través de Ajax. ergo, JavaScript.

Sin embargo, en este caso, la respuesta se dirige hacia el elemento IFRAME. Y una vez que la respuesta XML llega al IFRAME, su URL será la secuencia de comandos eliminada, por ejemplo, http://remote-domain.com/script.pl .

Desafortunadamente, CORS no cubre este caso (al menos creo que) - No puedo leer el contenido de IFRAME porque su URL no coincide con la URL de la página (dominio diferente). Me sale este error:

JavaScript inseguro intenta acceder al marco con la URL hxxp: //remote-domain.com/script.pl desde el marco con la URL hxxp: //my-domain.com/outer.html. Deben coincidir los dominios, protocolos y puertos.

Y dado que el contenido del IFRAME es un documento XML, no hay código JavaScript dentro del IFRAME que pueda hacer uso de postMessage o algo así.

Entonces mi pregunta es: ¿cómo puedo obtener los contenidos XML del IFRAME?

Como dije antes, puedo recuperar respuestas HTTP entre dominios directamente (CORS habilitado), pero parece que no puedo leer las respuestas HTTP entre dominios una vez que se cargan en un IFRAME.

Y como si esta pregunta no fuera lo suficientemente insoluble, permítanme excluir estas soluciones :

1. easyXDM y técnicas similares que requieren un punto final en el dominio remoto,

2. alterando la respuesta XML (para incluir un elemento SCRIPT),

3. proxy del servidor: entiendo que podría tener un script del lado del servidor en mi dominio que podría servir como un proxy.

Entonces, aparte de esas dos soluciones, ¿se puede hacer esto?

¡¡Se puede hacer!!

Resulta que es posible falsificar una solicitud XHR (solicitud Ajax) que imita un envío de multipart/form-data (que se utiliza en la imagen anterior para cargar el archivo en el servidor).

El truco es usar el constructor de FormData : lee este artículo de Mozilla Hacks para obtener más información.

Así es como lo haces:

// STEP 1
// retrieve a reference to the file
// <input type="file"> elements have a "files" property
var file = input.files[0];

// STEP 2
// create a FormData instance, and append the file to it
var fd = new FormData();
fd.append(''file'', file);

// STEP 3 
// send the FormData instance with the XHR object
var xhr = new XMLHttpRequest();
xhr.open(''POST'', ''http://remote-domain.com/script.pl'', true);
xhr.onreadystatechange = responseHandler;
xhr.send(fd);

El método anterior ejecuta una creación de archivo asíncrona, que es equivalente a la carga de archivo normal descrita en la imagen anterior y se logra al enviar este formulario:

<form action="http://remote-domain.com/script.pl" 
        enctype="multipart/form-data" method="post">
    <input type="file" name="file">
</form>

Como un jefe :)

Answer 1

Creo que no se puede hacer con la forma en que estás describiendo. Normalmente, si tiene problemas de dominio cruzado, puede resolverlo mediante un enfoque JSONp, pero eso solo funciona para las solicitudes GET. Con HTML5, podría enviar binarios con la solicitud GET, pero eso es dudoso.

• Una solución sería hacer que el servicio web remoto esté disponible localmente mediante el proxy de la solicitud en el servidor web local. Esto causará una carga adicional para su servidor web local, por lo que puedo imaginar que no es factible. Si los archivos son pequeños e infrecuentes, esto funcionará muy bien.

• Otra solución sería comenzar a sondear el servidor después de haber enviado el archivo. Puede enviar un token y sondear el estado del servidor utilizando JSONp regular. De esta forma no es necesario que lea el iframe.

• Coloque toda la página en un iframe que se ejecute en el servidor remoto. Esto podría mover el problema, pero si el resultado XML es el paso final en algún proceso, es bastante factible.

Estoy seguro de que tiene buenas razones para que el servidor de procesamiento esté en un dominio diferente, pero si no fuera así, no tendría todos estos problemas. Tal vez vale la pena reconsiderar?

Answer 2

El siguiente enfoque funciona en mi configuración (Firefox 3.6):

<!-- hidden target frame -->
<iframe name="load_target" id="load_target" onload="process(this);" src="#" ...>

<!-- get data from iframe after load and process them --> 
<script type="text/javascript">
    function process(iframe) {
       var data = iframe.contentWindow.document.body.innerHTML; 
       // got test data="<xml><a>b</a></xml>"
    }
</script>

También funciona en Chrome, pero se necesita para excluir una primera llamada de carga después de la carga de la página principal. Esto se logra fácilmente estableciendo una variable "global" que se prueba en el process() .

ADICIÓN

El método funciona junto con un formulario

<form action="URL" method="post" enctype="multipart/form-data" target="load_target">

que se envía a la URL . Esta URL debe residir en el mismo dominio que la página principal page.html . Si se van a descargar datos de un REMOTE_URL , entonces el URL sería un PHP proxy.php en el propio dominio con el contenido

<?php echo file_get_contents("REMOTE_URL"); ?>

Este es un enfoque simple; sin embargo, probablemente esté excluido por la condición (2) de la pregunta. Lo he agregado aquí para completar mi respuesta.

Otros enfoques, considerando iframes solamente, son discutidos por Mahemoff y Georges Auberger .

Answer 3

Si puede, regrese una página HTML en lugar de XML.
En esa página puede usar en una etiqueta SCRIPT el comando: parent.postMessage

Si tiene que admitir navegadores más antiguos (<IE8 principalmente), puede escribir y leer window.name para mensajes de menos de 2Mb.

Ambas técnicas le permiten pasar datos de cadena entre cuadros de diferentes dominios.

Otra técnica es usar un setInterval que invocará repetidamente el dominio remoto desde la página principal utilizando JSONP para conocer el estado.

En cualquier caso, necesitará una cooperación del dominio remoto para obtener los datos.

Answer 4

Simplemente envíe una solicitud XHR entre dominios con los datos del formulario en lugar de enviar el formulario. CORS es solo para el primero.

Si debe hacerlo de otra manera, negocie con el marco utilizando postMessage.

Y dado que el contenido del IFRAME es un documento XML, no hay código JavaScript dentro del IFRAME que pueda hacer uso de postMessage o algo así.

¿Cómo te detiene eso? Incluya un elemento de script en el espacio de nombres HTML o SVG ( <script xmlns="http://www.w3.org/1999/xhtml" type="application/ecmascript" src="..."/> ) en cualquier parte del XML.