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