<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Show upload button instead of file upload</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {
$("#fileupload1").change(function () {
$("#FileName").html($("#fileupload_Dilog").val().substring($("#fileupload_Dilog").val().lastIndexOf('\\') + 1));
});
});
</script>
<style type="text/css">
.button {
background: #333;
color: #fff;
padding: 10px 15px;
border-radius: 5px;
}
.button:hover {
background: #51A8CA;
}
</style>
</head>
<body>
<form id="form1>
<div><br />
<input style="display:none" type="file" id="fileupload_Dilog" />
<input type="button" class="button" id="btnUpload" onclick='$("#fileupload_Dilog").click()' value="Upload"/>
<span id="FileName"></span>
</div>
</form>
</body>
</html>
No comments:
Post a Comment