forked from qwerty/tupali
199 lines
9.3 KiB
HTML
199 lines
9.3 KiB
HTML
|
|
||
|
|
<!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>
|