Upload Datei - Zeilen anzeigen die noch über sind

EuroCent

EuroCent

Klappstuhl 2.0
Hallo zusammen,

ich sitze vor einem kleinen Problem und hoffe dass es auch klein bleibt :D

Und zwar laden wir Dateien (CSV) hoch, in denen mehr als 10Tausende von Daten hinterlegt sind.
Nun ist meine Frage, gibt es die Möglichkeit via Javascript zu ermitteln wie viele Datensätze es sind und die dann schleife für schleife durch laufen zu lassen?
Als Anzeige dachte Ich entweder eine Progressbar oder 0 von 0 bearbeitet oder so. :)

Gerne darf es auch ein Framework sein.

Die Daten werden dann per For-Schleife einzeln in die Datenbank geschrieben.
Bevor aber der Eintrag passiert, wird abgeglichen ob der Datensatz nicht schon vorhanden ist und Dated es nur ab statt einen Insert zu senden :)
 
Lösung
Sempervivum
Dieses verwendet das Form-Plugin und ist daher relativ kompakt:
Code: 
<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="utf-8">
    <title>File Upload</title>
</head>

<body>

    <div style="width:500px;margin:25px auto;">
        <form id="uploadForm" method="post" action="upload-progress-ajaxform-3.php">
            <div class="form-group">
                <label>File Upload</label>
                <input type="file" name="uploadFile" id="uploadFile" />
            </div>
            <div class="form-group">
                <input type="submit" id="uploadSubmit" value="Hochladen" class="btn btn-success" />
            </div>
            <div class="progress" id="progress">
                <div class="progress-bar"...
Das Standardverfahren beim Hochladen sieht so aus, dass es eine Progressbar gibt, die aber auf der Dateigröße basiert, d. h. z. B. 40% von 10 MB hochgeladen. Für so etwas habe ich Beispiele und könnte etwas heraussuchen. Die Progressbar kann man sicher umrechnen auf Datensätze, denn deren Anzahl zu ermitteln ist kein Problem-

Sicherlich ist es auch möglich, etwas zu programmieren, das Datensatz für Datensatz hochlädt und entsprechend eine Progressbar führt in der Art 317 von 800 Datensätzen hochgeladen. Wäre aber ein erhöhter Aufwand, weil man es neu programmieren müsste. Ich erwarte nicht, dass es dafür etwas vorgefertigtes gibt.
 
Sempervivum hat gesagt.:
Das Standardverfahren beim Hochladen sieht so aus, dass es eine Progressbar gibt, die aber auf der Dateigröße basiert, d. h. z. B. 40% von 10 MB hochgeladen. Für so etwas habe ich Beispiele und könnte etwas heraussuchen. Die Progressbar kann man sicher umrechnen auf Datensätze, denn deren Anzahl zu ermitteln ist kein Problem
Zum Vergrößern anklicken....

Das würde sicherlich schon vollkommen ausreichen. :)
Wäre dir da verbunden wenn Du solch ein Beispiel hast. :)
 
Dieses verwendet das Form-Plugin und ist daher relativ kompakt:
Code: 
<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="utf-8">
    <title>File Upload</title>
</head>

<body>

    <div style="width:500px;margin:25px auto;">
        <form id="uploadForm" method="post" action="upload-progress-ajaxform-3.php">
            <div class="form-group">
                <label>File Upload</label>
                <input type="file" name="uploadFile" id="uploadFile" />
            </div>
            <div class="form-group">
                <input type="submit" id="uploadSubmit" value="Hochladen" class="btn btn-success" />
            </div>
            <div class="progress" id="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <div id="tragetLayer"></div>
        </form>
        <div id="loader-icon" style="display:none">
            <img src="images/loader.gif" />
        </div>
    </div>

    <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.js"></script>


    <script>
        $(document).ready(function () {
            $('#uploadForm').submit(function (e) {
                if ($('#uploadFile').val()) {
                    e.preventDefault()
                    $('#loader-icon').show()
                    console.log("Loader Icon Show");
                    $(this).ajaxSubmit({
                        target: '#targetLayer',
                        beforeSubmit: function () {
                            $('.progress-bar').width('0%');
                            console.log("Progressbar 0%");
                        },
                        uploadProgress: function (event, position, total, percentComplete) {
                            console.log("Upload beginnt");
                            $('.progress-bar').width(percentComplete + '%');
                            $('.progress-bar').html('<div id="progress-bar-status">' + percentComplete + ' %</div>')
                        },
                        success: function () {
                            $('#loader-icon').hide();
                            $('#progress').hide();
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            console.log(jqXHR, textStatus, errorThrown);
                        },
                        resetForm: true
                    });
                    return false;
                }
            });
        });
    </script>
</body>

</html>
 
Lösung
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück