Este artigo compartilha exemplos de exemplos de upload e visualização de várias imagens do JS HTML5 para sua referência. O conteúdo específico é o seguinte
Aplicação principal
1. Os arquivos HTML5 podem selecionar vários arquivos e obter várias informações de arquivo
2. Objeto XmlHttPrequest, envie solicitação de transmissão HTTP
3. Coloque cada arquivo em formdados para transmissão
4. Use readaDataurl para transformar diretamente o conteúdo da imagem em um URL, coloque -o no SRC da tag IMG e gerar imagens visualizáveis.
Código HTML+CSS+JS
<! Doctype html> <head> <meta http-equiv = "content-type" content = "text/html" charset = "utf-8"/> <title> teste html filereader </title> <estilo <estilo type = "texto/css"> html, corpo, cabeçalho, rodapé, div, ul, li, h1, h2, h3, h4, h5, h6, etiqueta, entrada, textarea, p, span, a {preenchimento: 0; margem: 0;} img {borda: 0;} em, forte {font-weight: normal; estilo de fonte: normal;} ul {estilo de lista: nenhum;} h1, h2, h3, h4, h5, h6 {peso font-peso: normal; Fonte-tamanho: 100%;} a, a: após {decoração de texto: nenhum;}. foto_wrap {clear: ambos;}. foto_wrap li {margin: 10px; Largura: 150px; Float: Esquerda;}. Photo_box {Hight: 150px; Largura: 150px; estouro: oculto; Posição: relativa;}. Photo_box .img1 {altura: 150px;}. Photo_box .img2 {width: 150px;}. upload_result {altura: 50px;}. btn {position: relativo; Altura: 40px; Largura: 100px; float: esquerda;}. btn {altura: 40px; altura da linha: 40px; Cor: #FFF; exibição: bloco; Radio de fronteira: 3px; Alinhamento de texto: centro; Background-Color: #FF5581; / * Navegadores antigos */ Imagem de fundo: -moz-linear-gradiente (topo, #fa7b9c 0%, #ff5581 100%); / * Ff3.6+ */ Imagem de fundo: -Webkit Gradiente (linear, parte superior esquerda, parte inferior esquerda, parada de cor (0%,#fa7b9c), parada de cor (100%,#ff5581)); / * Chrome, Safari4+ */ Imagem de fundo: -Webkit-linear-gradiente (topo, #fa7b9c 0%, #ff5581 100%); / * Chrome10+, Safari5.1+ */ Imagem de fundo: -o-linear-gradiente (topo, #fa7b9c 0%, #ff5581 100%); / * Opera 11.10+ */ Imagem de fundo: -ms-linear-gradiente (topo, #fa7b9c 0%, #ff5581 100%); / * IE10+ */ Imagem de fundo: gradiente linear (para baixo, #fa7b9c 0%, #ff5581 100%); / * W3c */ filtro: progId: dximagetransform.microsoft.gradient (startColorstr = '#fa7b9c', endColorstr = '#ff5581', gradientType = 0); / * Ie6-8 */ box-shadow: 0 1px 0 rgba (255, 255, 255, 0,3), 0 1px 2px rgba (0, 0, 0, 0.3);}. Btn_add_pic {width: 100px; Posição: Absoluto; topo: 0; Esquerda: 0;}. btn_upload {width: 100px; margem: 0 10px 10px; Float: Esquerda;}. Btn: Hover, .btn_cur {Background-Color: #fb99b1; / * Navegadores antigos */ Imagem de fundo: -moz-linear-gradiente (topo, #fb99b1 0%, #ff5581 100%); / * Ff3.6+ */ Imagem de fundo: -Webkit Gradiente (linear, parte superior esquerda, parte inferior esquerda, parada de cor (0%,#fb99b1), parada de cor (100%, ## FF5581)); / * Chrome, Safari4+ */ Imagem de fundo: -Webkit-linear-gradiente (topo, #fb99b1 0%, #ff5581 100%); / * Chrome10+, Safari5.1+ */ Imagem de fundo: -o-linear-gradiente (topo, #fb99b1 0%, #ff5581 100%); / * Opera 11.10+ */ Imagem de fundo: -ms-linear-gradiente (topo, #fb99b1 0%, #ff5581 100%); / * IE10+ */ Imagem de fundo: gradiente linear (para baixo, #fb99b1 0%, #ff5581 100%); / * W3c */ filtro: progid: dximageTransform.microsoft.gradient (startColorstr = '#fb99b1', endColorstr = '#ff5581', gradientType = 0); / * Ie6-8 */}. File_input_wrap {position: absoluto; topo: 0; Esquerda: 0; Largura: 100px; Altura: 40px;}. File_input_wrap Label {Width: 100%; Altura: 100%; exibição: bloco; opacidade: 0; Cursor: Pointer;}. File_input_wrap Input {Opacity: 0; filtro: alfa (opacidade = 0);/*ie8 e abaixo*/ posição: absoluto; topo: 7px; Direita: 173px; Cursor: Ponteiro; Largura: 95px;}. Photo_box .icon_pos {altura: 20px; Largura: 20px; exibição: bloco; Posição: Absoluto; Direita: 0; Inferior: 0;}. Photo_box .loading {Hight: 10px; exibição: bloco; Posição: Absoluto; Esquerda: 0; Inferior: 0; Imagem de fundo: URL (carregamento.gif);}. sucess_icon {background-image: url (icons_01.png); Posição de fundo: 0 0;}. Error_icon {Background-Image: URL (icons_01.png); Posição de fundo: -20px 0;} </style> </adhead> <body> <div> <a id = "j_add_pic" href = "javascript :;"> adicione imagem </a> <div> <input type = "file" id = "file" name = "file" accept = "image/*" múltiplo onChange = "FileInfo" id = "j_add_area"> </elabel> </div> </div> <a id = "j_upload" href = "javascript :;"> start upload </a> <div id = "j_photo_wrap"> <ul> </lubro> </div> </body> <cript type = src = "jQuery-1.7.2.min.js"> </script> <script type = "text/javascript"> var iMg_index = new Array (); function upload_img () {var j = 0; img (); função img () {// 1. Crie o objeto xmlHttPrequest if (img_index.length> 0) {var singleImg = img_index [j]; var xmlhttp; if (window.xmlHttPrequest) {// ie7+, firefox, chrome, ópera, safari xmlhttp = new XmlHttPrequest; // Corrija se para certas versões específicas de bugs do navegador Mozillar (xmlHttp.Overridemimetype) {xmlhttp.Overridemimetype ('text/xml'); }; } else if (window.activexObject) {// ie6, ie5 xmlhttp = new ActiveXObject ("microsoft.xmlhttp"); }; if (xmlhttp.upload) {// barra de progresso xmlhttp.upload.addeventListener ("Progress", function (e) {if (e.lengthcomputable) {var load_percent = (E.Loaded /E.Total) * 100; $ ('#j_photo_ap li '). Eq (j) .Find ('. Carregando '). CSS (' Width ', Load_Percent+'%'); // 2. Função de retorno de chamada // ONREEDSTATECHANGE é a função do identificador de eventos chamado toda vez que a propriedade ReadyState altera xmlHttp.onReadyStateChange = function (e) {if (xmlhttp.readyState == 4) {if (xmlhttp.status == 200) {var json = avaliou ('(' xm /xm /xm; if (json.status == 1) {$ ('#j_photo_wrap ul li'). Eq (j) .find ('. $ ('#J_photo_wrap ul li'). Eq (j) .find ('. Carregando'). Hide (); $ ('#J_photo_wrap ul li'). Eq (j) .find ('. Icon_pos'). Addclass ('sucess_icon'); } else {$ ('#j_photo_wrap ul li'). eq (j) .find ('. upload_result'). text (singenimg.name+'upload falhou'); $ ('#J_photo_wrap ul li'). Eq (j) .find ('. Carregando'). Hide (); $ ('#J_photo_wrap ul li'). Eq (j) .find ('. Icon_pos'). Addclass ('error_icon'); }} else {$ ('#j_photo_wrap ul li'). eq (j) .find ('. upload_result'). text (singenimg.name+'upload falhou'); $ ('#J_photo_wrap ul li'). Eq (j) .find ('. Carregando'). Hide (); $ ('#J_photo_wrap ul li'). Eq (j) .find ('. Carregando'). Hide (); $ ('#J_photo_wrap ul li'). Eq (j) .find ('. Icon_pos'). Addclass ('error_icon'); } if (j <img_index.length - 1) {j ++; img (); }}}}; // 3. Defina informações de conexão // Inicialize os parâmetros de solicitação HTTP, mas não envie solicitações. // O primeiro método de conexão de parâmetro é que o segundo é o endereço da URL, e o terceiro true é uma conexão assíncrona, que é assíncrona por padrão // envia dados usando o método post xmlHttp.open ("post", "upload.php", true); // 4. Envie dados, comece a interagir com o servidor // Enviar solicitações HTTP, use os parâmetros passados para o método open () e a solicitação opcional passada para o método. Se verdadeiro, o envio da frase será executado imediatamente // se for falso (síncrono), o envio será executado somente depois que os dados do servidor voltarem // o método GET não requer conteúdo no send Var FormData = new FormData (); formData.Append ("Filedata", SingenImg); xmlhttp.send (formData); } //}}}}; $ ('#J_upload'). Clique (function () {upload_img ();}); $ ('#J_add_area'). Hover (function () {$ ('#j_add_pic'). Addclass ('btn_cur');}, function () {$ ('#j_add_pic'). Removeclass ('btn_cur');}); $ ('#J_add_area'). Clique (function () {$ ('#file'). Click ();}); função redimensiona (img) {if (img.offsetHeight> img.offsetWidth) {$ (img) .removeclass ('img1'). addclass ('img2'); } else {$ (img) .removeclass ('img2'). addclass ('img1'); }} função fileInfo (origem) {var ileg = /image//.*/i; var arquivos var = fonte.files; Nome var, tamanho, tipo; for (var i = 0, f; f = arquivos [i]; i ++) {name = f.name; tamanho = f.size; tipo = f.Type; if (! type.match (ireg)) {$ ('#j_photo_wrap ul'). Append ('<li> <div>'+name+'não é uma imagem </span> </span> </span> </niv> <div> </div> </li>'); } else {img_index.push (f); if (size> 1048576) {$ ('#j_photo_wrap ul'). Append ('<li> <div>'+name+'é grande demais para gerar uma visualização </span> </span> </span> </span> </div> <div> </div> </li>'); } else {if (window.fileReader) {var fr = new FileReader (); fr.onload = (function (f) {return function (e) {$ ('#j_photo_wrap ul'). Append ('<li> <div> <img onload = "redimensionamento (this);" src = "'+this.result+'"/</span> </span> </;;;; fr.readasdataurl (f); }}}}}}}; </script> </html>O PHP recebeu o código do arquivo (aqui recebe apenas o nome do arquivo, tipo e tamanho e nenhuma outra operações é executada)
<? php $ name = $ _files ['filedata'] ['nome']; $ type = $ _files ['filedata'] ['type']; $ size = $ _files ['Filedata'] ['size']; $ return = array ("nome" => $ nome, "tipo" => $ type, "size" => $ tamanho, "status" => 1); $ return = json_encode ($ return); eco $ return;?>Problemas existentes
1. Para gerar miniaturas, o ReadaSdataurl assumirá a memória ao ler o conteúdo do arquivo, para que imagens grandes farão com que o navegador fique preso ou falhe.
2. O upload não é processado na segmentação
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.