upload system with preview

upload system with preview

by Andrew Pougher

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
<span class="btn btn-default btn-file">
    Browse  <input type="file" id="files" name="files[]"  />
</span>
   <!-- X -->

<div class="container" style="margin-top: 20px;">
		<div class="row">
			
			<div class="col-lg-6 col-sm-6 col-12">
				<div class="jumbotron">
					<h1>Bootstrap File Input Demo</h1>
					<p class="text-muted">Requires Bootstrap 3</p>
				</div>
			</div>
			
			<div class="col-lg-6 col-sm-6 col-12">
				<h4>Standard Button</h4>
				<span class="file-input btn btn-primary btn-file">
					Browse&hellip; <input type="file" multiple>
				</span>
			</div>
			<div class="col-lg-6 col-sm-6 col-12">
				<h4>Block-level Button
				<span class="file-input btn btn-block btn-primary btn-file">
					Browse&hellip; <input type="file" multiple>
				</span>
			</div>
			
			<div class="col-lg-6 col-sm-6 col-12">
				<h4>Button Groups</h4>
				<div class="btn-group">
					<a href="#" class="btn btn-primary">Action 1</a>
					<a href="#" class="btn btn-primary">Action 2</a>
					<span class="btn btn-primary btn-file">
						Browse&hellip; <input type="file" multiple>
					</span>
				</div>
			</div>
			<div class="col-lg-6 col-sm-6 col-12">
				<h4>Input Groups</h4>
				<div class="input-group">
					<span class="input-group-btn">
						<span class="btn btn-primary btn-file">
							Browse&hellip; <input type="file" multiple>
						</span>
					</span>
					<input type="text" class="form-control" readonly>
				</div>
				<span class="help-block">
					Try selecting one or more files and watch the feedback
				</span>
			</div>
			
			<hr>
			
			<div class="col-12" style="margin-bottom: 20px;">
			andrew pougher
			</div>
			
		</div>
	</div>
	
<!-- X -->
   
<output id="list"></output>
     <div class="row">
            <div class="col-xs-6 col-md-3">
                   <a href="#" class="thumbnail">
                       <img id="myim" src="">
           ...

CSS

.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;
		}

JavaScript

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = ['<img class="thumb" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>'].join('');
            
          document.getElementById('list').insertBefore(span, null);
          localStorage.setItem('PPimg', e.target.result);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);


  if(localStorage.PPimg) {         
$("#myim").attr("src", localStorage.PPimg);
 }



$(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);
				}
				
			});
		});