<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<meta name="description" content="Live demo of the Simple Ajax Uploader plugin.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico">
<title>Simple Ajax Uploader - Demo | LPology</title>
<script>
(function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,"script","//www.google-analytics.com/analytics.js","ga");
ga("create", "UA-33681812-2", "auto");
ga("send", "pageview");
</script>
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="../assets/css/bootstrap.min.css">
<!--[if lt IE 8]>
<link href="/assets/css/bootstrap-ie7fix.min.css" rel="stylesheet">
<![endif]-->
<link rel="stylesheet" href="../assets/css/styles.css">
<script type="text/javascript" src="..//assets/js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" />
</head>
<body>
<div id="wrap">
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]--><div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="/assets/img/logo.png" alt="LPology"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Learn More <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li role="menuitem"><a tabindex="-1" href="/overview/">Overview</a></li>
<li role="menuitem" class="divider"></li>
<li role="menuitem"><a href="/case-management/">Case Management</a></li>
<li role="menuitem"><a href="/reporting/">Reporting</a></li>
<li role="menuitem"><a href="/auditing/">Auditing</a></li>
<li role="menuitem"><a href="/intelligence/">Intelligence</a></li>
<li role="menuitem"><a href="/lpology-mobile/">LPology Mobile</a></li>
<li role="menuitem"><a href="/data-security/">Information Security</a></li>
</ul>
</li></ul>
</div><!--/.navbar-collapse -->
</div>
</div>
<div class="mid-header">
<div class="container">
<h1>Simple Ajax Uploader - Demo</h1>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="content-box">
<input type="button" id="upload-btn" class="btn btn-primary btn-large clearfix" value="Choose file">
<span style="padding-left:5px;vertical-align:middle;"><i>PNG, JPG, or GIF (1024K max file size)</i></span>
<div id="errormsg" class="clearfix redtext" style="padding-top: 10px;"></div>
<div id="pic-progress-wrap" class="progress-wrap" style="margin-top:10px;margin-bottom:10px;"></div>
<div id="picbox" class="clear" style="padding-top:0px;padding-bottom:10px;"></div>
<div class="clear-line" style="margin-top:10px;"></div>
<a href="https://github.com/LPology/Simple-Ajax-Uploader">Get the code</a>
</div>
</div>
<div class="col-md-3 col-md-offset-1">
<div style="font-size:16px;line-height:24px;">
<div class="content-box docs" style="padding:15px;">
<p style="font-size:17px;margin-bottom:9px;" class="center">Simple Ajax Uploader</p>
<p><a href="https://github.com/LPology/Simple-Ajax-Uploader">Github Project Page</a></p>
<p><a href="//www.lpology.com/code/ajaxuploader/docs.php">Javascript API Reference</a></p>
<p><a href="//www.lpology.com/code/ajaxuploader/phpdocs.php">PHP Class API Reference</a></p>
<p><a href="//www.lpology.com/code/ajaxuploader/progress.php">Upload Progress Bars</a></p>
<p><a href="//www.lpology.com/code/ajaxuploader/How-to-Cross-Domain-File-Uploading.php">CORS</a></p>
<p><a href="https://github.com/LPology/Simple-Ajax-Uploader/archive/master.zip">Download</a></p>
<p><a href="//www.lpology.com/code/ajaxuploader/">Live Demo</a></p>
<p><a href="//www.lpology.com/code/ajaxuploader/faq.php">FAQ</a></p>
<div class="clear-line" style="margin-top:10px;"></div>
<p style="margin-bottom:6px;"><a href="/code/">More code projects</a> from LPology</p>
</div>
</div>
</div>
</div>
</div>
</div><!--/#wrap -->
<div id="footer">
<div>
<div class="container">
<p class="pull-right">Copyright © 2011-2017 LPology, LLC | <a href="/terms/">Terms of Service</a> | <a href="/privacy/">Privacy Policy</a> | <a href="/code/">Open Source</a></p>
</div>
</div>
</div><script src="../assets/js/js_libs.js"></script><script src="/assets/js/main.js"></script><script type="text/javascript" src="../../SimpleAjaxUploader.js"></script>
<script>
$(function() {
var btn = document.getElementById('upload-btn'),
wrap = document.getElementById('pic-progress-wrap'),
picBox = document.getElementById('picbox'),
errBox = document.getElementById('errormsg');
var uploader = new ss.SimpleUpload({
button: btn,
url: '/code/ajaxuploader/img-save.php',
sessionProgressUrl: '/code/ajaxuploader/sessionProgress.php',
name: 'imgfile',
multiple: true,
multipart: true,
maxUploads: 2,
maxSize: 1024,
queue: false,
allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'],
accept: 'image/*',
debug: true,
hoverClass: 'btn-hover',
focusClass: 'active',
disabledClass: 'disabled',
responseType: 'json',
onSubmit: function(filename, ext) {
var prog = document.createElement('div'),
outer = document.createElement('div'),
bar = document.createElement('div'),
size = document.createElement('div'),
self = this;
prog.className = 'prog';
size.className = 'size';
outer.className = 'progress progress-striped';
bar.className = 'progress-bar progress-bar-success';
outer.appendChild(bar);
prog.appendChild(size);
prog.appendChild(outer);
wrap.appendChild(prog); // 'wrap' is an element on the page
self.setProgressBar(bar);
self.setProgressContainer(prog);
self.setFileSizeBox(size);
errBox.innerHTML = '';
btn.value = 'Choose another file';
},
onSizeError: function() {
errBox.innerHTML = 'Files may not exceed 1024K.';
},
onExtError: function() {
errBox.innerHTML = 'Invalid file type. Please select a PNG, JPG, GIF image.';
},
onComplete: function(file, response, btn) {
if (!response) {
errBox.innerHTML = 'Unable to upload file';
}
if (response.success === true) {
picBox.innerHTML = '<img src="/code/ajaxuploader/view-img.php?file=' + response.file + '">';
} else {
if (response.msg) {
errBox.innerHTML = response.msg;
} else {
errBox.innerHTML = 'Unable to upload file';
}
}
}
});
});
</script>
</body>
</html>