脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-一个简单的ajax上传 上传进度显示，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 CSS Code

<style> &nbsp;

form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }  

#PRogress { posITion:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }  

#bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }  

#PErcent { position:absolute; display:inline-block; top:3px; left:48%; }  

</style>  

 

XML/HTML Code

<form id=";myForm" action="upload.php" method="post" enctype="multipart/form-data">  

     <input type="file" size="60" name="myfile">  

     <input type="submit" value="Ajax File Upload">  

</form>  

   

   

 <p id="progress">  

        <p id="bar"></p>  

        <p id="percent">0%</p >  

</p>  

<p id="message"></p>

 

JavaScript Code

<script>  

$(document).ready(function()  

{  

  

    VAR options = {   

    beforeSend: function()   

    {  

        $("#progress").show();  

        //clear everything  

        $("#bar").width('0%');  

        $("#message").htML("");  

        $("#percent").html("0%");  

    },  

    uploadProgress: function(event, position, total, percentComplete)   

    {  

        $("#bar").width(percentcomplete+'%');  

        $("#percent").html(percentComplete+'%');  

  

      

    },  

    success: function()   

    {  

        $("#bar").width('100%');  

        $("#percent").html('100%');  

  

    },  

    complete: function(response)   

    {  

        $("#message").html("<font color='green'>"+response.responseText+"</font>");  

    },  

    error: function()  

    {  

        $("#message").html("<font color='red'> ERROR: unable to upload files</font>");  

  

    }  

       

};   

  

     $("#myForm").ajaxForm(options);  

  

});  

  

</script>  

 upload.php

 

PHP Code

<?php  

$output_dir = "../upload/";  

  

  

if(isset($_FILES["myfile"]))  

{  

    //Filter the file types , if you want.  

    if ($_FILES["myfile"]["error"] > 0)  

    {  

      echo "Error: " . $_FILES["file"]["error"] . "<br>";  

    }  

    else  

    {  

        //move the uploaded file to uploads folder;  

        move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir. $_FILES["myfile"]["name"]);  

      

     echo "Uploaded File :".$_FILES["myfile"]["name"];  

    }  

  

}  

?>  

 

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-一个简单的ajax上传 上传进度显示全部内容，希望文章能够帮你解决javascript代码实例教程-一个简单的ajax上传 上传进度显示所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。