Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

HTML Filedialog Datei-Erweiterungen festlegen zur Laufzeit mit accept in javascript

20.07.2021 (👁13268)

HTML Filedialog Datei-Erweiterungen festlegen zur Laufzeit mit accept jpg in javascript

In html kann man eine Dateiauswahl für einen Upload definieren indem man einem Input Feld das attribut: accept auf Dateierweiterungen einstellt.

input_Files.attributes["accept"].value = ".jpg,.png,.tiff,.jpeg,.bmp,.gif"

 

Dateidialog Fotos:

HTML Web Filedialog für Bilder, Fotos:

".jpg,.png,.tiff,.jpeg,.bmp,.gif oder image/*

Oder Filedialog für Upload für Videos mit mp4 und video/*

Javascript Code:

verschiedene Datei-Formate hochladen in einem Filedialog

Der folgende Javascript Code erstellt für Bilder, Videos und Office Dateien jeweils einen

function editor_open_FileDialog_Images() {

    //------< editor_open_FileDialog_Images() >------

    editor_Remove_all_ImageResize_Divs();

    editor_open_FileDialog("Images", ".jpg,.png,.tiff,.jpeg,.bmp,.gif");; //or image/*"

    //------</ editor_open_FileDialog_Images() >------

}

function editor_open_FileDialog_Videos() {

    //------< editor_open_FileDialog_Videos() >------

    editor_open_FileDialog("Videos", ".mp4");; //video/*"

    //------</ editor_open_FileDialog_Videos() >------

}

function editor_open_FileDialog_Files() {

    //------< editor_open_FileDialog_Videos() >------

    editor_open_FileDialog("Files", ".zip,.pdf,.doc?,.dot?,.xls?,.xlt?,.ppt?,.css,.txt,.csv,.cs,.json,.ts,.html,.js,.map,.ico,.user,.cshtml,*.accdb,.  flp");; //*"

    //------</ editor_open_FileDialog_Videos() >------

}

 

function editor_open_FileDialog(sFileType,sExtensions) {

    //------< editor_open_FileDialog() >------

    //editor_Remove_all_ImageResize_Divs();

 

    varUpload_Files_Type = sFileType;

    var input_Files = document.getElementById("files_input_field");

    input_Files.attributes["accept"].value = sExtensions;  //".jpg";

    input_Files.click();    //*do not debug at this point, debug at this code-point in browser does not work

    //------</ editor_open_FileDialog() >------

}

Dabei muss da Form Feld vom Typ Html Input vorhanden sein

        @*----< Upload_Images_Dialog >----*@

 

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

        <input type="file" id="files_input_field" name="files" accept="" multiple style="visibility:hidden; height:0px;width:0px;" onchange="upload_Files_onChanged();" />

        @*image/**@

    </form>

        @*----</ Upload_Images_Dialog >----*@

HTML Frontend Code

@*-------< Right_Toolbar >-------*@

    <div id="divRight_Toolbar" class="divToolbarArticleEdit">

        @*--------< divInteract >--------*@

        <div id="divToolbarFloatArticle" class="divToolbarFloatArticle">

 

            <a title="View" class="fab_Button" onclick="save_to_View();">

                <span class="fab_Icon"></span>

            </a>

            <hr style="margin:40px;;" />

            <a title="Insert Images" class="fab_Button fab_Button_edit" onclick="editor_open_FileDialog_Images();">

                <span class="fab_Icon">+📸</span>

            </a>

            <a title="Insert Videos" class="fab_Button fab_Button_edit" onclick="editor_open_FileDialog_Videos();">

                <span class="fab_Icon">+🎞</span>

            </a>

            <a title="Upload and Insert Any files" class="fab_Button fab_Button_edit" onclick="editor_open_FileDialog_Files();">

                <span class="fab_Icon">+📎</span>

            </a>

            <a title="Delete" class="fab_Button fab_Button_red" onclick="Delete_Record();">

                <span class="fab_Icon">🗑</span>

            </a>

 

            <progress id="ctlProgress" value="0" max="100" style=" visibility:hidden;display:inline-block;width:100%;height:30px;position:fixed;bottom:0px;left:0px"></progress>

            <br />

 

 

        </div>

        @*--------</ DivInteract >--------*@

    </div>

    @*-------</ Right_Toolbar >-------*@

CSS Style für die Buttons

 

.fab_Button {

    display: inline-flex;

    padding: 20px;

    height: 70px;

    width: 70px;

    justify-content: center;

    margin-bottom: 4px;

    background-color: limegreen;

    font-size: x-large;

    border-radius: 40px;

    box-shadow: 4px 4px 8px darkgrey;

}

 

.fab_Button_edit {

    background-color: dodgerblue;   

}

.fab_Button_red {

    background-color: indianred;

}

.fab_Button:hover {

    background-color: lawngreen;   

}

.fab_icon {

}

 

.divToolbarArticle{

    width:40px;

    flex-direction:column;

   

}