$(document).on('submit', '#user_files', function () {
var self = this;
var files = document.querySelector('input[type="file"]').files;
var formData = new FormData();
for (var i = 0, file; file = files[i]; ++i) {
formData.append(file.name, file);
}
var xhr = new XMLHttpRequest();
xhr.open('POST', $(self).attr("action"), true);
xhr.upload.onprogress = function (e) {
if (e.lengthComputable) {
if (((e.loaded / e.total) * 100) >= 100) {
alert("Загрузил!");
}
}
};
xhr.send(formData);
return false;
});$(document).on('submit', '#user_files', function () {
var self = this;
var files = document.querySelector('input[type="file"]').files;
var progress = $(".progress .bar");
var formData = new FormData();
for (var i = 0, file; file = files[i]; ++i) {
formData.append(file.name, file);
}
var xhr = new XMLHttpRequest();
xhr.open('POST', $(self).attr("action"), true);
xhr.upload.onprogress = function (e) {
if (e.lengthComputable) {
progress.css({"width": ((e.loaded / e.total) * 100) + "%"});
if (((e.loaded / e.total) * 100) >= 100) {
alert("Загрузил!");
}
}
};
xhr.send(formData);
return false;
});<div class="wrapper">
<div class="inner">
<div class="frame sidebar">
<iframe src="http://toster.ru/q/145330">
Ваш браузер не поддерживает плавающие фреймы!
</iframe>
</div>
<div class="frame content">
<span class="toggle">×</span>
<iframe src="http://toster.ru/q/145330">
Ваш браузер не поддерживает плавающие фреймы!
</iframe>
</div>
</div>
</div>html, body {
height: 100%;
padding: 0;
margin: 0;
position: relative;
}
iframe {
display: block;
border: none;
}
.wrapper {
position: relative;
display: table;
height: 100%;
width: 100%;
}
.wrapper .inner {
width: 100%;
display: table-row;
}
.wrapper .inner .frame {
display: table-cell;
position: relative;
height: 100%
}
.wrapper .inner .frame iframe {
position: relative;
height: 100%;
width: 100%;
border: none;
}
.wrapper .inner .frame.sidebar {
width: 200px;
background-color: #ff0000;
overflow: hidden;
}
.wrapper .inner .frame.sidebar.hide {
display: none;
}
.wrapper .inner .frame.content {
background-color: #ffff00
}
.toggle {
z-index: 2;
position: absolute;
top: 0;
left: 0;
padding: 10px;
display: inline-block;
color: #ffffff;
background-color: #0000ff;
cursor: pointer;
}$(document).ready(function(){
$(".toggle").on("click", function(){
$(".sidebar").toggleClass("hide");
});
});<script class="tpl_container" type="text/template" data-name="type">
<div class="success alert alert-success" role="alert">
<% if (typeof(description ) != "undefined") { %>
<p class="description"> <%= description %> </p>
<% } %>
<p><%= message %></p>
</div>
</script>$("input").on("keypress", function(e){
var key = (typeof e.charCode == 'undefined' ? e.keyCode : e.charCode);
if (key == 32){
$(this).val($(this).val() + ', ');
}
return true;
});* {
box-sizing: border-box;
}
.content {
padding: 10px 20px;
}
.list-wraper {
position: relative;
padding: 0px;
height: 72px;
}
.list-item {
background-color: #fff;
position: absolute;
padding: 0;
width: 100%;
transition: all 200ms ease;
-moz-transition: all 200ms ease;
-webkit-transition: all 200ms ease;
-o-transition: all 200ms ease;
border: 1px solid #ccc;
box-sizing: content-box;
}
.list-item:hover {
z-index: 1;
padding: 4px;
margin: -4px;
}