File Upload With Preview Without Ajax

- http://plugins.krajee.com/file-input

demo

0- layouts

  <a href="http://assets/js/vendor/plugins/purify.min.js">http://assets/js/vendor/plugins/purify.min.js</a>
  <a href="http://assets/js/vendor/fileinput.min.js">http://assets/js/vendor/fileinput.min.js</a>
  <a href="http://assets/js/vendor/fa/theme.js">http://assets/js/vendor/fa/theme.js</a>

1- form

  <input id="photo" name="photo[]" type="file" multiple class="file-loading">

2- scss

.kv-file-upload,
.file-upload-indicator,
.kv-file-zoom,
.file-drag-handle {
  display: none;
}
.file-drop-zone {
  margin: 0;
}
.file-preview {
  padding: 0;
  border: 0;
}
.fileinput-upload {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  cursor: default;
  opacity: 0;
  .fa-upload,
  .glyphicon-upload,
  span {
    display: none;
  }
}
.fileinput-remove {
  margin-right: 5px;
  display: none;
  font-size: 25px;
}
.file-preview-frame {
  box-shadow: none !important;
}

3- js

$("#photo").fileinput({
  theme: "fa", // remove if no need
  showClose: true,
  showCaption: false,
  showUpload: true,
  showRemove: false,
  showBrowse: false,
  browseOnZoneClick: true,
  allowedFileExtensions: ["jpg", "png", 'jpeg'], // change to what u want
  maxFilePreviewSize:3072, // change to what u want
  maxFileSize: 3072, // change to what u want
  dropZoneTitle: 'Drag & drop Photos here …', // change to what u want

  // we need this or the delete btn wont show up
  // this is = to the form route, we cant make it = null or it wont work
  uploadUrl: "form-store-route"
});

// to show the x icon on the top right when files are added & hide when clicked
$('#photo').on('fileloaded', function(event, file, previewId, index, reader) {
  $('.fileinput-remove').show(function() {
    $(this).click(function() {
      $(this).hide();
    });
  });
});
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s