Ajax File Upload mit Codeigniter

Ich versuche, ein Bild hochzuladen mit codeigniter und ajax. Ich habe bereits die ajax-Methode zum einfügen der Werte in die DB, was ist der einfachste und einfachste Weg zum hochladen meiner Datei.
Hier ist das JQuery custom-Funktion:

(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);

Ich nenne es so:

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

Die Funktion funktioniert einwandfrei, die Daten wird in die Datenbank eingefügt und ich habe sogar einige Verzeichnisse, die erstellt werden in dem Modell vor dem hochladen das Bild, Sie sind erstellt, aber das Bild wird nicht hochgeladen, an alle.

Ich weiß, ich muss noch eine versteckte Iframe um die Arbeit zu tun, aber ich bin nicht ganz wissen, wie zu integrieren, dass in meinem code.

Ich fand diesen link: github.com/johnlanz/jquery-fileuploader-codeigniter Es enthält eine Bibliothek führt, dass die Datei Hochladen, ohne etwas zu ändern in der codeigniter-controller und Modell.

InformationsquelleAutor Sarah | 2012-07-19

  1. 12

    Ich erstellte benutzerdefinierte Ajax File Uploader mit CodeIgniter, jQuery und Malsup form plugin. Hier ist der HTML-und Javascript - /CSS-code. Es unterstützt auch mehrere Datei-Uploads und-Fortschritte.

    <!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>

    In CodeIgniter Controller :

    <?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";
                }
            }
        }
    }

}

    Hoffe, dies hilft Ihnen. Danke!!

    Sieht toll aus, ill give it a try.
    Toll, aber ajaxForm schien nicht zu arbeiten, die ich verwendet ajaxSubmit statt mit e.preventDefault(). Der rest ist genial
    Und in form seiner beforeSubmit und success
    würden Sie bitte geben Sie uns die komplette Letzte code? Leider weiß ich sehr wenig von jQuery. Danke
    Danke Jungs, ich habe es und es funktioniert jetzt mit dem offiziellen Beispiel auf malsup.com/jquery/form/progress.html. Danke nochmal

    InformationsquelleAutor Madan Sapkota

Schreibe einen Kommentar