/////criar o arquivo com nome de upload-arquivo.php e inserir apenas este conteúdo que está em php/////
<?php
if ($_FILES) {
$arquivo = array_shift($_FILES);
$nomeArquivo = $arquivo['name'];
$upload = move_uploaded_file($arquivo['tmp_name'], "upload/arquivo/". $nomeArquivo);
if ($upload == true) {
$results = array("nome_arquivo" => $nomeArquivo, "results" => true, "msg" => "Arquivo inserido com sucesso!");
} else {
$results = array("results" => false, "msg" => "Erro ao tentar fazer upload de arquivo. Tente novamente mais tarde!");
}
} else {
$results = array("results" => false, "msg" => "O arquivo ainda não foi escolhido!");
}
exit(json_encode($results));
?>
/////////////////////////////////////////////
//// criar o arquivo na mesma pasta que está o upload-arquivo.php com o nome index.html e inserir este conteúdo abaixo////
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
function uploadArquivo(selectorForm){
$(selectorForm).ajaxForm({
uploadProgress: function (event, position, total, percentComplete) {
$(selectorForm + " #upload_in_progress").css("display", 'block');
$(selectorForm + ' progress').attr('value', percentComplete); //CARREGAR A BARRA DE PROGRESSO
$(selectorForm + ' #porcentagem').html(percentComplete + '%'); ///MOSTRA A PORCENTAGEM DO CARREGAMENTO
},
success: function (res) {
$(selectorForm + ' progress').attr('value', '100');
$(selectorForm + ' #porcentagem').html('100%');
var params = JSON.parse(res); //recebe o resultado retornado em json do php
if (params.results == true) {
alert(params.msg);
//caso procedimento foi realizado com sucesso insira o código aqui
} else {
alert(params.msg);
//caso procedimento não foi realizado com sucesso insira o código aqui
}
},
complete: function (xhr) {
$(selectorForm + " #upload_in_progress").css("display", 'none');
$(selectorForm + ' progress').attr('value', 0);
$(selectorForm + ' #porcentagem').html('0%');
}
})
$(selectorForm).submit();
}
</script>
</head>
<body>
<form action="upload-arquivo.php" id="formEnviarArquivo" enctype="multipart/form-data" >
Escolha o arquivo para download <br />
<input type="file" name="arquivo" id="arquivo" /> <br />
<button onclick="uploadArquivo('#formEnviarArquivo')">Enviar arquivo</button>
<div id="upload_in_progress" class="upload_infobar" style="display: none;width: 100%">
<progress value="0" max="100" style="width:100%"></progress>
<img src="img/ajax-loader.gif" width="16" height="16">
Upload em andamento
<span id="porcentagem">0%</span>
</div>
</form>
</body>
</html>
Upload de arquivo e imagem com ajax, js, php e html utilizando a barra de progresso
Se este conteúdo foi útil para você ou se encontrou algum erro, deixe seu comentário avaliando ou informando o erro.
segunda-feira, 23 de novembro de 2015
0 comentários:
Postar um comentário