Upload de Arquivos com Barra de progresso

Eu queria saber algum tutorial em português de upload de arquivos como, Imagens, vídeos e músicas utilizando javascript, e que tenha um sistema de barra de progresso, eu tentei usando o AjaxForm mais não deu muito certo, meu formulário é:

<form action="Administrativo/Conteudo/Criar_Postagem.php" enctype="multipart/form-data" id="AdicionarPostagem" method="post" name="AdicionarPostagem">
 <img id="user" src="Administrativo/Conteudo/Fotos/<?=$_SESSION['user_foto']?>">
 <textarea id="Criar_Postagem" placeholder="<?=$Texto['Inicio']['Gerenciar']['Adicionar']['Variaveis'][1]?>" autofocus></textarea><br>
 <div>
 <strong>Anexar:</strong>
 <input type="file" style="display:none;" id="Imagem" accept="image/*" data-function="CriarPostagem" data-change="Imagem" />
 <input type="file" style="display:none;" id="Audio" accept="audio/*" data-function="CriarPostagem" data-change="Audio" />
 <input type="file" style="display:none;" id="Video" accept="video/*" data-function="CriarPostagem" data-change="Video" />
 <a data-function="PostLinks" data-modulo="Imagem" onClick="AdicionarPostagem.Imagem.click();"><i class="icon-camera"></i> <font><?=$Texto['Inicio']['Gerenciar']['Adicionar']['Variaveis'][2]?></font></a>
 <a data-function="PostLinks" data-modulo="Link"><i class="icon-link"></i> <font><?=$Texto['Inicio']['Gerenciar']['Adicionar']['Variaveis'][3]?></font></a>
 <a data-function="PostLinks" data-modulo="Audio" onClick="AdicionarPostagem.Audio.click();"><i class="icon-music"></i> <font><?=$Texto['Inicio']['Gerenciar']['Adicionar']['Variaveis'][4]?></font></a>
 <a data-function="PostLinks" data-modulo="Video" onClick="AdicionarPostagem.Video.click();"><i class="icon-play"></i> <font><?=$Texto['Inicio']['Gerenciar']['Adicionar']['Variaveis'][5]?></font></a>
 <div id="RetornoAnexos"></div>
 <div id="PreviwAnexos">
 <div id="Configurar_Upload" title="Clique Para expandir esta Imagem">
 <img id="VizualizarImagem" style="max-width:100%; height:auto;">
 <span data-function="remove-image"><i class="icon-remove-sign"></i></span>
 <progress id="ImageProgress" max="100" value="0"></progress>
 </div>
 <div id="Audio_Upload">
 <li>
 <p><?=$Texto['Inicio']['Gerenciar']['Adicionar']['Variaveis'][9]?></p>
 <p><?=$Texto['Inicio']['Gerenciar']['Adicionar']['Variaveis'][10]?></p>
 <p><?=$Texto['Inicio']['Gerenciar']['Adicionar']['Variaveis'][11]?></p>
 <p><?=$Texto['Inicio']['Gerenciar']['Adicionar']['Variaveis'][13]?></p>
 </li>
 <li>
 <p data-child="nomemusica">musica.mp3</p>
 <p data-child="tamanhomusica">80MB</p>
 <p data-child="Excluirmusica" data-function="remove-music"><a><?=$Texto['Inicio']['Gerenciar']['Adicionar']['Variaveis'][11]?></a></p>
 <p data-child="upload">0%</p>
 </li>
 </div>
 </div>
 </div>
 <span id="Erros"></span>
 <div style="margin-top:0px; margin-bottom:0; position:relative; top:5px;" data-array="div-compartilhar">
 <strong style="position:relative; top:10px;">Para:</strong>
 <div id="Criar_Privacidade">
 <div data-valor="0" data-organizacao="conjunto" id="Amigos"><font><?=$Texto['Inicio']['Home']['Postagens']['Privacidade'][0]?></font> <i data-function="remove_div" class="icon-remove"></i></div>
 <span style="display:inline-block;"><input type="text" placeholder="<?=$Texto['Inicio']['Gerenciar']['Adicionar']['Variaveis'][7]?>"></input></span>
 <input type="hidden" name="inputPrivacidade" id="inputPrivacidade" value="0" />
 <ul data-list="Grupos">
 <li data-value="<?=$Texto['Inicio']['Home']['Postagens']['Privacidade'][0]?>" data-organizacao="conjunto" data-valor="0"><?=$Texto['Inicio']['Home']['Postagens']['Privacidade'][0]?></li>
 <li data-value="<?=$Texto['Inicio']['Home']['Postagens']['Privacidade'][1]?>" data-organizacao="conjunto" data-valor="1"><?=$Texto['Inicio']['Home']['Postagens']['Privacidade'][1]?></li>
 <li data-value="<?=$Texto['Inicio']['Home']['Postagens']['Privacidade'][2]?>" data-organizacao="conjunto" data-valor="2"><?=$Texto['Inicio']['Home']['Postagens']['Privacidade'][2]?></li>
 <li data-value="<?=$Texto['Inicio']['Home']['Postagens']['Privacidade'][3]?>" data-organizacao="conjunto" data-valor="3"><?=$Texto['Inicio']['Home']['Postagens']['Privacidade'][3]?></li>
 <li data-value="<?=$Texto['Inicio']['Home']['Postagens']['Privacidade'][4]?>" data-organizacao="conjunto" data-valor="4"><?=$Texto['Inicio']['Home']['Postagens']['Privacidade'][4]?></li>
 <li data-value="<?=$Texto['Inicio']['Home']['Postagens']['Privacidade'][5]?>" data-organizacao="conjunto" data-valor="5"><?=$Texto['Inicio']['Home']['Postagens']['Privacidade'][5]?></li>
 <li data-value="<?=$Texto['Inicio']['Gerenciar']['Adicionar']['Variaveis'][6]?>" data-organizacao="conjunto" data-valor="6" data-frase="<?=$Texto['Inicio']['Gerenciar']['Adicionar']['Variaveis'][12]?>"><?=$Texto['Inicio']['Gerenciar']['Adicionar']['Variaveis'][6]?></li>
 </ul>
 <ul data-list="Amigos">
 <li data-value="<img src='Administrativo/Conteudo/Fotos/<?=$_SESSION['user_foto']?>' width='20' style='max-width:100%;' >">
 <span>
 <img src="Administrativo/Conteudo/Fotos/<?=$_SESSION['user_foto']?>" width="30" style="max-width:100%;" >
 </span>
 <span>
 <strong>Leonardo Rodrigues</strong><br>
 Progamador CheckPoint
 </span>
 </li>
 <li data-value="<img src='Administrativo/Conteudo/Fotos/<?=$_SESSION['user_foto']?>' width='20' style='max-width:100%;' >">
 <span>
 <img src="Administrativo/Conteudo/Fotos/<?=$_SESSION['user_foto']?>" width="30" style="max-width:100%;" >
 </span>
 <span>
 <strong>Leonardo Rodrigues</strong><br>
 Progamador CheckPoint
 </span>
 </li>
 <li data-value="<img src='Administrativo/Conteudo/Fotos/<?=$_SESSION['user_foto']?>' width='20' style='max-width:100%;' >">
 <span>
 <img src="Administrativo/Conteudo/Fotos/<?=$_SESSION['user_foto']?>" width="30" style="max-width:100%;" >
 </span>
 <span>
 <strong>Leonardo Rodrigues</strong><br>
 Progamador CheckPoint
 </span>
 </li>
 </ul>
 </div>
 </div>
 </form>