forked from qwerty/tupali
Borrar carpeta upload
This commit is contained in:
parent
849d5661e4
commit
44e22824cd
1
upload/.gitignore
vendored
1
upload/.gitignore
vendored
@ -1 +0,0 @@
|
||||
upload/
|
||||
@ -1,342 +0,0 @@
|
||||
Change Log
|
||||
============================
|
||||
### Version 2.6.2 ###
|
||||
* Added UTF-8 encoding to `X-File-Name` request header
|
||||
|
||||
### Version 2.6.1 ###
|
||||
SimpleAjaxUploader.js:
|
||||
* Added disabled status check to file button keyboard support
|
||||
* Fixed bug in `_getProg` method where undefined error was occurring after `destroy()` method has been called
|
||||
|
||||
### Version 2.6 ###
|
||||
SimpleAjaxUploader.js:
|
||||
* Added keyboard support for file button. Pressing Enter while focused on file select button now opens file dialog box - <a href="https://github.com/LPology/Simple-Ajax-Uploader/pull/183">#183</a> (Special thanks to <a href="https://github.com/phy25">phy25</a> for this.)
|
||||
* Added new `multipleSelect` option to allow/disallow multiple file selection (default `false`)
|
||||
* Modified `multiple` option to now only control whether multiple, concurrent uploads are permitted
|
||||
* Added new `onDone( filename, status, statusText, response, uploadBtn, size )` method which fires after each individual upload finishes
|
||||
* Added new `onAllDone()` method which fires when all active uploads finish
|
||||
* Added JSHint comments to suppress "better written in dot notation" warnings
|
||||
|
||||
Uploader.php:
|
||||
* Added `getFileNameWithoutExt` method - <a href="https://github.com/LPology/Simple-Ajax-Uploader/pull/182">#182</a> (Special thanks to <a href="https://github.com/sainrew">sainrew</a> for this)
|
||||
|
||||
### Version 2.5.5 ###
|
||||
SimpleAjaxUploader.js:
|
||||
* Improved drag detection to work around Firefox bug which causes `dragenter` to fire twice (https://bugzilla.mozilla.org/show_bug.cgi?id=804036)
|
||||
* Set `dataTransfer.dropEffect` to `copy` during `dragover` event
|
||||
|
||||
Uploader.php:
|
||||
* Improved filename sanitation
|
||||
* Replaced instances of `array_key_exists` with the faster `isset`
|
||||
|
||||
### Version 2.5.4 ###
|
||||
SimpleAjaxUploader.js:
|
||||
* Added check for parent node inside of `ss.isVisible()` - <a href="https://github.com/LPology/Simple-Ajax-Uploader/issues/160">#160</a>
|
||||
|
||||
### Version 2.5.3 ###
|
||||
SimpleAjaxUploader.js:
|
||||
* Fixed issue with `dragleave` firing when hovering a child element - <a href="https://github.com/LPology/Simple-Ajax-Uploader/pull/156">#156</a> - (Special thanks to <a href="https://github.com/JulesDoe">JulesDoe</a> for this)
|
||||
|
||||
### Version 2.5.2 ###
|
||||
SimpleAjaxUploader.js:
|
||||
* Added param check before appending file to allow for manually appended files - <a href="https://github.com/LPology/Simple-Ajax-Uploader/pull/155">#155</a> (Special thanks to <a href="https://github.com/ablipan">ablipan</a> for this)
|
||||
* Fixed check of the internal variable which tracks active upload count to check as integer rather than `length` property - <a href="https://github.com/LPology/Simple-Ajax-Uploader/pull/150">#150</a> (Special thanks to <a href="https://github.com/benzamin">benzamin</a> for this)
|
||||
|
||||
Examples:
|
||||
* Cleaned up buggy code in README examples - <a href="https://github.com/LPology/Simple-Ajax-Uploader/pull/150">#150</a> (Special thanks to <a href="https://github.com/benzamin">benzamin</a> for this)
|
||||
|
||||
### Version 2.5.1 ###
|
||||
SimpleAjaxUploader.js:
|
||||
* When returning `false` from `onSubmit()`, files will now be removed from queue automatically
|
||||
|
||||
### Version 2.5.0 ###
|
||||
SimpleAjaxUploader.js:
|
||||
* Removed additional name parameter from XHR uploads - <a href="https://github.com/LPology/Simple-Ajax-Uploader/issues/141">#141</a> (Special thanks to <a href="https://github.com/djxhero">djxhero</a> for this one)
|
||||
|
||||
### Version 2.4 ###
|
||||
SimpleAjaxUploader.js:
|
||||
* `multipart` option now defaults to `true`
|
||||
* `noParams` option now defaults to `true`
|
||||
|
||||
<strong>Note:</strong> One or both of the above changes may be potentially breaking for anyone not using the included Uploader.php class. If this is the case, the fix is to explicitly set both of these options to `false` in your plugin settings. More info: <a href="https://github.com/LPology/Simple-Ajax-Uploader/issues/137">#137</a>
|
||||
|
||||
* Added form integration functionality -- new option `form` and new method `setForm()`. See README.md for details
|
||||
* Added `addButton()` method for adding upload buttons - <a href="https://github.com/LPology/Simple-Ajax-Uploader/issues/104">#104</a>
|
||||
* Added `addDZ()` method for designating an element as a drop zone
|
||||
* Added `customProgressHeaders` option to include additional, custom request headers to upload progress update requests in legacy browsers
|
||||
* Added `autoCalibrate` option (default `true`). When `autoCalibrate` is `true`, upload buttons which are not visible at initialization will be auto reset with `updatePosition()` upon becoming visible
|
||||
* Added `onBlankSubmit()` callback function to be called when user attempts to submit without selecting a file - <a href="https://github.com/LPology/Simple-Ajax-Uploader/issues/101">#101</a>
|
||||
* Improved event handler management for iFrame uploads
|
||||
* Reconfigured code structure into more logical format
|
||||
|
||||
### Version 2.3 ###
|
||||
SimpleAjaxUploader.js:
|
||||
* Added UTF-8 encoding to XHR request headers in order to handle all characters/languages - <a href="https://github.com/LPology/Simple-Ajax-Uploader/issues/126">#126</a>, <a href="https://github.com/LPology/Simple-Ajax-Uploader/issues/128">#128</a>
|
||||
* Added `encodeHeaders` option to enable/disable UTF-8 encoding of XHR request headers (default is `true`)
|
||||
* Removed `encodeCustomHeaders` option, as it is no longer necessary with newly added UTF-8 encoding for all headers
|
||||
* `onChange()` callback function now receives the selected file as its 5th argument - <a href="https://github.com/LPology/Simple-Ajax-Uploader/issues/132">#132</a>
|
||||
* Added `withCredentials` option to include user credentials in upload request (default is `false`)
|
||||
* Updated `ss.trim()` to use native String.trim if available
|
||||
* Drag and drop file selection now correctly honors `return false` from `onChange()` callback function
|
||||
* Updated drag and drop functionality to cancel default action for `ondragover` and `ondragenter` per https://msdn.microsoft.com/library/ms536929(v=vs.85).aspx
|
||||
|
||||
### Version 2.2.4 ###
|
||||
SimpleAjaxUploader.js:
|
||||
* Added pre-check for element and class name params to `ss.hasClass`, `ss.addClass`, and `ss.removeClass` methods
|
||||
|
||||
Uploader.php:
|
||||
* Added `getMimeType($filename)` method for detecting the MIME Content-type of a file using the PHP finfo class
|
||||
* Added `isWebImage($filename)` method for checking whether a file is either a GIF, PNG, or JPEG using exif_imagetype
|
||||
|
||||
More info about the new methods can be found at: https://www.lpology.com/code/ajaxuploader/phpdocs.php
|
||||
|
||||
### Version 2.2.3 ###
|
||||
SimpleAjaxUploader.js:
|
||||
* Fixed bug in `destroy()` method that was throwing error in property delete loop
|
||||
|
||||
### Version 2.2.2 ###
|
||||
* Switched to an improved UMD implementation
|
||||
* `X-File-Name` request header is now encoded when `encodeCustomHeaders` is set to `true`
|
||||
* Added a few small mem leak fixes for IE9 and older
|
||||
|
||||
### Version 2.2.1 ###
|
||||
SimpleAjaxUploader.js:
|
||||
* Added file size as argument passed to `onComplete( filename, response, uploadBtn, size )` callback function
|
||||
* Added file size as argument passed to `onError( filename, type, status, statusText, response, uploadBtn, size )` callback function
|
||||
* Added file size as argument passed to `onAbort( filename, uploadBtn, size )` callback function
|
||||
|
||||
Package Management:
|
||||
* Added package.json
|
||||
* Added bower.json
|
||||
* Added CommonJS support
|
||||
|
||||
Documentation:
|
||||
* Updated API reference to fix missing and incomplete SimpleAjaxUploader.js API coverage
|
||||
|
||||
### Version 2.2 ###
|
||||
SimpleAjaxUploader.js:
|
||||
* Upload buttons are now clickable for 100% of height
|
||||
* Changed mouseover and mouseout events from input field to div wrapper for better responsiveness
|
||||
* Fixed bug where file input layout visibility was not returning to invisible on mouseout if `hoverClass` option not defined
|
||||
|
||||
Uploader.php:
|
||||
* Added check to verify that upload directory exists before checking writability in order to provide more precise error messages
|
||||
|
||||
Documentation:
|
||||
* Added FAQ: https://www.lpology.com/code/ajaxuploader/faq.php
|
||||
|
||||
### Version 2.1.1 ###
|
||||
SimpleAjaxUploader.js:
|
||||
* Fixed `onChange()` button argument bug - <a href="https://github.com/LPology/Simple-Ajax-Uploader/pull/115">#115</a> (Special thanks to <a href="https://github.com/zaygraveyard">zaygraveyard</a> for this.)
|
||||
|
||||
### Version 2.1 ###
|
||||
SimpleAjaxUploader.js:
|
||||
* Headers are no longer URL encoded by default. A new option `encodeCustomHeaders` has been added, which when set to `true` will result in custom headers being URL encoded.
|
||||
* Added `updatePosition()` method for correcting the position of the upload button after interacting with form - <a href="https://github.com/LPology/Simple-Ajax-Uploader/issues/105">#105</a> - (Special thanks to <a href="https://github.com/vovayatsyuk">vovayatsyuk</a> for this.)
|
||||
* Fixed drop zone element z-index bug
|
||||
* Moved verification of drop zone element to inside of constructor
|
||||
|
||||
### Version 2.0.1 ###
|
||||
Uploader.php:
|
||||
* Fixed file name security vulnerability - <a href="https://github.com/LPology/Simple-Ajax-Uploader/issues/91">#91</a> - (Special thanks to <a href="https://github.com/nickgardos">nickgardos</a> for this)
|
||||
|
||||
SimpleAjaxUploader.js:
|
||||
* Added support for Cyrillic characters in file names - <a href="https://github.com/LPology/Simple-Ajax-Uploader/pull/88">#88</a> - (Special thanks to <a href="https://github.com/a-dorosh">a-dorosh</a> for this)
|
||||
* Fixed issue with drag class not being removed on drag error
|
||||
|
||||
### 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,272 +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
|
||||
|
||||
### Frequently Asked Questions ###
|
||||
Visit the new <a href="https://www.lpology.com/code/ajaxuploader/faq.php">FAQ</a> for solutions to the most common issues.
|
||||
|
||||
### 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
|
||||
//declare somewhere: <div id="progressBox"></div> where you want to show the progress-bar(s)
|
||||
progressBox = document.getElementById('progressBox'); //on page container for progress bars
|
||||
|
||||
// Assign each element its corresponding class
|
||||
progress.className = 'progress progress-striped';
|
||||
bar.className = 'progress-bar progress-bar-success';
|
||||
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.
|
||||
|
||||
### Form Integration ###
|
||||
|
||||
To integrate the plugin with an existing form so that file uploads include all input fields contained in the form, simply pass the form element to the `form` option, or use the `setForm( form )` instance method.
|
||||
|
||||
Form integration respects any HTML5 validation attributes. Invalid input values will prevent the upload from occurring.
|
||||
|
||||
By default, the plugin will override native submission of the form. Submit attempts will be caught and instead files will be uploaded along with the form data. To disable this behavior, set the `overrideSubmit` to `false`. Setting `overrideSubmit` to `false` will require that the `submit` instance method be manually called in order to upload files and form data together.
|
||||
|
||||
<strong>Note:</strong> Only use form integration if a file upload is required to be submitted with the form.
|
||||
|
||||
### 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,21 +0,0 @@
|
||||
{
|
||||
"name": "simple-ajax-uploader",
|
||||
"description": "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.",
|
||||
"version": "2.6.2",
|
||||
"main": "SimpleAjaxUploader.js",
|
||||
"keywords": [
|
||||
"ajax",
|
||||
"upload",
|
||||
"cors",
|
||||
"php",
|
||||
"cross-browser"
|
||||
],
|
||||
"repository": [
|
||||
{
|
||||
"type": "git",
|
||||
"url": "git://github.com:LPology/Simple-Ajax-Uploader.git"
|
||||
}
|
||||
],
|
||||
"homepage": "https://github.com/LPology/Simple-Ajax-Uploader",
|
||||
"license": "MIT"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@ -1,23 +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;
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
<?php
|
||||
require(dirname(__FILE__) . '/../../extras/Uploader.php');
|
||||
|
||||
// Directory where we're storing uploaded images
|
||||
// Remember to set correct permissions or it won't work
|
||||
$upload_dir = 'upload_files/';
|
||||
|
||||
$uploader = new FileUpload('uploadfile');
|
||||
|
||||
// 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,199 +0,0 @@
|
||||
|
||||
<!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>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 792 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 724 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 91 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 845 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
@ -1,303 +0,0 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* Simple Ajax Uploader
|
||||
* Version 2.6.2
|
||||
* https://github.com/LPology/Simple-Ajax-Uploader
|
||||
*
|
||||
* Copyright 2012-2017 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 = 100485760; // 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) {
|
||||
$this->fileName = $this->sanitizeFilename($this->fileName);
|
||||
$pathinfo = pathinfo($this->fileName);
|
||||
|
||||
if (isset($pathinfo['extension']) &&
|
||||
isset($pathinfo['filename']))
|
||||
{
|
||||
$this->fileExtension = strtolower($pathinfo['extension']);
|
||||
$this->fileNameWithoutExt = $pathinfo['filename'];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private function sanitizeFilename($name) {
|
||||
$name = trim($this->basename(stripslashes($name)), ".\x00..\x20");
|
||||
|
||||
// Use timestamp for empty filenames
|
||||
if (!$name) {
|
||||
$name = str_replace('.', '-', microtime(true));
|
||||
}
|
||||
|
||||
return $name;
|
||||
}
|
||||
|
||||
private function basename($filepath, $suffix = null) {
|
||||
$splited = preg_split('/\//', rtrim($filepath, '/ '));
|
||||
return substr(basename('X'.$splited[count($splited)-1], $suffix), 1);
|
||||
}
|
||||
|
||||
public function getFileName() {
|
||||
return $this->fileName;
|
||||
}
|
||||
|
||||
public function getFileSize() {
|
||||
return $this->fileSize;
|
||||
}
|
||||
|
||||
public function getFileNameWithoutExt() {
|
||||
return $this->fileNameWithoutExt;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
public function getMimeType($path) {
|
||||
$finfo = new finfo(FILEINFO_MIME_TYPE);
|
||||
$fileContents = file_get_contents($path);
|
||||
$mime = $finfo->buffer($fileContents);
|
||||
$fileContents = null;
|
||||
return $mime;
|
||||
}
|
||||
|
||||
public function isWebImage($path) {
|
||||
$pathinfo = pathinfo($path);
|
||||
|
||||
if (isset($pathinfo['extension'])) {
|
||||
if (!in_array(strtolower($pathinfo['extension']), array('gif', 'png', 'jpg', 'jpeg')))
|
||||
return false;
|
||||
}
|
||||
|
||||
$type = exif_imagetype($path);
|
||||
|
||||
if (!$type)
|
||||
return false;
|
||||
|
||||
return ($type == IMAGETYPE_GIF || $type == IMAGETYPE_JPEG || $type == IMAGETYPE_PNG);
|
||||
}
|
||||
|
||||
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 (!file_exists($this->uploadDir)) {
|
||||
$this->setErrorMsg('Upload directory does not exist');
|
||||
return false;
|
||||
|
||||
} else if (!is_writable($this->uploadDir)) {
|
||||
$this->setErrorMsg('Upload directory exists, but 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 (isset($pathinfo['filename']))
|
||||
$this->fileNameWithoutExt = $pathinfo['filename'];
|
||||
|
||||
if (isset($pathinfo['extension']))
|
||||
$this->fileExtension = strtolower($pathinfo['extension']);
|
||||
}
|
||||
|
||||
if (!$this->save($this->savedFile)) {
|
||||
$this->setErrorMsg('File could not be saved');
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,34 +0,0 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* Simple Ajax Uploader
|
||||
* Version 2.6.2
|
||||
* https://github.com/LPology/Simple-Ajax-Uploader
|
||||
*
|
||||
* Copyright 2012-2017 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,45 +0,0 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* Simple Ajax Uploader
|
||||
* Version 2.6.2
|
||||
* https://github.com/LPology/Simple-Ajax-Uploader
|
||||
*
|
||||
* Copyright 2012-2017 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.6.2
|
||||
* https://github.com/LPology/Simple-Ajax-Uploader
|
||||
*
|
||||
* Copyright 2012-2017 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,26 +0,0 @@
|
||||
{
|
||||
"name": "simple-ajax-uploader",
|
||||
"description": "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.",
|
||||
"version": "2.6.2",
|
||||
"main": "SimpleAjaxUploader.js",
|
||||
"keywords": [
|
||||
"ajax",
|
||||
"upload",
|
||||
"cors",
|
||||
"php",
|
||||
"cross-browser"
|
||||
],
|
||||
"maintainers": [
|
||||
{
|
||||
"name": "LPology, LLC",
|
||||
"email": "info@lpology.com",
|
||||
"web": "https://www.lpology.com"
|
||||
}
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/LPology/Simple-Ajax-Uploader.git"
|
||||
},
|
||||
"license": "MIT",
|
||||
"homepage": "https://github.com/LPology/Simple-Ajax-Uploader"
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
hola mundo
|
||||
Loading…
Reference in New Issue
Block a user