Este artigo apresenta como converter o caminho absoluto de uma imagem em um objeto de arquivo em HTML5 e compartilhá-lo com todos.
Para converter o caminho absoluto da imagem em codificação base64, consulte este artigo
Vamos primeiro entender os pontos básicos de conhecimento:
1. Compreenda o objeto FileList e o objeto de arquivo em HTML5.No HTML5, um objeto FileList representa uma lista de arquivos selecionados pelo usuário. Ao adicionar o atributo multipe, vários arquivos podem ser selecionados de uma só vez no controle de arquivos. Cada arquivo selecionado pelo usuário no controle é um objeto de arquivo e o objeto FileList é uma lista de objetos de arquivo. Representa todos os arquivos selecionados pelo usuário. Vejamos primeiro uma demonstração simples para ver quais atributos o objeto de arquivo possui. O seguinte código:
<!DOCTYPE html><html> <head> <title>filesystem:URL</title> </head> <body> <div> <label>Selecione:</label> <input type='file' multiple id= arquivo /> <input type=button value=Upload de arquivo onClick=showFile() /> </div> <script> function showFile() { var files = document.getElementById('file').files; Retorna todos os arquivos selecionados for (var i = 0, ilen = files.length; i < ilen; i++) { // Imprime as informações de um único objeto de arquivo console.log(files[i]); as informações são as seguintes: Arquivo { lastModified: 1457946612000 lastModifiedDate: Mon Mar 14 2016 17:10:12 GMT+0800 (CST) {} nome: test.html tamanho: 796 tipo: text/html webkitRelativePath: */ /* Se uma imagem for carregada, as seguintes informações serão retornadas: Arquivo { lastModified: 1466907500000 lastModifiedDate: Sun Jun 26 2016 10 : 18:20 GMT+0800 (CST) {} nome: a.jpg tamanho: 23684 type: image/jpeg webkitRelativePath: } */ /* Portanto, se você precisar determinar se o arquivo enviado é um arquivo de imagem, você pode julgar de acordo com o tipo da seguinte forma: var file = files[i]; /image// /w+/.test(file.type)) { console.log('Este arquivo não é um arquivo de imagem' } else { console.log('Este arquivo é um arquivo de imagem' }); Mas se você deseja apenas transferir imagens, você pode adicionar um atributo accept=image/* ao controle de imagem, podemos escrever o código da seguinte forma: <input type='file' multiple accept = 'image/gif,image/jpeg; ,imagem/ jpg,imagem/png' /> */ } } </script> </body></html> 2. Compreenda os objetos BlobPontos principais: No HTML5, um novo objeto Blob é adicionado para representar os dados binários originais. Na verdade, o objeto arquivo também herda o objeto Blob.
O objeto Blob possui dois atributos. O atributo size representa o comprimento em bytes de um objeto Blob e o atributo type representa o tipo MIME do Blob. Se for um tipo desconhecido, uma string vazia será retornada.
Por favor, observe o seguinte código:
<!DOCTYPE html><html> <head> <title>sistema de arquivos:URL</title> </head> <body> <div> <label>Selecionar arquivo:</label> <input type=file id=file / > <input type=button value=Mostrar informações do arquivo onClick=showFileType() /> <p>Comprimento em bytes do arquivo: <span id=size></span></p> <p>Tipo de arquivo: <span id=type></span></p> </div> <script> function showFileType() { var file; // Obtém o primeiro arquivo selecionado pelo usuário file = document.getElementById('file').files[ 0]; var size = document.getElementById('size'); var type = document.getElementById('type'); Exibe o tipo de arquivo type.innerHTML = file.type; // Abra o console para visualizar o objeto de arquivo retornado console.log(file);Nota: Blob e Arquivo podem ser usados ao mesmo tempo, e FileReader pode ser usado para ler dados do Blob.
A seguir está um endereço de imagem de caminho absoluto que é convertido em uma imagem codificada em base64 e, em seguida, a imagem codificada em base64 é convertida em um objeto blob. O código é o seguinte:
<!DOCTYPE html><html> <head> <title>Converter dados de URL de imagem base64 para Blob</title> </head> <body> <script> /** * Converter dados de URL de imagem base64 para Blob * @param urlData * dados de imagem base64 expressos no modo url */ function convertBase64UrlToBlob(base64){ var urlData = base64.dataURL var type =; base64.type; var bytes = window.atob(urlData.split(',')[1]); //Remova o cabeçalho da url e converta-o em byte //Trate de exceções e converta o código ascii menor que 0 para maior que 0 var ab = new ArrayBuffer(bytes.length; i++) { ia[i] = bytes.charCodeAt(i } return new Blob( [ab] , {type : type}); /* * Converta o endereço do caminho absoluto da imagem na codificação base64 da seguinte forma: */ function getBase64Image(img) { var tela = document.createElement(canvas); canvas.getContext(2d); ; var dataURL = canvas.toDataURL(image/+ext); return { dataURL: dataURL, tipo: imagem/+ext); }; } var img = https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg; (){ var base64 = getBase64Image(imagem); console.log(base64); As informações de impressão são as seguintes: { dataURL: data:image/png;base64,xxx type: image/jpg } */ var img2 = convertBase64UrlToBlob(base64); : Blob {tamanho: 9585, tipo: imagem/jpg} */ } </script> </body></html>Nota: No HTML5, um novo objeto Blob é adicionado para representar os dados binários originais. Na verdade, o objeto arquivo também herda o objeto Blob. Portanto podemos usar o endereço absoluto da imagem para convertê-la em um objeto de arquivo.
Portanto, podemos usar o endereço absoluto da imagem para convertê-la em um objeto de arquivo. Para uma demonstração detalhada, você pode ver o controle de upload de imagem no meu git. O plug-in primeiro suporta o upload de imagens e, de repente, descobri que. quando vou para a página de edição, preciso exibir a imagem padrão. Você também pode. Ao mesmo tempo, é possível continuar enviando novas imagens ao exibir as imagens por padrão ou excluir todas as imagens. me o endereço absoluto da imagem, então estou me perguntando como converter o endereço absoluto da imagem em um objeto de arquivo. Se eu não converter Se ele se tornar um objeto de arquivo, ao usar este código, var reader =. new FileReader(); reportará um erro, então você pode usar o objeto blob sobre o qual falamos acima para convertê-lo primeiro em um objeto blob e, em seguida, você pode usar o objeto de operação de arquivo fileReader.
Para obter o código detalhado, consulte o controle de upload de imagem em meu git (https://github.com/tugenhua0707/html5UploadImage Para o efeito, consulte https://tugenhua0707.github.io/html5UploadImage/index.html).
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.