2017-08-26 72 views
0

我的網站上有一個用戶可以上傳圖片的網頁。我想將要上傳的圖片的上限設置爲2mb。目前它上傳所有尺寸的圖片。如果圖片小於2MB,它將沿着正常路徑上傳,如果圖片大於2MB,彈出窗口應顯示錯誤消息。任何人都可以幫助我如何用JavaScript來做到這一點?任何幫助,將不勝感激。謝謝!Javascript - 如何將要上傳的圖片大小限制設置爲2mb。腳本已包含

按照下面的腳本,只是幫助我設置圖像的大小限制,如果沒有人能夠上傳5GB圖像和超載我的服務器。

 // Iniciando biblioteca 
                var resize = new window.resize(); 
                resize.init(); 

                // Declarando variáveis 
                var imagens; 
                var imagem_atual; 

                // Quando carregado a página 
                $(function ($) { 

                 // Quando selecionado as imagens 
                 $('#imagem').on('change', function() { 
                  enviar(); 
                 }); 

                }); 


                /* 
                Envia os arquivos selecionados 
                */ 
                function enviar() 
                { 
                 // Verificando se o navegador tem suporte aos recursos para redimensionamento 
                 if (!window.File || !window.FileReader || !window.FileList || !window.Blob) { 
                  alert('O navegador não suporta os recursos utilizados pelo aplicativo'); 
                  return; 
                 } 

                 // Alocando imagens selecionadas 
                 imagens = $('#imagem')[0].files; 

                 // Se selecionado pelo menos uma imagem 
                 if (imagens.length > 0) 
                 { 
                  // Definindo progresso de carregamento 
                  $('#progresso').attr('aria-valuenow', 0).css('width', '35%').html('Carregando..'); 
                   // Escondendo campo de imagem 
                  $('#imagem').hide(); 

                  // Iniciando redimensionamento 
                  imagem_atual = 0; 
                  redimensionar(); 
                 } 
                } 

                 /* 
                 Redimensiona uma imagem e passa para a próxima recursivamente 
                 */ 
                 function redimensionar() 
                 { 
                  // Se redimensionado todas as imagens 
                  if (imagem_atual > imagens.length) 
                  { 
                   // Definindo progresso de finalizado 
                   $('#progresso').html('Imagem enviada com sucesso'); 

                   // Limpando imagens 
                   limpar(); 

                   // Exibindo campo de imagem 
                   $('#imagem').show(); 

                   // Finalizando 
                   return; 
                  } 

                  // Se não for um arquivo válido 
                  if ((typeof imagens[imagem_atual] !== 'object') || (imagens[imagem_atual] == null)) 
                  { 
                   // Passa para a próxima imagem 
                   imagem_atual++; 
                   redimensionar(); 
                   return; 
                  } 

                  // Redimensionando 
                  resize.photo(imagens[imagem_atual], 800, 'dataURL', function (imagem) { 

                   // Salvando imagem no servidor 
                   $.post('ajax/salvar.php', {imagem: imagem}, function() { 

                    // Definindo porcentagem 
                    var porcentagem = (imagem_atual + 1)/imagens.length * 100; 

                    // Atualizando barra de progresso 
                    $('#progresso').text(Math.round(porcentagem) + '%').attr('aria-valuenow', porcentagem).css('width', porcentagem + '%'); 

                    // Aplica delay de 1 segundo 
                    // Apenas para evitar sobrecarga de requisições 
                    // e ficar visualmente melhor o progresso 
                    setTimeout(function() { 
                     // Passa para a próxima imagem 
                     imagem_atual++; 
                     redimensionar(); 
                    }, 100); 

                   }); 

                  }); 
                  } 

                   /* 
                 Limpa os arquivos selecionados 
                 */ 

我需要幫助,因爲我不知道如何解決上述代碼中的問題。我不是一個JavaScript編碼器。我只是想幫助一個不會說英語的朋友。 SOmeone請在允許上傳前寫下驗證文件大小的代碼部分,請

+1

的[JavaScript文件上傳大小驗證(https://stackoverflow.com/questions/3717793/javascript-file-upload-size-validation) – Tyr

+1

可能重複你會在服務器端進行,而不是在客戶端進行驗證。 – Bergi

回答

0

文件objcet提供了一個屬性來顯示File.You只需要在Object實例中使​​用file.size。 例如,您image = $('#imagem')[0].files[0];,這意味着圖像是File實例。現在你只需要閱讀image.sie知道你想知道什麼。 詛咒,你可以使用PHP或其他的後臺服務器來判斷它。 而html表單可以添加名爲「MAX_FILE_SIZE」的隱藏項目,但通過javascript知道大小並不容易。 所以最流行的方式做到這一點是使用file.size

+0

我不明白很多JavaScript。你能否在我的代碼裏寫下這些?請 ? – ALessandro

+0

,因爲我不希望腳本上傳圖像,如果該文件超過3MB ,,,請幫我把它寫在代碼中,請嗎? – ALessandro

+0

@ALessandro這很容易。我給你一個功能 –