Upload de Arquivos com Barra de progresso

[LeoO_DF 22]

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>

[reebr 94]

Posta o script que você disse 'não ter dado muito certo'.

[LeoO_DF 22]

$('form#AdicionarPostagem').ajaxForm({		uploadProgress: function(event, position, total, percentComplete) {        	$('progress#ImageProgress').attr('value',percentComplete);			$('progress#ImageProgress').css("content",percentComplete+'%');        },                success: function(data) {        	$('progress#ImageProgress').attr('value','100');            $('progress#ImageProgress').css("content",'100%');                         	},   		error : function(){        	$('span#Erros').html('<?php echo $Texto['Inicio']['Gerenciar']['Adicionar']['Variaveis'][14]; ?>');      	},        dataType: 'json',        url: 'Administrativo/Conteudo/Criar_Postagem.php',        resetForm: true	}).submit();	

Ninguém?

[wanderval 19]

tenta utilizar HTTPRequest para o upload e barra de progresso