'Clean'
This commit is contained in:
LeoKhoa
@@ -1,198 +0,0 @@
|
||||
Change Log
|
||||
============================
|
||||
### Version 2.0 ###
|
||||
|
||||
SimpleAjaxUploader.js:
|
||||
|
||||
* Added support for drag and drop file uploads
|
||||
* Added `ss.uploadSetup()` method to set default uploader option values (useful for multiple uploader instances)
|
||||
* Added `noParams` option to disable the default behavior of appending the file name to the URL query string
|
||||
* Numerous code improvements throughout -- bug fixes, memory usage, etc.
|
||||
|
||||
Uploader.php
|
||||
* Refactored into a single class in accordance with one class, one file
|
||||
* Made improvements to error detection and handling
|
||||
* Added support for reading the `X-File-Name` header as an alternative to query string parameters for sending file names to the server
|
||||
* Set default value of the `$uploadName` property to be `"uploadfile"` for consistency with the examples - <a href="https://github.com/LPology/Simple-Ajax-Uploader/issues/72">72</a>
|
||||
|
||||
### Version 1.11 ###
|
||||
* Added support for PHP Session Upload Progress for PHP 5.4+ (APC was deprecated in 5.3)
|
||||
* Added `clearQueue()` method which gives the user the ability to clear all files in queue - <a href="https://github.com/LPology/Simple-Ajax-Uploader/pull/62">#62</a> - (Special thanks to <a href="https://github.com/mouse0270">mouse0270</a> for this one)
|
||||
* Fixed multiple file selection bug - <a href="https://github.com/LPology/Simple-Ajax-Uploader/pull/67">#67</a> - (Special thanks to <a href="https://github.com/genintho">genintho</a> for this)
|
||||
* Fixed bug which could allow form/input elements to be created with invalid name/ID attributes in IE7-9
|
||||
|
||||
### Version 1.10.1 ###
|
||||
* `iframe` and `form` elements are now created with `document.createElement()` rather than the much slower HTML injection method
|
||||
* Removed unused variable from `_uploadIframe()`
|
||||
|
||||
### Version 1.10 ###
|
||||
* Added `setOptions()` method for setting or changing upload options - <a href="https://github.com/LPology/Simple-Ajax-Uploader/issues/54">#54</a> - (special thanks to <a href="https://github.com/hauru">hauru</a> for this)
|
||||
* Added `customHeader` option for sending custom request headers - <a href="https://github.com/LPology/Simple-Ajax-Uploader/issues/47">#47</a> (special thanks to <a href="https://github.com/cillosis">cillosis</a> for this)
|
||||
* Updated `ss.parseJSON()` to use a more secure method of manually parsing JSON
|
||||
|
||||
### Version 1.9.1 ###
|
||||
* `onError()` callback now receives server response as an argument, if it exists, or `false` if it does not - <a href="https://github.com/LPology/Simple-Ajax-Uploader/pull/37">#37</a> (special thanks to <a href="https://github.com/KSDaemon">KSDaemon</a> for this)
|
||||
<br />
|
||||
<br />
|
||||
<strong>API Change Note:</strong> For consistency with the other callbacks, the server response is passed to `onError()` as the next to last argument, directly before the upload button. Therefore, if you use the upload button parameter in `onError()`, you will need to update your code when upgrading.
|
||||
<br />
|
||||
<br />
|
||||
* Switched from Google Closure Compiler to YUI Compressor for minification
|
||||
|
||||
### Version 1.9 ###
|
||||
* Added CORS support - <a href="http://www.lpology.com/code/ajaxuploader/How-to-Cross-Domain-File-Uploading.php">Learn more</a>
|
||||
* Query string parameters for Nginx Upload Progress Module in `_uploadIframe()` are now encoded with `encodeURIComponent()`
|
||||
* Upload progress ID keys are now generated prior to each upload instead of on page load
|
||||
* Query string parameters passed to `url` are now preserved - <a href="https://github.com/LPology/Simple-Ajax-Uploader/issues/34">#34</a> (special thanks to <a href="https://github.com/Deefjuh">Deefjuh</a> for this)
|
||||
|
||||
### Version 1.8.2 ###
|
||||
* A reference to the button which triggers an upload is now passed as the last argument to the following callbacks: `onAbort()`, `onChange()`, `onSubmit()`, `onComplete()`, `onError()`, `startXHR()`, `endXHR()`, `startNonXHR()`, `endNonXHR()` (can be useful when using multiple upload buttons)
|
||||
* Fixed bug which caused some methods to not work if called inside of `startXHR()` or `startNonXHR()`
|
||||
* Fixed bug causing undefined variable in IE9 and older if `progressUrl` and `nginxProgressUrl` are not set
|
||||
|
||||
### Version 1.8.1 ###
|
||||
* Added `destroy()` method for completely removing upload functionality
|
||||
* Removed redundant call to `ss.verifyElem()` inside of `rerouteClicks()`
|
||||
* Moved browser-specific checks to top of IIFE, as they only need to execute once
|
||||
|
||||
### Version 1.8 ###
|
||||
SimpleAjaxUploader.js:
|
||||
* Added support for <a href="http://wiki.nginx.org/HttpUploadProgressModule">Nginx Upload Progress Module</a>
|
||||
* Added `setAbortBtn()` method to designate an element as "cancel" button
|
||||
* Added `onAbort()` callback function to specify behavior upon manual abort
|
||||
* Added `setPctBox()` method to designate an element to be injected with upload progress percentage
|
||||
* Switched to a unique ID function that is RFC 4122 version 4 compliant
|
||||
* The `button` option now accepts either a single button (element ID string, element, or jQuery object), or an array of buttons. If an array is passed, each element in the array will work as an upload button
|
||||
* Upload progress update request keys are now locally generated
|
||||
* Fixed bug that was causing `onError()` to be fired twice
|
||||
* For consistency with jQuery behavior, any 2xx status code is now handled as a successful response (previously, only `200` and `201` were successful)
|
||||
* Upload buttons are now being properly disabled/enabled at correct points
|
||||
* Made significant improvements to error handling, particularly with iframe uploads and retrieving server provided progress updates
|
||||
* Fixed a number of potential memory leaks for Internet Explorer
|
||||
* Regular expressions are now pre-compiled and cached for better performance
|
||||
* For server progress tracking, `sizeBox` and `onUpdateFileSize()` are no longer pointlessly set/called again after first progress update is received
|
||||
|
||||
uploadProgress.php:
|
||||
* Removed functionality for returning upload keys, as RFC 4122 v4 compliant UUIDs are now generated client side
|
||||
|
||||
### Version 1.7 ###
|
||||
SimpleAjaxUploader.js:
|
||||
* Fixed IE6/IE7 memory leak when removing elements without first removing event listeners (<a href="https://github.com/LPology/Simple-Ajax-Uploader/issues/21">issue #21</a>)
|
||||
* Fixed possible race condition in which `removeCurrent()` could potentially delete the wrong file from the upload queue
|
||||
* Multiple file inputs are now disabled in Safari due to a browser bug that just screws everything up (see: http://stackoverflow.com/q/7231054/1091949)
|
||||
* Switched to a smaller, faster process for cross-browser bounding box calculation
|
||||
* Updated to faster methods of checking for, adding, and removing element CSS classes
|
||||
* Combined `_checkExtension()` with `_checkFile()` to eliminate a function call/reduce code size
|
||||
* Combined `_handleIframeResponse()` with `_uploadIframe()` and switched to a more efficient method of getting iframe contents
|
||||
* Removed a number of unnecessary/redundant function calls, along with some unnecessary variable copying
|
||||
* Updated `ss.verifyElem()` to use the much faster `charAt()` and `substr()` in place of a regex and `slice()`
|
||||
* Added separate feature detection for file input `accept` attribute
|
||||
|
||||
Uploader.php:
|
||||
* Removed unnecessary check of `$allowedExtensions` for `null` value in `handleUpload()`
|
||||
* Added `final` keyword to `FileUploadXHR` and `FileUploadPOSTForm` classes and their respective methods to discourage direct use
|
||||
|
||||
### Version 1.6.5 ###
|
||||
* When using `multipart`, additional data will now also appended to the multipart form.
|
||||
* Cleaned up some messy code -- organization, unnecessary variable copying, etc.
|
||||
|
||||
### Version 1.6.4 ###
|
||||
* Switched from using `setAttribute` to dot notation for setting element properties (some versions of IE don't handle `setAttribute` well)
|
||||
* `ss.removeItem()` now uses the faster countdown method to loop through arrays
|
||||
* In accordance with W3 standards, `_uploadXhr()` now accepts either a `200 OK` or `201 Created` as a successful response
|
||||
* Uploader.php -- the `handleUpload()` method now checks whether the `allowedExtensions` property is `empty` instead of `null`. This prevents an "Invalid file type" error resulting from passing an empty array
|
||||
|
||||
### Version 1.6.3 ###
|
||||
* Fixed bug which allowed `onComplete()` to be called after JSON parse error
|
||||
|
||||
### Version 1.6.2 ###
|
||||
* Overhauled error handling to fix a number of issues.
|
||||
* Added consistent error types for `onError()` so that the second parameter will be either:
|
||||
`parseerror` (bad JSON from server), `transfererror` (xfer error during XHR upload), `servererror` (server response not `200 OK`)
|
||||
* Fixed problem with null file size parameter for `endXHR()` callback
|
||||
|
||||
### Version 1.6.1 ###
|
||||
* Plugin is now wrapped in an IIFE
|
||||
* Leading semicolon added to close any previous statement
|
||||
* Code is now in strict mode
|
||||
* Cleaned up a few messy areas
|
||||
|
||||
### Version 1.6 ###
|
||||
If the 1.6 release has a theme, it is flexibility. Nearly every update in this release is intended to allow greater flexibility for developers.
|
||||
|
||||
* Submitting a file which exceeds `maxSize` or is not an `allowedExtension` no longer triggers an alert, but will instead fire a callback
|
||||
* Added `onSizeError()` callback function which fires when a file exceeds the `maxSize` option, if it is set
|
||||
* Added `onExtError()` callback which fires when a file is not permitted by the `allowedExtensions` option, if it is set
|
||||
* Removed `messages` option and `_errorMsg()`, both of which are no longer used
|
||||
* Added new `accept` option, the value of which will be the value of the `accept` file input attribute in supporting browsers. <a href="http://stackoverflow.com/a/10503561/1091949">More info.</a>
|
||||
* Added new `method` option to allow specifying an HTTP method other than POST
|
||||
|
||||
Special thanks to <a href="https://github.com/dleffler">dleffler</a>, <a href="https://github.com/devtrends">devtrends</a> and <a href="https://github.com/urcadox">urcadox</a> for their ideas and feedback.
|
||||
|
||||
### Version 1.5.3 ###
|
||||
* Added `autoSubmit` check before submitting in `_cycleQueue()`
|
||||
* Added check to ensure upload progress server key doesn't exceed 57 characters (max allowable APC key length)
|
||||
* `rerouteClicks(element)` can now be used to add additional elements which can be clicked to open file box
|
||||
|
||||
### Version 1.5.2 ###
|
||||
(This isn't as much a release as it is a signal to update for anyone who may have downloaded version 1.5.1 in the past few hours)
|
||||
* Fixed "bug" from 1.5.1 that broke uploader without multiple option enabled
|
||||
* Added `queue` option to disable automatic file queuing
|
||||
|
||||
### Version 1.5.1 ###
|
||||
* Multiple file inputs are now used in browsers with support for File API, thus allowing multiple file selection if `multiple` option is `true`
|
||||
* Removed some unnecessary variable copying
|
||||
* Added queue system which allows files to be selected and automatically uploaded as others finish
|
||||
* Added `getQueueSize()` function to get current number of files waiting in queue
|
||||
* Fixed bug in which active upload counter was not properly updating when returning `false` from `startXHR()` and `startNonXHR()`
|
||||
* Error messages now incorporate file names
|
||||
|
||||
### Version 1.5 ###
|
||||
* Added support for multiple file uploading, along with Gmail-style multiple progress bars for tracking each file.
|
||||
* Added new `maxSize` option for file size limits, `allowedExtensions` option for file type restrictions. Custom error messages supported for both.
|
||||
* Updated `verifyElem()` to use a better method of detecting if an upload button is a jQuery object.
|
||||
* Numerous code enhancements throughout - updated error handling, cleaner organization, performance improvements.
|
||||
* Patched some memory leaks created by circular references in event handlers.
|
||||
|
||||
### Version 1.4.2 ###
|
||||
* SimpleAjaxUploader.js - Added `multipart` option to allow multipart form upload instead of binary stream
|
||||
* Uploader.php - The check for form uploads is now first in the constructor to accomodate new `multipart` option
|
||||
* Uploader.php - Providing an array of valid file extensions is now optional. If not provided, all file types are allowed
|
||||
* Added minified version of JS file
|
||||
|
||||
### Version 1.4.1 ###
|
||||
* Fixed XHR status check logic that could allow false alarm calls to onError callback
|
||||
* Removed redundant XHR status check
|
||||
* Returning false from a callback no longer clears the file field. Not sure why it ever did to begin with.
|
||||
* A status check now occurs prior to progress update requests to prevent potential loop that could be caused by a server error
|
||||
* Parsing JSON in older browsers no longer uses `eval` because it's evil
|
||||
|
||||
### Version 1.4 ###
|
||||
This release includes a major overhaul that adds functionality for implementing cross-browser upload progress support. Through feature detection and abstraction, it is now possible for the `onProgress` callback function to maintain consistent behavior across browsers.
|
||||
|
||||
Currently, only PHP (with APC extension) is supported. To use, set the newly added `progressUrl` option to the URL of the included UploadProgress.php script, and `onProgress` will then return upload progress data in Internet Explorer 9 and below.
|
||||
|
||||
Note that this added functionality does not affect the behavior of the plugin for those not using PHP, or just not using the feature.
|
||||
|
||||
For those not using PHP, a similar result can still be achieved with the `startXH`/`endXHR` and `startNonXHR`/`endNonXHR` callback functions, which are included specifically for defining behavior based on whether XHR uploads are supported.
|
||||
|
||||
Also, adding support for other programming languages would certainly be a welcome addition, if anyone is interested in working on that.
|
||||
|
||||
Other items:
|
||||
|
||||
* Added `onUpdateFileSize` callback function for getting file size in IE9 and below (When server supported progress is enabled)
|
||||
* Removed the unneccessary _handleJSON method
|
||||
* Added new ss.newXHR method
|
||||
* Added extras folder for non-necessary items (i.e., everything but SimpleAjaxUploader.js)
|
||||
* Adjusted request headers for XHR uploads
|
||||
* Moved support detection for HTML5 File API to constructor so it only executes once
|
||||
* Timestamps now appended to URLs to prevent browsers from caching requests
|
||||
|
||||
### Version 1.3 ###
|
||||
* Returned to version numbering
|
||||
* Updated method for parsing JSON
|
||||
* Added PHP class for handling file uploads
|
||||
* Cleaned up messy areas
|
||||
|
||||
### Earlier versions ###
|
||||
Prior to version 1.3, I did a pretty horrible job of documenting changes, and, at one point, entirely dispensed with any notion of version control whatsoever. I have since seen the light.
|
||||
@@ -1,258 +0,0 @@
|
||||
Simple Ajax Uploader
|
||||
============================
|
||||
|
||||
A Javascript plugin for cross-browser Ajax file uploading. Supports drag and drop, CORS, and multiple file uploading with progress bars. Works in IE7-9, mobile, and all modern browsers.
|
||||
|
||||
```javascript
|
||||
var uploader = new ss.SimpleUpload({
|
||||
button: 'upload-btn', // HTML element used as upload button
|
||||
url: '/PathTo/UploadHandler', // URL of server-side upload handler
|
||||
name: 'uploadfile' // Parameter name of the uploaded file
|
||||
});
|
||||
```
|
||||
|
||||
### Features ###
|
||||
* Cross-browser -- works in IE7+, Firefox, Chrome, Safari, Opera
|
||||
* Supports multiple, concurrent file uploads (even in non-HTML5 browsers)
|
||||
* Built-in CORS support
|
||||
* Drag and drop file uploads (<strong>new in v2.0</strong>)
|
||||
* No flash or external CSS -- a single 6Kb Javascript file (minified and gzipped)
|
||||
* Progress bars in all browsers, including IE9 and older. Built-in support for:
|
||||
* <a href="http://wiki.nginx.org/HttpUploadProgressModule">Nginx Upload Progress Module</a>
|
||||
* <a href="http://www.php.net/manual/en/apc.configuration.php#ini.apc.rfc1867">PHP APC File Upload Progress</a>
|
||||
* <a href="http://php.net/manual/en/session.upload-progress.php">PHP Session Upload Progress</a>
|
||||
* Use any HTML element as the upload button
|
||||
* No dependencies - use it with or without jQuery
|
||||
* Provides individual callback functions for XHR-supported browsers and for browsers that do not support XHR uploads
|
||||
* Ability to pass custom headers in request such as the Authorization header
|
||||
|
||||
### How to Use ###
|
||||
|
||||
<a href="https://www.lpology.com/code/ajaxuploader/">Live Demo</a><br />
|
||||
<a href="https://www.lpology.com/code/ajaxuploader/docs.php">API Reference</a><br />
|
||||
<a href="https://www.lpology.com/code/ajaxuploader/progress.php">Upload progress bars in IE9 (and older)</a><br />
|
||||
<a href="https://www.lpology.com/code/ajaxuploader/How-to-Cross-Domain-File-Uploading.php">CORS — Cross-domain file uploading with Simple Ajax Uploader</a>
|
||||
|
||||
There are two main ways to use the plugin:
|
||||
|
||||
<strong>1. Single file uploading</strong> - Only one upload allowed at a time. Progress bar is an element that is re-used for each upload.<br />
|
||||
<strong>2. Multiple file uploading</strong> - Allow multiple, concurrent file uploads. Progress bars are created on the fly before each upload.
|
||||
|
||||
#### Method 1: Single file uploading (one file at a time) ####
|
||||
|
||||
Before each upload, in the `onSubmit()` callback function, the on-page <code>sizeBox</code> and <code>progress</code> elements are assigned specific roles using these two functions:
|
||||
|
||||
`setProgressBar(elem)` - Designates an element as the progress bar for an upload.<br />
|
||||
`setFileSizeBox(elem)` - Designates an element as the container in which the file size of an uploading file will be inserted.
|
||||
|
||||
As a result, when an upload begins, the file size of the upload is inserted into the <code>sizeBox</code> element and the CSS width of the <code>progress</code> element is set to 0%. As the upload progresses, the CSS width percentage of the <code>progress</code> element will be updated accordingly.
|
||||
|
||||
This approach of assigning roles to elements provides developers with a great deal of flexibility -- progress indicators can be styled in any way and placed anywhere on the page.
|
||||
|
||||
```javascript
|
||||
var sizeBox = document.getElementById('sizeBox'), // container for file size info
|
||||
progress = document.getElementById('progress'); // the element we're using for a progress bar
|
||||
|
||||
var uploader = new ss.SimpleUpload({
|
||||
button: 'uploadButton', // file upload button
|
||||
url: 'uploadHandler.php', // server side handler
|
||||
name: 'uploadfile', // upload parameter name
|
||||
progressUrl: 'uploadProgress.php', // enables cross-browser progress support (more info below)
|
||||
responseType: 'json',
|
||||
allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'],
|
||||
maxSize: 1024, // kilobytes
|
||||
hoverClass: 'ui-state-hover',
|
||||
focusClass: 'ui-state-focus',
|
||||
disabledClass: 'ui-state-disabled',
|
||||
onSubmit: function(filename, extension) {
|
||||
this.setFileSizeBox(sizeBox); // designate this element as file size container
|
||||
this.setProgressBar(progress); // designate as progress bar
|
||||
},
|
||||
onComplete: function(filename, response) {
|
||||
if (!response) {
|
||||
alert(filename + 'upload failed');
|
||||
return false;
|
||||
}
|
||||
// do something with response...
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
#### Method 2: Multiple file uploads ####
|
||||
|
||||
Below is an example of how to implement multiple file uploading with progress bars. A new progress bar is created for each file upload within the `onSubmit()` callback function.
|
||||
|
||||
Like in Method 1, the newly created elements are assigned roles using the `setProgressBar()` and `setFileSizeBox()` functions. Unlike the previous example, however, the progress elements are automatically removed when the upload is completed.
|
||||
|
||||
```javascript
|
||||
var uploader = new ss.SimpleUpload({
|
||||
button: 'uploadButton',
|
||||
url: 'uploadHandler.php', // server side handler
|
||||
progressUrl: 'uploadProgress.php', // enables cross-browser progress support (more info below)
|
||||
responseType: 'json',
|
||||
name: 'uploadfile',
|
||||
multiple: true,
|
||||
allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'], // for example, if we were uploading pics
|
||||
hoverClass: 'ui-state-hover',
|
||||
focusClass: 'ui-state-focus',
|
||||
disabledClass: 'ui-state-disabled',
|
||||
onSubmit: function(filename, extension) {
|
||||
// Create the elements of our progress bar
|
||||
var progress = document.createElement('div'), // container for progress bar
|
||||
bar = document.createElement('div'), // actual progress bar
|
||||
fileSize = document.createElement('div'), // container for upload file size
|
||||
wrapper = document.createElement('div'), // container for this progress bar
|
||||
progressBox = document.getElementById('progressBox'); // on page container for progress bars
|
||||
|
||||
// Assign each element its corresponding class
|
||||
progress.className = 'progress';
|
||||
bar.className = 'bar';
|
||||
fileSize.className = 'size';
|
||||
wrapper.className = 'wrapper';
|
||||
|
||||
// Assemble the progress bar and add it to the page
|
||||
progress.appendChild(bar);
|
||||
wrapper.innerHTML = '<div class="name">'+filename+'</div>'; // filename is passed to onSubmit()
|
||||
wrapper.appendChild(fileSize);
|
||||
wrapper.appendChild(progress);
|
||||
progressBox.appendChild(wrapper); // just an element on the page to hold the progress bars
|
||||
|
||||
// Assign roles to the elements of the progress bar
|
||||
this.setProgressBar(bar); // will serve as the actual progress bar
|
||||
this.setFileSizeBox(fileSize); // display file size beside progress bar
|
||||
this.setProgressContainer(wrapper); // designate the containing div to be removed after upload
|
||||
},
|
||||
|
||||
// Do something after finishing the upload
|
||||
// Note that the progress bar will be automatically removed upon completion because everything
|
||||
// is encased in the "wrapper", which was designated to be removed with setProgressContainer()
|
||||
onComplete: function(filename, response) {
|
||||
if (!response) {
|
||||
alert(filename + 'upload failed');
|
||||
return false;
|
||||
}
|
||||
// Stuff to do after finishing an upload...
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
For multiple file uploads, we use an additional function: `setProgressContainer(elem)`. This function designates an element to be removed from the DOM after the upload is completed.
|
||||
|
||||
In the example, the element set to be removed with `setProgressContainer()` is the outer container for the progress elements. As a result, progress bars will be removed from the DOM after each upload is completed.
|
||||
|
||||
### Cross-Browser Helper Functions ###
|
||||
|
||||
To ease the pain of supporting older browsers, the plugin includes a set of callback functions which allow specific behavior to be defined based on whether the user's browser supports XHR uploads/HTML5 File API:
|
||||
|
||||
<code>startXHR(filename, fileSize)</code> - Called prior to upload -- only in browsers that support XHR uploads<br />
|
||||
<code>endXHR(filename)</code> - Called after upload is completed -- only in browsers that support XHR uploads<br />
|
||||
<code>startNonXHR(filename)</code> - Called prior to upload -- only in browsers that <strong>do not</strong> support XHR uploads<br />
|
||||
<code>endNonXHR(filename)</code> - Called after upload is completed -- only in browsers that <strong>do not</strong> support XHR uploads<br />
|
||||
|
||||
A common use case is to show an upload progress bar in browsers that support the <code>progress</code> event while displaying an animated GIF in older browsers:
|
||||
|
||||
```javascript
|
||||
|
||||
var progress = document.getElementById('progress'), // progress bar
|
||||
loaderImg = document.getElementById('loaderImg'); // "loading" animated GIF
|
||||
|
||||
var uploader = new ss.SimpleUpload({
|
||||
button: 'uploadButton',
|
||||
url: 'uploadHandler.php', // server side handler
|
||||
responseType: 'json',
|
||||
name: 'uploadfile',
|
||||
hoverClass: 'ui-state-hover',
|
||||
focusClass: 'ui-state-focus',
|
||||
disabledClass: 'ui-state-disabled',
|
||||
startXHR: function(filename, size) {
|
||||
progress.style.display = 'inline-block'; // show progress bar
|
||||
this.setProgressBar(progress); // designate as progress bar
|
||||
},
|
||||
endXHR: function(filename) {
|
||||
progress.style.display = 'none'; // hide progress bar
|
||||
},
|
||||
startNonXHR: function(filename) {
|
||||
loaderImg.style.display = 'inline-block'; // show animated GIF
|
||||
},
|
||||
endNonXHR: function(filename) {
|
||||
loaderImg.style.display = 'none'; // hide animated GIF
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
Returning <code>false</code> from <code>startXHR()</code> and <code>startNonXHR()</code> will prevent the upload from starting, just as it does with <code>onSubmit()</code> and <code>onChange()</code>.
|
||||
|
||||
### Server-side file handling ###
|
||||
Files are uploaded by POST as either raw form data or regular multipart/form-data, depending on the browser.
|
||||
|
||||
### Using Uploader.php ###
|
||||
|
||||
<strong>Note:</strong> This PHP class is included only for convenience. <strong>It is not required to use PHP with Simple Ajax Uploader.</strong> The plugin is agnostic to server configuration, so use any language you prefer.
|
||||
|
||||
```php
|
||||
<?php
|
||||
require('Uploader.php');
|
||||
|
||||
$upload_dir = '/img_uploads/';
|
||||
$valid_extensions = array('gif', 'png', 'jpeg', 'jpg');
|
||||
|
||||
$Upload = new FileUpload('uploadfile');
|
||||
$result = $Upload->handleUpload($upload_dir, $valid_extensions);
|
||||
|
||||
if (!$result) {
|
||||
echo json_encode(array('success' => false, 'msg' => $Upload->getErrorMsg()));
|
||||
} else {
|
||||
echo json_encode(array('success' => true, 'file' => $Upload->getFileName()));
|
||||
}
|
||||
```
|
||||
|
||||
You can also save the uploaded file with a different name by setting the `newFileName` property:
|
||||
|
||||
```php
|
||||
$Upload = new FileUpload('uploadfile');
|
||||
$ext = $Upload->getExtension(); // Get the extension of the uploaded file
|
||||
$Upload->newFileName = 'customFileName.'.$ext;
|
||||
$result = $Upload->handleUpload($upload_dir, $valid_extensions);
|
||||
```
|
||||
|
||||
To access the newly uploaded file, use the `getSavedFile()` method to get the file's path after the upload is completed:
|
||||
```php
|
||||
$Upload = new FileUpload('uploadfile');
|
||||
$result = $Upload->handleUpload($upload_dir, $valid_extensions);
|
||||
|
||||
if ($result) {
|
||||
$path = $Upload->getSavedFile();
|
||||
$imgsize = getimagesize($path);
|
||||
// image resizing stuff...
|
||||
}
|
||||
```
|
||||
|
||||
### Passing Custom Headers ###
|
||||
|
||||
```javascript
|
||||
var uploader = new ss.SimpleUpload({
|
||||
customHeaders: {'Authorization': 'my-access-token'},
|
||||
...
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
### Drag and Drop ###
|
||||
|
||||
Enable drag and drop uploading by passing an element to the `dropzone` option to serve as the drop zone:
|
||||
|
||||
```javascript
|
||||
var uploader = new ss.SimpleUpload({
|
||||
dropzone: 'dragbox', // ID of element to be the drop zone
|
||||
url: 'uploadHandler.php',
|
||||
name: 'uploadfile',
|
||||
responseType: 'json',
|
||||
onComplete: function(filename, response) {
|
||||
// do something with response...
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
### License ###
|
||||
Released under the MIT license.
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -1,254 +0,0 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* Simple Ajax Uploader
|
||||
* Version 2.0
|
||||
* https://github.com/LPology/Simple-Ajax-Uploader
|
||||
*
|
||||
* Copyright 2012-2015 LPology, LLC
|
||||
* Released under the MIT license
|
||||
*
|
||||
* View the documentation for an example of how to use this class.
|
||||
*/
|
||||
|
||||
class FileUpload {
|
||||
private $fileName; // Filename of the uploaded file
|
||||
private $fileSize; // Size of uploaded file in bytes
|
||||
private $fileExtension; // File extension of uploaded file
|
||||
private $fileNameWithoutExt;
|
||||
private $savedFile; // Path to newly uploaded file (after upload completed)
|
||||
private $errorMsg; // Error message if handleUpload() returns false (use getErrorMsg() to retrieve)
|
||||
private $isXhr;
|
||||
public $uploadDir; // File upload directory (include trailing slash)
|
||||
public $allowedExtensions; // Array of permitted file extensions
|
||||
public $sizeLimit = 10485760; // Max file upload size in bytes (default 10MB)
|
||||
public $newFileName; // Optionally save uploaded files with a new name by setting this
|
||||
public $corsInputName = 'XHR_CORS_TARGETORIGIN';
|
||||
public $uploadName = 'uploadfile';
|
||||
|
||||
function __construct($uploadName = null) {
|
||||
if ($uploadName !== null) {
|
||||
$this->uploadName = $uploadName;
|
||||
}
|
||||
|
||||
if (isset($_FILES[$this->uploadName])) {
|
||||
$this->isXhr = false;
|
||||
|
||||
if ($_FILES[$this->uploadName]['error'] === UPLOAD_ERR_OK) {
|
||||
$this->fileName = $_FILES[$this->uploadName]['name'];
|
||||
$this->fileSize = $_FILES[$this->uploadName]['size'];
|
||||
|
||||
} else {
|
||||
$this->setErrorMsg($this->errorCodeToMsg($_FILES[$this->uploadName]['error']));
|
||||
}
|
||||
|
||||
} elseif (isset($_SERVER['HTTP_X_FILE_NAME']) || isset($_GET[$this->uploadName])) {
|
||||
$this->isXhr = true;
|
||||
|
||||
$this->fileName = isset($_SERVER['HTTP_X_FILE_NAME']) ?
|
||||
$_SERVER['HTTP_X_FILE_NAME'] : $_GET[$this->uploadName];
|
||||
|
||||
if (isset($_SERVER['CONTENT_LENGTH'])) {
|
||||
$this->fileSize = (int)$_SERVER['CONTENT_LENGTH'];
|
||||
|
||||
} else {
|
||||
throw new Exception('Content length is empty.');
|
||||
}
|
||||
}
|
||||
|
||||
if ($this->fileName) {
|
||||
$pathinfo = pathinfo($this->fileName);
|
||||
|
||||
if (array_key_exists('extension', $pathinfo) &&
|
||||
array_key_exists('filename', $pathinfo))
|
||||
{
|
||||
$this->fileExtension = strtolower($pathinfo['extension']);
|
||||
$this->fileNameWithoutExt = $pathinfo['filename'];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public function getFileName() {
|
||||
return $this->fileName;
|
||||
}
|
||||
|
||||
public function getFileSize() {
|
||||
return $this->fileSize;
|
||||
}
|
||||
|
||||
public function getExtension() {
|
||||
return $this->fileExtension;
|
||||
}
|
||||
|
||||
public function getErrorMsg() {
|
||||
return $this->errorMsg;
|
||||
}
|
||||
|
||||
public function getSavedFile() {
|
||||
return $this->savedFile;
|
||||
}
|
||||
|
||||
private function errorCodeToMsg($code) {
|
||||
switch($code) {
|
||||
case UPLOAD_ERR_INI_SIZE:
|
||||
$message = 'File size exceeds limit.';
|
||||
break;
|
||||
case UPLOAD_ERR_PARTIAL:
|
||||
$message = 'The uploaded file was only partially uploaded.';
|
||||
break;
|
||||
case UPLOAD_ERR_NO_FILE:
|
||||
$message = 'No file was uploaded.';
|
||||
break;
|
||||
case UPLOAD_ERR_NO_TMP_DIR:
|
||||
$message = 'Missing a temporary folder.';
|
||||
break;
|
||||
case UPLOAD_ERR_CANT_WRITE:
|
||||
$message = 'Failed to write file to disk.';
|
||||
break;
|
||||
case UPLOAD_ERR_EXTENSION:
|
||||
$message = 'File upload stopped by extension.';
|
||||
break;
|
||||
default:
|
||||
$message = 'Unknown upload error.';
|
||||
break;
|
||||
}
|
||||
return $message;
|
||||
}
|
||||
|
||||
private function checkExtension($ext, $allowedExtensions) {
|
||||
if (!is_array($allowedExtensions))
|
||||
return false;
|
||||
|
||||
if (!in_array(strtolower($ext), array_map('strtolower', $allowedExtensions)))
|
||||
return false;
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
private function setErrorMsg($msg) {
|
||||
if (empty($this->errorMsg))
|
||||
$this->errorMsg = $msg;
|
||||
}
|
||||
|
||||
private function fixDir($dir) {
|
||||
if (empty($dir))
|
||||
return $dir;
|
||||
|
||||
$slash = DIRECTORY_SEPARATOR;
|
||||
$dir = str_replace('/', $slash, $dir);
|
||||
$dir = str_replace('\\', $slash, $dir);
|
||||
return substr($dir, -1) == $slash ? $dir : $dir . $slash;
|
||||
}
|
||||
|
||||
// escapeJS and jsMatcher are adapted from the Escaper component of
|
||||
// Zend Framework, Copyright (c) 2005-2013, Zend Technologies USA, Inc.
|
||||
// https://github.com/zendframework/zf2/tree/master/library/Zend/Escaper
|
||||
private function escapeJS($string) {
|
||||
return preg_replace_callback('/[^a-z0-9,\._]/iSu', $this->jsMatcher, $string);
|
||||
}
|
||||
|
||||
private function jsMatcher($matches) {
|
||||
$chr = $matches[0];
|
||||
|
||||
if (strlen($chr) == 1)
|
||||
return sprintf('\\x%02X', ord($chr));
|
||||
|
||||
if (function_exists('iconv'))
|
||||
$chr = iconv('UTF-16BE', 'UTF-8', $chr);
|
||||
|
||||
elseif (function_exists('mb_convert_encoding'))
|
||||
$chr = mb_convert_encoding($chr, 'UTF-8', 'UTF-16BE');
|
||||
|
||||
return sprintf('\\u%04s', strtoupper(bin2hex($chr)));
|
||||
}
|
||||
|
||||
public function corsResponse($data) {
|
||||
if (isset($_REQUEST[$this->corsInputName])) {
|
||||
$targetOrigin = $this->escapeJS($_REQUEST[$this->corsInputName]);
|
||||
$targetOrigin = htmlspecialchars($targetOrigin, ENT_QUOTES, 'UTF-8');
|
||||
return "<script>window.parent.postMessage('$data','$targetOrigin');</script>";
|
||||
}
|
||||
return $data;
|
||||
}
|
||||
|
||||
private function saveXhr($path) {
|
||||
if (false !== file_put_contents($path, fopen('php://input', 'r')))
|
||||
return true;
|
||||
return false;
|
||||
}
|
||||
|
||||
private function saveForm($path) {
|
||||
if (move_uploaded_file($_FILES[$this->uploadName]['tmp_name'], $path))
|
||||
return true;
|
||||
return false;
|
||||
}
|
||||
|
||||
private function save($path) {
|
||||
if (true === $this->isXhr)
|
||||
return $this->saveXhr($path);
|
||||
return $this->saveForm($path);
|
||||
}
|
||||
|
||||
public function handleUpload($uploadDir = null, $allowedExtensions = null) {
|
||||
if (!$this->fileName) {
|
||||
$this->setErrorMsg('Incorrect upload name or no file uploaded');
|
||||
return false;
|
||||
}
|
||||
|
||||
if ($this->fileSize == 0) {
|
||||
$this->setErrorMsg('File is empty');
|
||||
return false;
|
||||
}
|
||||
|
||||
if ($this->fileSize > $this->sizeLimit) {
|
||||
$this->setErrorMsg('File size exceeds limit');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!empty($uploadDir))
|
||||
$this->uploadDir = $uploadDir;
|
||||
|
||||
$this->uploadDir = $this->fixDir($this->uploadDir);
|
||||
|
||||
if (!is_writable($this->uploadDir)) {
|
||||
$this->setErrorMsg('Upload directory is not writable');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (is_array($allowedExtensions))
|
||||
$this->allowedExtensions = $allowedExtensions;
|
||||
|
||||
if (!empty($this->allowedExtensions)) {
|
||||
if (!$this->checkExtension($this->fileExtension, $this->allowedExtensions)) {
|
||||
$this->setErrorMsg('Invalid file type');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
$this->savedFile = $this->uploadDir . $this->fileName;
|
||||
|
||||
if (!empty($this->newFileName)) {
|
||||
$this->fileName = $this->newFileName;
|
||||
$this->savedFile = $this->uploadDir . $this->fileName;
|
||||
|
||||
$this->fileNameWithoutExt = null;
|
||||
$this->fileExtension = null;
|
||||
|
||||
$pathinfo = pathinfo($this->fileName);
|
||||
|
||||
if (array_key_exists('filename', $pathinfo))
|
||||
$this->fileNameWithoutExt = $pathinfo['filename'];
|
||||
|
||||
if (array_key_exists('extension', $pathinfo))
|
||||
$this->fileExtension = strtolower($pathinfo['extension']);
|
||||
}
|
||||
|
||||
if (!$this->save($this->savedFile)) {
|
||||
$this->setErrorMsg('File could not be saved');
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
}
|
||||
725
etc/apps/laragon/extras/assets/css/bootstrap.min.css
vendored
725
etc/apps/laragon/extras/assets/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
@@ -1,28 +0,0 @@
|
||||
.container {
|
||||
width: auto;
|
||||
max-width: 680px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.progress {
|
||||
margin-bottom:0;
|
||||
margin-top:6px;
|
||||
margin-left:10px;
|
||||
}
|
||||
|
||||
.btn.focus {
|
||||
outline:thin dotted #333;
|
||||
outline:5px auto -webkit-focus-ring-color;
|
||||
outline-offset:-2px;
|
||||
}
|
||||
|
||||
.btn.hover {
|
||||
color:#ffffff;
|
||||
background-color:#3276b1;
|
||||
border-color:#285e8e;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background-color: yellow;
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* Simple Ajax Uploader
|
||||
* Version 2.0
|
||||
* https://github.com/LPology/Simple-Ajax-Uploader
|
||||
*
|
||||
* Copyright 2012-2015 LPology, LLC
|
||||
* Released under the MIT license
|
||||
*
|
||||
*/
|
||||
|
||||
if (isset($_SERVER['HTTP_ORIGIN'])) {
|
||||
header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
|
||||
header('Access-Control-Allow-Credentials: true');
|
||||
header('Access-Control-Max-Age: 86400'); // cache for 1 day
|
||||
}
|
||||
|
||||
// Access-Control headers are received during OPTIONS requests
|
||||
if (isset($_SERVER['REQUEST_METHOD'])) {
|
||||
|
||||
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
|
||||
|
||||
if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'])) {
|
||||
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
|
||||
}
|
||||
|
||||
if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS'])) {
|
||||
header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
|
||||
}
|
||||
|
||||
exit;
|
||||
}
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
<?php
|
||||
require('Uploader.php');
|
||||
|
||||
// Directory where we're storing uploaded images
|
||||
// Remember to set correct permissions or it won't work
|
||||
$upload_dir = '../uploads';
|
||||
|
||||
$uploader = new FileUpload('uploadfile');
|
||||
$uploader->sizeLimit = 1024*1024*1024; // Max file upload size in bytes 1GB)
|
||||
|
||||
// Handle the upload
|
||||
$result = $uploader->handleUpload($upload_dir);
|
||||
|
||||
if (!$result) {
|
||||
exit(json_encode(array('success' => false, 'msg' => $uploader->getErrorMsg())));
|
||||
}
|
||||
|
||||
echo json_encode(array('success' => true));
|
||||
@@ -1,45 +0,0 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* Simple Ajax Uploader
|
||||
* Version 2.0
|
||||
* https://github.com/LPology/Simple-Ajax-Uploader
|
||||
*
|
||||
* Copyright 2012-2015 LPology, LLC
|
||||
* Released under the MIT license
|
||||
*
|
||||
* Returns upload progress updates for browsers that don't support the HTML5 File API.
|
||||
* Falling back to this method allows for upload progress support across virtually all browsers.
|
||||
* Requires PHP 5.4+
|
||||
* Further documentation: http://php.net/manual/en/session.upload-progress.php
|
||||
*
|
||||
*/
|
||||
|
||||
session_start();
|
||||
|
||||
if (!isset($_POST[ini_get('session.upload_progress.name')])) {
|
||||
exit(json_encode(array('success' => false)));
|
||||
}
|
||||
|
||||
$key = ini_get('session.upload_progress.prefix') . $_POST[ini_get('session.upload_progress.name')];
|
||||
|
||||
if (!isset($_SESSION[$key])) {
|
||||
exit(json_encode(array('success' => false)));
|
||||
}
|
||||
|
||||
$progress = $_SESSION[$key];
|
||||
$pct = 0;
|
||||
$size = 0;
|
||||
|
||||
if (is_array($progress)) {
|
||||
|
||||
if (array_key_exists('bytes_processed', $progress) && array_key_exists('content_length', $progress)) {
|
||||
|
||||
if ($progress['content_length'] > 0) {
|
||||
$pct = round(($progress['bytes_processed'] / $progress['content_length']) * 100);
|
||||
$size = round($progress['content_length'] / 1024);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
echo json_encode(array('success' => true, 'pct' => $pct, 'size' => $size));
|
||||
@@ -1,44 +0,0 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* Simple Ajax Uploader
|
||||
* Version 2.0
|
||||
* https://github.com/LPology/Simple-Ajax-Uploader
|
||||
*
|
||||
* Copyright 2012-2015 LPology, LLC
|
||||
* Released under the MIT license
|
||||
*
|
||||
* Returns upload progress updates for browsers that don't support the HTML5 File API.
|
||||
* Falling back to this method allows for upload progress support across virtually all browsers.
|
||||
*
|
||||
*/
|
||||
|
||||
// This "if" statement is only necessary for CORS uploads -- if you're
|
||||
// only doing same-domain uploads then you can delete it if you want
|
||||
if (isset($_SERVER['HTTP_ORIGIN'])) {
|
||||
header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
|
||||
header('Access-Control-Allow-Credentials: true');
|
||||
header('Access-Control-Max-Age: 86400'); // cache for 1 day
|
||||
}
|
||||
|
||||
if (isset($_REQUEST['progresskey'])) {
|
||||
$status = apc_fetch('upload_'.$_REQUEST['progresskey']);
|
||||
} else {
|
||||
exit(json_encode(array('success' => false)));
|
||||
}
|
||||
|
||||
$pct = 0;
|
||||
$size = 0;
|
||||
|
||||
if (is_array($status)) {
|
||||
|
||||
if (array_key_exists('total', $status) && array_key_exists('current', $status)) {
|
||||
|
||||
if ($status['total'] > 0) {
|
||||
$pct = round(($status['current'] / $status['total']) * 100);
|
||||
$size = round($status['total'] / 1024);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
echo json_encode(array('success' => true, 'pct' => $pct, 'size' => $size));
|
||||
@@ -1,154 +0,0 @@
|
||||
<?php
|
||||
function formatLink($file) {
|
||||
if (isset($_SERVER['HTTPS']) &&
|
||||
($_SERVER['HTTPS'] == 'on' || $_SERVER['HTTPS'] == 1) ||
|
||||
isset($_SERVER['HTTP_X_FORWARDED_PROTO']) &&
|
||||
$_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https') {
|
||||
$protocol = 'https';
|
||||
} else {
|
||||
$protocol = 'http';
|
||||
}
|
||||
$link = sprintf('%s://%s/laragon/uploads/%s', $protocol, $_SERVER['HTTP_HOST'], $file);
|
||||
return sprintf('<a href="%s" target="_blank">%s</a>', $link, $link);
|
||||
}
|
||||
function listFiles() {
|
||||
$upload_dir = dirname(__FILE__).'\uploads';
|
||||
echo sprintf('<div>Files locate at: <b>%s</b></div>', $upload_dir);
|
||||
if ($handle = opendir($upload_dir)) {
|
||||
|
||||
while (false !== ($entry = readdir($handle))) {
|
||||
if ($entry != "." && $entry != "..") {
|
||||
echo '<div>'.formatLink($entry).'</div>';
|
||||
}
|
||||
}
|
||||
|
||||
closedir($handle);
|
||||
}
|
||||
}
|
||||
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Uploader</title>
|
||||
<link href="extras/assets/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="extras/assets/css/styles.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<div class="row" style="padding-top:10px;">
|
||||
<div class="col-xs-2">
|
||||
<button id="uploadBtn" class="btn btn-large btn-primary">Choose Files</button>
|
||||
</div>
|
||||
<div class="col-xs-10">
|
||||
<div id="progressOuter" class="progress progress-striped active" style="display:none;">
|
||||
<div id="progressBar" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="padding-top:10px;">
|
||||
<div class="col-xs-10">
|
||||
<div id="msgBox">
|
||||
</div>
|
||||
<div id="uploadedFiles">
|
||||
</div>
|
||||
<p>
|
||||
<hr />
|
||||
<div>
|
||||
<small>
|
||||
<div><u>Tip</u>: Hold Shift if you want to upload multiple files.</div>
|
||||
<div>If you want to share over the Internet, just run:</div>
|
||||
<div><b><i>ngrok http 80</i></b></div>
|
||||
</small>
|
||||
</div>
|
||||
<hr />
|
||||
<div id="listFiles">
|
||||
<?php
|
||||
listFiles();
|
||||
|
||||
//$upload_dir = dirname(__FILE__).'\uploads';
|
||||
//echo $upload_dir;
|
||||
//echo '<a href="http://'.$_SERVER['HTTP_HOST'].'/laragon/uploads/" target="_blank">'.$_SERVER['HTTP_HOST'].'</a>';
|
||||
?>
|
||||
</div>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="extras/SimpleAjaxUploader.min.js"></script>
|
||||
<script>
|
||||
function escapeTags( str ) {
|
||||
return String( str )
|
||||
.replace( /&/g, '&' )
|
||||
.replace( /"/g, '"' )
|
||||
.replace( /'/g, ''' )
|
||||
.replace( /</g, '<' )
|
||||
.replace( />/g, '>' );
|
||||
}
|
||||
|
||||
function replaceAll(str, find, replace) {
|
||||
return str.replace(new RegExp(find, 'g'), replace);
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
|
||||
var btn = document.getElementById('uploadBtn'),
|
||||
progressBar = document.getElementById('progressBar'),
|
||||
progressOuter = document.getElementById('progressOuter'),
|
||||
msgBox = document.getElementById('msgBox');
|
||||
listFiles = document.getElementById('listFiles');
|
||||
theLink = '<?php echo formatLink('{{FILE}}'); ?>';
|
||||
|
||||
var uploader = new ss.SimpleUpload({
|
||||
button: btn,
|
||||
url: 'extras/file_upload.php',
|
||||
name: 'uploadfile',
|
||||
hoverClass: 'hover',
|
||||
multiple: true,
|
||||
focusClass: 'focus',
|
||||
responseType: 'json',
|
||||
startXHR: function() {
|
||||
progressOuter.style.display = 'block'; // make progress bar visible
|
||||
this.setProgressBar( progressBar );
|
||||
},
|
||||
onSubmit: function() {
|
||||
msgBox.innerHTML = ''; // empty the message box
|
||||
btn.innerHTML = 'Uploading...'; // change button text to "Uploading..."
|
||||
},
|
||||
onComplete: function( filename, response ) {
|
||||
btn.innerHTML = 'Choose Files';
|
||||
progressOuter.style.display = 'none'; // hide progress bar when upload is completed
|
||||
|
||||
if ( !response ) {
|
||||
msgBox.innerHTML = 'Unable to upload file';
|
||||
return;
|
||||
}
|
||||
|
||||
if ( response.success === true ) {
|
||||
msgBox.innerHTML = '<strong>' + escapeTags( filename ) + '</strong>' + ' successfully uploaded.';
|
||||
uploadedFiles.innerHTML = '<div class="highlight">' + replaceAll(theLink, '{{FILE}}', filename) + '</div>' + uploadedFiles.innerHTML ;
|
||||
|
||||
} else {
|
||||
if ( response.msg ) {
|
||||
msgBox.innerHTML = escapeTags( response.msg );
|
||||
|
||||
} else {
|
||||
msgBox.innerHTML = 'An error occurred and the upload failed.';
|
||||
}
|
||||
}
|
||||
},
|
||||
onError: function() {
|
||||
progressOuter.style.display = 'none';
|
||||
msgBox.innerHTML = 'Unable to upload file';
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user