自定义input file 样式

效果图

HTML部分

<input type="file" id="file" value="" class="hidden" />
<input type="text" id="uploadImg" value="" />
<button class="btn_sc" onclick="selectFile()">上传图片</button>

css部分

.hidden{
    display:none
}

js部分

<script>
	function selectFile() {
		$("#file").trigger("click");
	}
	$(document).ready(function() {
		$("#file").change(function() {
		var index = $(this).val().lastIndexOf("\\");
        var sFileName = $(this).val().substr((index+1));
		$("#uploadImg").val(sFileName);
	    });
	});
</script>

 

思路：点击上传按钮，取到file的value值加到id为uploadImg这个输入框里