Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<div class="row">
<div class="col-lg-12">
<div class="panel">
<header class="panel-heading lead">고객 사진 추가</header>
<div class="panel-body">
<%= simple_form_for( [:staffs, @user], url: staffs_user_photo_path, html: { class: 'form-horizontal', multipart: true } ) do |f| %>
<% if @user.errors.present? %>
<script type="text/javascript">
<% @user.errors.full_messages.each do |msg| %>
toastr.error('<%= msg %>');
<% end %>
</script>
<% end %>
<div class="form-group">
<%= f.file_field :files, accept: 'image/*', multiple: true, onChange: 'handleFileSelect()' %>
<output class="row">
<div class="col-md-3" id="result"></div>
</output>
<%= image_tag '', class: ' avatar_preview' %>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-6">
<%= f.submit class: 'btn btn-info' %>
</div>
</div>
<% end %>
</div>
</div>
</div>
</div>
<script>
function handleFileSelect(e) {
//Check File API support
if (window.File && window.FileList && window.FileReader) {
var files = event.target.files; //FileList object
var output = document.getElementById("result");
// var div = document.createElement("div").classList.add("col-md-3");
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (!file.type.match('image')) continue;
var picReader = new FileReader();
picReader.addEventListener("load", function (event) {
var picFile = event.target;
var aTag = document.createElement("a");
aTag.setAttribute("href", "#");
aTag.classList.add("thumbnail");
aTag.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" + "title='" + picFile.name + "'/>";
output.insertBefore(aTag, null);
});
//Read the image
picReader.readAsDataURL(file);
}
} else {
console.log("Your browser does not support File API");
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment