Read | Practice | Advance
We upload any type of files from client to server using html element
<input id='myFile' type="file" />
And using ASP.NET control
<asp:FileUpload ID='myFile' runat="server" />
We can restrict to upload only some types of file using specifying the accept attribute value to file content type like bellow
<input id='myFile' type="file" accept="image/gif, image/jpeg, image/png" /> <asp:FileUpload ID='myFile' runat="server" accept="image/gif, image/jpeg, image/png" />
Client side validation
<script type="text/javascript"> var allowFileTypes = ['image/gif', 'image/jpeg', 'image/png']; function validateFileTypes() { var files = document.getElementById("myFile").files; if (files && files[0]) { //alert(files[0].type); if (allowFileTypes.indexOf(files[0].type) != -1) return true; else { alert('file type isn’t allowed'); return false; } } } </script>
if (myFile.HasFile) { if (myFile.PostedFile.ContentType.ToLower().Contains("image") == false) { //message to user return; } }
Client side validation
<script type="text/javascript"> var allowFileSize = 50*1024; //50KB function validateFileSize() { var files = document.getElementById("myFile").files; if (files && files[0]) { //alert(files[0].size); if (files[0].size <= allowFileSize) return true; else { alert('file size exceeds the max size 50KB'); return false; } } } </script>
if (myFile.HasFile) { if (myFile.PostedFile.ContentLength > 50*1024) { //message to user return; } }
We need to add an attribute onchange to the element like bellow
<input id='myFile' type="file" accept="image/gif, image/jpeg, image/png" onchange="return showPreview(this);" /> <asp:FileUpload ID='myFile' runat="server" accept="image/gif, image/jpeg, image/png" onchange="return showPreview(this);" />
And the function is bellow
function showPreview(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { document.getElementById("img#preview").src = e.target.result; }; reader.readAsDataURL(input.files[0]); } return true; }
For more about styling the file uploader, see the link http://www.quirksmode.org/dom/inputfile.html
Ref: http://hrn2k1.blogspot.com/2015/11/all-about-file-upload-control-in-web.html
Nice article indeed. I really appreciate your thoughts.