0
257
ViewsDataTransfer una imagen de la misma página da URL pero la imagen de una página diferente da archivo
EDITAR
La fuente de este problema es el comportamiento del navegador Edge, según lo identificado por Sami. Firefox hace lo mismo, pero Chrome funciona bien.
Pregunta inicial
Tengo un contenedor desplegable para que los usuarios arrastren y suelten una imagen para establecer un <input type="file"> con la imagen.
Si la imagen se arrastra y suelta desde una página diferente, la imagen se reconoce como un archivo. Sin embargo, si la imagen se arrastra y suelta desde la misma página con el contenedor de colocación, se reconoce como una URL.
¿Por qué la imagen no se reconoce como un archivo cuando se arrastra y suelta desde la misma página que el contenedor de colocación?
Aquí está el violín con el contenedor de entrega y el archivo de imagen. Cuando arrastra el archivo de imagen de esta página al contenedor desplegable, se reconoce como una URL, aunque quiero que se reconozca como un archivo.
https://jsfiddle.net/nadf9c82/1/
A continuación, intente arrastrar la imagen en este violín https://jsfiddle.net/7sqb5r0f/1/ al contenedor de colocación en el otro violín y verá que se reconoce como un archivo, que es lo que quiero.
¿Por qué las imágenes en la misma página que el contenedor de entrega se evalúan como URL y no como archivos? ¿Hay alguna solución para que se reconozcan como archivos y no como URL?
Aquí está el código de referencia
<div class="dropContainer" id="dropContainer">Drop Here</div> <div id="imagetwo"> <img src="http://a.mktgcdn.com/p/khxNbcdQcr1HQKNgk9cPNUyWUprmZ5Dryx9P5MAV0SE/2669x3840.jpg" /> </div> <script> dropContainer.ondrop = function(evt) { //evt.preventDefault(); if(evt.dataTransfer.files[0]){ console.log("is a file"); const dT = new DataTransfer(); dT.items.add(evt.dataTransfer.files[0]); fileInput.files = dT.files; }else{ // Try dataTransfer url second var dataTransferUrl = evt.dataTransfer.getData('url'); if(dataTransferUrl){ console.log('is a url, not a file'); console.log(dataTransferUrl); } } }; </script>1 answers
Answer question0
Creo que puede hacerlo, pero no funcionará en Fiddle debido a que The page at 'https://jsfiddle.net/' was loaded over HTTPS, but requested an insecure resource ... the content must be served over HTTPS debido a su solicitud HTTP
Esto es lo que pienso, cada vez que sueltes la imagen, recibirá una URL en lugar del archivo que deseas. Luego simplemente conviértalo en un archivo.
Se llama convertir su URL image to File object , si mi manera no funciona, es la palabra clave para que pueda ver más, espero que le brinde algunas formas de solucionarlo, ya que no soy bueno en esto, también .
Reemplace este código mío en la Try dataTransfer URL second , pero tenga en cuenta que generará un error en Fiddle debido a una solicitud HTTP . Así que tengo que reemplazar el HTTP con HTTPS , pero obtendrá el CORS Block , por lo que si tiene la extensión para unblock CORS , funcionará, para fines de desarrollo o prueba, por supuesto.
let url = evt.dataTransfer.getData('url'); const urlArray = Array.from(url) urlArray.splice(4, 0, 's') const urlFinal = urlArray.join('') fetch(urlFinal) .then(async (res) => { const contentType = await res.headers.get('Content-Type') const blob = await response.blob() const file = new File([blob], "image.jpeg", { contentType }) }) } Cuando suelte una imagen en el cuadro Drop Here , creará un Object File , por lo que contará como un archivo en lugar de una URL, creo que eso es lo que desea, espero poder ayudarlo de alguna manera.
Tome una URL como un archivo de objeto después de arrastrar la imagen y suéltela en el cuadro Soltar aquí 