#

jQuery: 1-Button File-Upload mit Autostart

 Date 16.03.2018 Views 7.308

jQuery: 1-Button File-Upload mit Autostart, automatisches Upload von Dateien vom Browser zum Server

 

script Code

Dieses Beispiel zeigt, wie man in HTML, jQuery, javascript ein Foto-Upload erstellt, welche

·       Aus nur 1-Button besteht

·       Und automatisch nach der Auswahl mit dem Upload started.

 

Beispiel Ansicht:

FileUpload mit einfachem javascript, jQuery und HTML erstellt

 

Schritt 1

 

Mit diesem HTML,CSS Code erstellt man ein File-Upload Element, welches nur einen Button anzeigt

<form method="post" enctype="multipart/form-data">

    <input type="file" id="files_input_field" name="files" multiple class="inputfield_upload" onchange="upload_files();"/>

    <input type="button" id="select_and_upload_button" value="Upload Photos.." />

</form>

 

 

<style>

    .inputfield_upload {

        display: block;

        visibility: hidden;

        width: 0;

        height: 0;

    }

</style>

 

Ansicht:

Upload Photos Button eines Datei -Uploaders.

 

Schritt 2

Im script Block fügt man eine upload-function hinzu.

function upload_files() {..}

 

Diese Funktion wird gestarted, sobald im unsichtbaren Eingabeelement eine Änderung vorliegt.

Die Funktion wird im onchange-Event eingefügt in javascript-Schreibweise.

<input type="file" id="files_input_field" multiple class="inputfield_upload" onchange="upload_files();"/>

 

Der sichtbare Button führt beim eigenen Click-event einen Click auf dem unsichtbaren Upload-Element durch.

Der event-listener wird im jQuery-Block eingefügt.

$("#select_and_upload_button").click(function () { $("#files_input_field").click(); });

 

Vorgehensweise.

Sobald auf den Button: Select Photos geklickt wird, löst dieser den Dialog des File-Auswahl-Elementes aus.

Sobald dort eine Änderung onChange ausgelöst wird, kann diese die Funktion upload_files() ausführen.

 

 

Javascript und jQuery script Block

 

@*------------< jQuery-script >------------*@

<script type="text/javascript" src="~/lib/jquery/dist/jquery.js"></script>

<script>

    //----< events >----

    $("#select_and_upload_button").click(function () { $("#files_input_field").click(); });

   

 

    //--------< functions >--------

    function upload_files() {

        //------< upload_files() >------

        //--< get selected files >--

        var fileUpload = $("#files_input_field").get(0);

        var files = fileUpload.files;

        if (files.length == 0) return;

 

        //< load into FormData >

        var data = new FormData();

        for (var i = 0; i < files.length; i++) {

            data.append(files[i].name, files[i]);

        }

        //</ load into FormData >

        //--</ get selected files >--

 

        //--< ajax upload >--

        $.ajax({

            type: "POST",

            url: "Demo_02/Demo/UploadFilesAjax",

            contentType: false,  //default: 'application/x-www-form-urlencoded; charset=UTF-8'

            processData: false,  //default: data, other DOMDocument

            data: data,          //Type: PlainObject or String or Array

            //password:string    // HTTP access authentication

            //username:string    // HTTP access authentication

            success: function (message) {

                alert(message);

            },

            error: function () {

                alert("There was error uploading files!");

            }

        });

        //------</ upload_files() >------

    }

        //--------</ functions >--------

</script>

@*------------</ jQuery-script >------------*@

 

Die Dateien kommen aus einem Asp Net Core MVC Demo Projekt

 

Kompletter Code der asp.Net Core MVC Seite

 

@*------------< jQuery-script >------------*@

<script type="text/javascript" src="~/lib/jquery/dist/jquery.js"></script>

<script>

    //----< events >----

    $("#select_and_upload_button").click(function () { $("#files_input_field").click(); });

   

 

    //--------< functions >--------

    function upload_files() {

        //------< upload_files() >------

        //--< get selected files >--

        var fileUpload = $("#files_input_field").get(0);

        var files = fileUpload.files;

        if (files.length == 0) return;

 

        //< load into FormData >

        var data = new FormData();

        for (var i = 0; i < files.length; i++) {

            data.append(files[i].name, files[i]);

        }

        //</ load into FormData >

        //--</ get selected files >--

 

        //--< ajax upload >--

        $.ajax({

            type: "POST",

            url: "Demo_02/Demo/UploadFilesAjax",

            contentType: false,  //default: 'application/x-www-form-urlencoded; charset=UTF-8'

            processData: false,  //default: data, other DOMDocument

            data: data,          //Type: PlainObject or String or Array

            //password:string    // HTTP access authentication

            //username:string    // HTTP access authentication

            success: function (message) {

                alert(message);

            },

            error: function () {

                alert("There was error uploading files!");

            }

        });

        //------</ upload_files() >------

    }

        //--------</ functions >--------

</script>

@*------------</ jQuery-script >------------*@

 

 

Asp.Net Core MVC Controller

C#

Der asp Core MVC Controller nimmt die Dateien aus der ajax-Anfrage entgegen und speichert diese in einem User-Upload PFad

        [HttpPost]

        public async Task<IActionResult> UploadFilesAjax()

        {

            //< init >

            long uploaded_size = 0;

            string path_for_Uploaded_Files = _hostingEnvironment.WebRootPath + "\\User_Files\\_Upload_Folder\\";

            //</ init >

 

            //< get form_files >

            //IFormFile uploaded_File

            var uploaded_files = Request.Form.Files;

            //</ get form_files >

 

            //------< @Loop: Uploaded Files >------

            int iCounter = 0;

            string sFiles_uploaded = "";

            foreach (var uploaded_file in uploaded_files)

            {

                //----< Uploaded File >----

                iCounter++;

                uploaded_size += uploaded_file.Length;

                sFiles_uploaded += "\n" + uploaded_file.FileName;

 

                //< Filename >

                string  uploaded_Filename = uploaded_file.FileName;                

                string new_Filename_on_Server = path_for_Uploaded_Files + "\\" + uploaded_Filename;

                //</ Filename >

 

                //< Copy File to Target >

                using (FileStream stream = new FileStream(new_Filename_on_Server, FileMode.Create))

                {                   

                    await uploaded_file.CopyToAsync(stream);

                }

                //< Copy File to Target >

                //----</ Uploaded File >----

            }

            //------</ @Loop: Uploaded Files >------

 

 

            string message = "Upload successful!\n files uploaded:" + iCounter + "\nsize:" + uploaded_size  + "\n" + sFiles_uploaded ;

            return Json(message);

        }

 

Mobile

.