Snippet: FileUpload

Fileupload

/********************************
				HTML
*********************************/
<div class="upldFile">
    	<p class="set16p">Upload a new photo</p>
    	<input type="text" name="broFile" class="text-input button" value="" style="display: inline; width: 300px;">
        <div class="inputType-file">
             <input class="file_1" type="file" size="1"/>
        </div>
        <p class="set16p sand">Acceptable image formats: jpg, png, and gif • Image size must be less than 200KB.  </p>
</div>
/*********************************
				JQuery
**********************************/
	//********* Upload File Get Name name**************
    $('.inputType-file').on('change',function(){
        var $this=$(this);
        var j=$(this).children('input.file_1'),
            $val = j.val(),
              valArray = $val.split('\\'),
              newVal = valArray[valArray.length-1];
              $('input[name=broFile]').val(newVal);
    });

/***********************/
.upldFile{
display:block;
line-height:1.8em;
margin-bottom:10px;	
}
.text-input{
	width:280px;
	height:20px;
	padding:5px 10px;
	border-radius:5px;
	behavior: url(PIE.htc);
	border:1px solid #949494;
}
/************************************************/
				/*INPUT TYPE FILE*/
/************************************************/
.inputType-file{
	width:80px;
	height:30px;
	float: left;
	margin: 1.5px 0px;
	margin-left: 20px;
	display: inline;
	position: absolute;
	overflow: hidden;
	/*cursor: pointer;*/
	background-color:#FFF;
	background:url(../images/browse.png);
}
/*span.input-f{
	color: #fff;
	display: block;
	/*background:red;*/
}*/
.file_1{
	position: relative;
	width: 150px;
	height: 29px;
	display: inline;
	/*cursor: pointer;*/
	opacity: 1;
	margin-left: -22px;
}
/*.inputType-file{
	float: left;
	background-color:#444444;
	border:2px solid #666;
	width:102px;
	height:30px;
	border-radius:5px;
	float:left;
}*/
input[type="file"]{
	position: relative;
	-webkit-appearance: none;
   text-align: left;
   -webkit-rtl-ordering:  left;
   z-index: 2;
   height: 30px;
   margin-left: -32px;
   margin-left: -40px\9;
   opacity: 0;
   -moz-opacity: 0;
   filter:alpha(opacity=0);
   border:none;
   /*cursor: pointer;*/
}
input[type="file"]:-webkit-file-upload-button{
   -webkit-appearance: none;
   margin: 1px 1px 1px 0px;
   border: 1px solid #aaaaaa;
   border-radius: 4px;
   background-image: -webkit-gradient(linear, left bottom, left top, from(#d2d0d0), to(#f0f0f0));
   background-image: -moz-linear-gradient(90deg, #d2d0d0 1%, #f0f0f0 100%);
   opacity: 0;
   -moz-opacity: 0;
   filter:alpha(opacity=0);
   border:none;
   cursor: pointer;
}