您好,UncleToo欢迎您!  为了更好的浏览本站,请使用高版本浏览器
RSS  Tag     设为首页 | 加入收藏
 您所在的位置:首页 > PHP技术 > PHP应用

在PHP中使用Jquery AJAX动态添加多个文件上传

作者:UncleToo  来源:原创  日期:2014-02-17 8:11:14
收藏  评论:( 0 )  阅读:811

在PHP中使用Jquery AJAX动态添加多个文件上传

在之前,我们发布过一篇《PHP jQuery Ajax多个文件上传实例》,介绍了PHP+AJAX一次上传多个文件的例子,下面再给大家分享一可以手动添加多个文件上传的例子。

HTML代码:

<div id='dv1'>
                <div class="dv_add">  <a href="javascript:void(0);" id="anc_add_more">Add More File</a></div>
                <div class="progress">
                    <div class="bar"></div >
                    <div class="percent">0%</div >
                </div>
                <div id="status"></div>
                <form action="file.php" method="post" id='frm_upld' enctype="multipart/form-data">
                    <span id='spn_inputs'>
                        <input type="file" name="myfile[]"><br>
                        <input type="file" name="myfile[]"><br>
                        <input type="file" name="myfile[]"><br>
                    </span>
                    <input type="submit"   value="Upload Files">
                </form>        
            </div>

PHP代码:

<?php
$upload_dir = "uploads/";
if (isset($_FILES["myfile"])) {
    $no_files = count($_FILES["myfile"]['name']);
    for ($i = 0; $i < $no_files; $i++) {
        if ($_FILES["myfile"]["error"][$i] > 0) {
            echo "Error: " . $_FILES["myfile"]["error"][$i] . "<br>";
        } else {
            $temp = explode(".", $_FILES["myfile"]["name"][$i]);
            $extension = end($temp);
                 move_uploaded_file($_FILES["myfile"]["tmp_name"][$i], $upload_dir . $_FILES["myfile"]["name"][$i]);
                echo "<br><font color='green'>".$_FILES["myfile"]["name"][$i] . " Uploaded Successfully.</font><br>";        
        }
    }
}
?>

Jquery和CSS代码:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
    <script src="jquery.form.js"></script>
    <style>
        /* CSS for Uploader */
        body { padding: 30px }
        form { display: block; margin: 20px 5px; background: #eee; border-radius: 10px; padding: 15px;width: 367px; }
        .progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
        .bar { background-color: #66CCCC; width:0%; height:20px; border-radius: 3px; }
        .percent { position:absolute; display:inline-block; top:3px; left:48%; color: #E6F7F7;}
        #anc_add_more{background-color: #66CCCC; color: #FFF;padding: 7px;text-decoration: none; }
        .dv_add{margin-bottom: 25px;}
    </style>
    <script>
        /* JS for Uploader */
        $(function() {
            /* Append More Input Files */
            $('#anc_add_more').click(function() {
                $('#spn_inputs').append('<input type="file" name="myfile[]"><br>');
            });
        });
    </script>
<script>/* JS for Uploader */
    (function() {
        var bar = $('.bar');
        var percent = $('.percent');
        var status = $('#status');
        $('form').ajaxForm({
            beforeSend: function() {
                status.empty();
                var percentVal = '0%';
                bar.width(percentVal)
                percent.html(percentVal);
            },
            uploadProgress: function(event, position, total, percentComplete) {
                var percentVal = percentComplete + '%';
                bar.width(percentVal)
                percent.html(percentVal);
            },
            success: function() {
                var percentVal = '100%';
                bar.width(percentVal)
                percent.html(percentVal);
            },
            complete: function(xhr) {
                status.html(xhr.responseText);
            }
        });
    })();
</script>


点击下载完整源码





除非特别声明,本站所有PHP教程及其他教程/文章均为原创、翻译或网友投稿,版权均归UncleToo中文网所有, 转载请注明作者及出处。
原文网址:http://www.uncletoo.com/html/application/812.html
读完这篇文章后,你是否有所收获? 分享是一种生活的信念!
  • 0
  • 0
我来说两句
更多>>网友评论