1

codeigniter と ajax を使用して画像をアップロードしようとしています。フィールド値をDBに挿入するための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 を使用する必要があることはわかっていますが、それをコードに統合する方法がよくわかりません。

4

1 に答える 1

12

CodeIgniter、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";
                }
            }
        }
    }

}

これがお役に立てば幸いです。ありがとう！！

于 2012-07-19T09:04:03.317 に答える