Untitled

<!DOCTYPE html>

<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>Bootstrap File Input Demo</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<!-- jQuery -->
	<script src="h_files/jquery.js"></script>

	<!-- Bootstrap 3 -->
	<link rel="stylesheet" href="h_files/bootstrap.css">

	<script src="h_files/bootstrap.js"></script>

	<style>

      html,
      body {
        height: 100%;
        /* The html and body elements cannot have any padding or margin. */
      }

      /* Wrapper for page content to push down footer */
      #wrap {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        /* Negative indent footer by it's height */
        margin: 0 auto -60px;
      }

      /* Set the fixed height of the footer here */
     #push,
      #footer {
        height: 60px;
      }
      #footer {
        background-color: #f5f5f5;
      }

      /* Lastly, apply responsive CSS fixes as necessary */
      @media (max-width: 767px) {
        #footer {
          margin-left: -20px;
          margin-right: -20px;
          padding-left: 20px;
          padding-right: 20px;
        }
      }

		.btn-file {
		    position: relative;
		    overflow: hidden;
		}
		.btn-file input[type=file] {
		    position: absolute;
		    top: 0;
		    right: 0;
		    min-width: 100%;
		    min-height: 100%;
		    font-size: 999px;
		    text-align: right;
		    filter: alpha(opacity=0);
		    opacity: 0;
		    background: red;
		    cursor: inherit;
		    display: block;
		}
		input[readonly] {
			background-color: white !important;
			cursor: text !important;
		}
	</style>

	<script>
		$(document)
			.on('change', '.btn-file :file', function() {
				var input = $(this),
				numFiles = input.get(0).files ? input.get(0).files.length : 1,
				label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
				input.trigger('fileselect', [numFiles, label]);
		});

		$(document).ready( function() {
			$('.btn-file :file').on('fileselect', function(event, numFiles, label) {

				var input = $(this).parents('.input-group').find(':text'),
					log = numFiles > 1 ? numFiles + ' files selected' : label;

				if( input.length ) {
					input.val(log);
				} else {
					if( log ) alert(log);
				}

			});
		});
	</script>
</head>
<body >
	<div class="container" style="margin-top: 20px;">
		<div class="row">

			<div class="col-lg-6 col-sm-6 col-12">
				<br><br><br><form action="index1.php" method="post">
				<div class="input-group">
					<span class="input-group-btn">
						<span class="btn btn-primary btn-file">
							Browse… <input name="file" id="file" type="file">
						</span>
					</span>
					<input value="" class="form-control" readonly="readonly" type="text">
				</div>
				<span class="help-block">
					Browse and select one text file
				</span><br><br>
<input type="submit" name="submit" class="btn btn-success" value="Submit"/> </form>
			</div>


		</div>
	</div>
	<br><br>
    </div>
<?
if (isset($_POST['submit'])){
        if($_POST['submit']=='Submit'){
                //proccess;
		echo $_FILE['file']['name'].'   test';
	}

}
?>

</body></html>