Styles for uploading files

On the internet for a long time to upload the file style, and did not fit their own, now recommend a style to everyone, you can see whether you choose the file and file name. The effect is as follows:

The HTML code is as follows:

<Divclass= "Uploading">    <span>Upload file:</span>    <inputclass= ' View 'ID= "Viewfile"type= "text"onmouseout= "document.getElementById (' UploadFile '). style.display = ' none ';"ReadOnly/>    <labelclass= "Filelab" for= "UploadFile"onmouseover= "document.getElementById (' UploadFile '). style.display = ' block ';">Browse</label>     <inputclass= "Upload"ID= "UploadFile"name= "UploadFile"type= "File" /></Div>

The CSS code is as follows:

. Uploading{position:relative;Height:28px;}. Uploading span{float: Left;Line-height:28px;}. Uploading. View{float: Left;width:120px;Height:26px;padding:0 0 0 10px;Line-height:26px;Border:1px solid #d2d2d2;}. Uploading. Filelab{Display:Inline-block;float: Left;width:68px;Height:28px;Line-height:28px;text-align:Center;Color:#fff;background:#bd3a39;}. Uploading. Upload{position:Absolute; Left:302px;width:68px;Height:28px;Opacity:0;Filter:Alpha (opacity=0);}

The final JS code is as follows:

 1  var  uploadfile = document.getElementById (' UploadFile '  2  var  viewfile = document.getElementById (' Viewfile '  3  uploadfile.onchange = function   () { 4  var  value = Uploadfile.value.split (' \ \ ') [2]| |      5  viewfile.setattribute (' value ' 

For the 4th line of code, it may be a bit difficult to understand, if you print out the Uploadfile.value value, it is ' C:\fakepath\demo.rar ', ' C:\fakepath\ ' is the auto-generated false path, as long as the false path is deleted on the line, through split method to separate the string with ' \ ' to generate an array ["C:", "Fakepath", "Demo.rar"], take out the array subscript 2 is the desired filename ' demo.rar ', if the file is re-selected to cancel the upload, will also trigger the Change event, The Uploadfile.value value is empty and the previously selected file is deleted.

Styles for uploading files