使用Ajax的笨文件上传(Ajax File Upload using Codeigniter)

我试图上传使用笨和Ajax的图像。我已经有AJAX方法插入域值到数据库，什么是上传我的文件最简单的做法。这里的JQuery的自定义函数：

(function($){
    jQuery.fn.ajaxSubmit =
        function() {
            $(this).submit(function(event) {
                event.preventDefault();
                var url = $(this).attr('action');                       
                var data = $(this).serialize();

                $.ajax({
                    url: url,
                    type: "POST",
                    data: data,
                    dataType: "html",
                    success: function(msg) {
                               $('#main').html(msg);
                             }
                       });

                 return this;
             });
         };
})(jQuery);

我这样称呼它：

$(document).ready(function() {    
    $('#myForm').ajaxSubmit();
});

该功能工作正常，数据被插入到数据库中，我甚至有获得在模型上载图像之前创建的一些目录，它们被创建，但图像不是在所有上传。

我知道我需要使用一个隐藏的iframe来完成这项工作，但我不完全知道如何集成了在我的代码。

我用笨，jQuery和Malsup形式插件创建定制的Ajax文件上传 。下面是HTML和JavaScript / CSS代码。它还支持多文件上传和进展。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Ajax UP Bar</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://malsup.github.com/jquery.form.js"></script>
        <script type="text/javascript">
            $(document).ready( function() {
                $('form').submit( function() {
                    var bar = $('.bar');
                    var percent = $('.percent');
                    var status = $('#status');
                    $(this).ajaxForm({
                        beforeSend: function() {
                            status.html();
                            var percentVal = '0%';
                            bar.width(percentVal)
                            percent.html(percentVal);
                        },
                        uploadProgress: function(event, position, total, percentComplete) {
                            var percentVal = percentComplete + '%';
                            bar.width(percentVal)
                            percent.html(percentVal);
                        },
                        complete: function(xhr) {
                            status.html(xhr.responseText);
                        }
                    });
                });
            });
        </script>
    </head>

    <body>

        <form method="post" action="<?php echo base_url('users/upload/'); ?>" enctype="multipart/form-data">
            <label for="upload">Select : </label>
            <input type="file" name="upload[]" id="upload" multiple="multiple" />
            <input type="submit" name="fsubmit" id="fsubmit" value="Upload" />
        </form>

        <div class="progress">
            <div class="bar"></div >
            <div class="percent">0%</div >
        </div>

        <div id="status"></div>

    </body>
</html>
<style>
    body { padding: 30px }
    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>

在CodeIgniter的控制器：

<?php

if (!defined('BASEPATH'))
    exit('No direct script access allowed');

class Users extends CI_Controller
{

    public function __construct()
    {
        parent::__construct();
    }

    public function upload()
    {
        if (isset($_FILES['upload']['name'])) {
            // total files //
            $count = count($_FILES['upload']['name']);
            // all uploads //
            $uploads = $_FILES['upload'];

            for ($i = 0; $i < $count; $i++) {
                if ($uploads['error'][$i] == 0) {
                    move_uploaded_file($uploads['tmp_name'][$i], 'storage/' . $uploads['name'][$i]);
                    echo $uploads['name'][$i] . "\n";
                }
            }
        }
    }

}

希望这可以帮助你。谢谢！！