Caricamento di un file con imgur utilizzando javascript

Sto tentando di utilizzare Javascript per caricare un png su imgur. Ho usato il codice direttamente dall'API Imgur example, ma non penso di passare il file PNG correttamente, ricevo un messaggio di errore che dice file.type is undefined. Penso che il file sia ok visto che ho provato questo con alcuni png diversi. Il mio codice è il seguente:Caricamento di un file con imgur utilizzando javascript

<html> 
<head> 
<script type="text/javascript"> 
function upload(file) { 
    // file is from a <input> tag or from Drag'n Drop 
    // Is the file an image? 
    if (!file || !file.type.match(/image.*/)) return; 

    // It is! 
    // Let's build a FormData object 
    var fd = new FormData(); 
    fd.append("image", file); // Append the file 
    fd.append("key", "mykey"); // Get your own key: http://api.imgur.com/ 

    // Create the XHR (Cross-Domain XHR FTW!!!) 
    var xhr = new XMLHttpRequest(); 
    xhr.open("POST", "http://api.imgur.com/2/upload.json"); // Boooom! 
    xhr.onload = function() { 
     // Big win! 
     // The URL of the image is: 
     JSON.parse(xhr.responseText).upload.links.imgur_page; 
    } 

    // Ok, I don't handle the errors. An exercice for the reader. 
    // And now, we send the formdata 
    xhr.send(fd); 
} 
</script> 
</head> 

<body> 

<button type="button" onclick="upload('test.png')">upload to imgur</button> 

</body> 
</html>

Il png file di test.png è memorizzato nella stessa directory come il mio file html.

fonte

2012-02-12 djq

L'esempio si utilizza si aspetta che si utilizza elemento di input (type = file) per caricare qualche immagine. Prova this example. È possibile accedere ai dati dell'immagine utilizzando una tela like this.

In sintesi, avrete bisogno di fare questo:

creare una nuova immagine con il file (deve essere il dominio locale)
disegnare l'immagine di una tela a onload
estratto i dati delle immagini utilizzando this method
Passo che i dati a Imgur like here

fonte

2012-02-12 14:54:06

Grazie per i suggerimenti. Per aggiungere un'immagine alla tela, è l'immagine 'id'? Immagino di non poterlo riferire usando il nome del file, basato sul commento di @ skimberk1. – djq

Non c'è modo di fare riferimento all'immagine usando il nome del file. Dovrai caricarlo su un elemento img e quindi caricarne il contenuto su una tela usando drawImage. È importante eseguire quest'ultima parte sul gestore di caricamento del file img. Altrimenti non funzionerà. –

Grazie bebraw, questo mi aiuta a capire il flusso. Sto facendo esperimenti con http://html2canvas.hertzen.com/ al momento; sembra che farà parte di questi passaggi. – djq

Il file deve essere un oggetto File creato con il file HTML5, non si può semplicemente dargli un nome file e aspettarsi che funzioni.

Javascript non ha accesso al file system, può solo accedere ai file che gli vengono dati utilizzando il trascinamento della selezione o l'immissione di un file.

fonte

2012-02-12 14:49:35 skimberk1

Caricamento di un file con imgur utilizzando javascript

risposta

Problemi correlati