The UploaderPreviewer jQuery Plugin allows to preview an image that has been selected in a form.
The image is sent to the server and resized when it is selected. Then it is displayed.
The images are not stored till the "Save" button is pressed. Till then they are kept in a temporary directory and deleted if the user exits or reloads the page.
The images may be stored with a descriptive name. For it, three random keywords are taken from a given keyword list that may come from the product name, tags, address, etc. This feature is useful for SEO.
Last version: 2.3
Download this demo with last version of uploaderPreviewer
When a file field is changed, the selected file is uploaded to a temporary directory with a temporary filename. It is resized to medium and thumb sizes, and the thumb image is previewed.
When the user clicks the "Save" button, the files in the temporary directory are moved to the uploads directory.
A list of keywords can be indicated to construct the final filename. This keywords may come from the product name, tags, address, etc. This feature is useful for SEO purposes.
If there is an error in the upload process, it is displayed above the corresponding file field.
If the user doesn't save the form and exits or reloads the page the files in the temporary directory are deleted, in order not keep unnecessary files.
Write in the page an imageForms class div:
<div class="imageForms"></div>
It must be initialized in the $(document).ready()
jQuery function:
$('div.imageForms').append($.uploaderPreviewer.createImageForms());
The number of image forms that will be created is defined by the
property formsCount, in uploaderPreviewer.js.
It may be overwritten in the optional options parameter
of createImageForms().
Write in the page an imageForms class div with an
images attribute, containing the filenames of the
uploaded files:
<div class="imageForms" images="image1.png,image2.jpg,image3.gif"></div>
It must be initialized in the $(document).ready() jQuery function:
if ($('div.imageForms[images]').length) {
var imageFilenames = $('div.imageForms[images]').attr('images').split(',');
$.uploaderPreviewer.populateImages(imageFilenames);
$('div.imageForms[images]').removeAttr('images');
}
The /uploads directory and its subdirectories must
have write permission.
The configuration of the server side is all done in the
configuration.php file.
$pathnames: Used server pathnames.
Url root must be set.
$uploadData: Set the different dimensions to resize
the images (large, medium, thumb...). You can create or remove
a dimension on demand. A folder will be created in /uploads
for every dimension.
The /uploads/thumb directory is required
to populate the images if the plugin is being used to update. It
can be changed though if the $.uploaderPreviewer.uploadsThumbDir
property is changed.
$data['fileFieldName']: The name of the image field.
Normally there is no use on changing this.
$data['allowedImageTypes']: The mime types of the
image types you want to allow.
$data['maxImageSize'], $data['maxImageDimension']:
Maximum image size and dimension you want to allow. The image must
be uploaded to check these properties, so if the uploaded file is
bigger than the allowed by the server, it will fail before checking.
$messages: Server text messages.
The configuration of the client side is done at the top of
following javascript files: uploaderPreviewer.js and
itemForm.js.
uploaderPreviewer.js:
formsCount: Number of image forms you want. They
will be created inside the div.imageForms placed
in the html code.
allowedImageTypes: The extensions of the image types
you want to allow. This is easily breakable, so a better check
is performed on the server side.
uploadImageAjaxUrl: The ajax url that performs the
image upload. It is called when a new image is selected by the
user. Default: php/uploadImage.php.
removeImageAjaxUrl: The ajax url that performs the
image remove. It is called when the user clicks the remove button,
when a new image is selected and when the user exits or refreshes
the webpage, to delete the non used images in the temp directories.
Default: php/removeImage.php.
uploadsThumbDir: Directory used to populate the
images if the plugin is being used to update.
Default: uploads/thumb/.
messages: Client text messages of the dynamic upload.
itemForm.js:
insertAjaxUrl: The ajax url that performs the
data saving when the plugin is used to insert.
Default: php/insert.php.
updateAjaxUrl: The ajax url that performs the
data saving when the plugin is used to update.
Default: php/update.php.
insertOrUpdateAjaxUrl: Stores the ajax url that will
be called when saving the data. Managed internally.
savedUrl: Url where the user will be redirected after
a successful saving. After an unsuccessful saving, an error message
is displayed and the user remains on the same webpage.
Default: /saved.php.
savingDialogMessage: Set if a dialog box with a
progress bar will be displayed when the save button is clicked
while there are images loading.
saveOkDialogMessage: Set if a dialog box will be
displayed if the saving was successful. After this dialog is closed
(or not displayed), the user is redirected to the url set in
savedUrl.
itemId: The id of the image that is being updated.
Managed internally.
loadingTimeout: Maximum time to wait when the save
button is clicked and there are images loading. Set in milliseconds.
Default: 2000.
checkingIntervalTime: Checking interval when the save
button is clicked and there are images loading. Set in milliseconds.
Default: 500.
progressBarInterval: Interval of the progress bar
displayed in a dialog box when the save button is clicked and
there are images loading.
Default: 5.
messages: Client text messages of the data form.
These are the main files of the plugin. They manage the dynamic uploading, resizing and previewing of the images.
/js/uploaderPreviewer.js/php/uploadedFile.phpManage the saving and uploading of the uploaded files from the temporary directory to the final one.
/js/itemForm.js/php/uploadedFile.php/php/removeImage.phpIncludes the configuration parameters, like upload paths, maximum image size, etc.
/php/configuration.phpIncludes utility functions, like displaying dialog box, display errors, etc.
/js/globalFunctions.jsManage the ajax requests to insert and upload files. The upload file has no functionality in this demo, as it requires the database stored images filenames, in order to compare them with the new ones and see if they have been changed.
/php/insert.php/php/upload.phpjQuery and jQuery UI libraries. The jQuery UI library is only used to display dialog boxes and a progress bar.
/js/jquery-1.4.2.min.js/js/jquery-ui-1.8rc2.custom.min.jsconfiguration.php: Configuration of server values,
such as paths, dimensions of the images (large, medium, thumb...
add or remove on demand), allowed image types, max image size,
max image dimension, etc. Text messages are also set here.
Url root must be set.
itemForm.js: Configuration of form values, such as
insert and update urls, image loading time out, loading check
interval, loading progress bar interval, etc. Text messages are
also set here.
uploaderPreviewer.js: Configuration of form values,
such as number of image forms to handle (may be overwritten in
$.uploaderPreviewer.createImageForms), allower image types (client
side), etc. Text messages are also set here.
index.php/$(document).ready(): Place this function
somewhere in your project. Here are initialized the image forms
and the save button. The image forms are created by calling
$.uploaderPreviewer.createImageForms(). This function may pass
an optional argument, options, to overwrite the
$.uploaderPreviewer properties. If the form is to update, the
images are populated here. The save button will call an insert or
update function depending on if there is an attribute called itemId.
itemForm.js/$.itemForm.insert(): This function is
called by the save button when images are being inserted, not updated.
itemForm.js/$.itemForm.update(itemId): This function
is called by the save button when images are being updated, not inserted.
itemForm.js/save(): Calls validateData()
and submits the form.
itemForm.js/validateData(): Validates the form's data.
itemForm.js/$.itemForm.submitFormIfNotImageLoading():
Waits till there are no images loading to submit the form. The time
out value is set in $.itemForm.loadingTimeout. Other
interesting values are $.itemForm.checkingIntervalTime
and $.itemForm.progressBarInterval.
itemForm.js/$.itemForm.submitForm(): Gets the images'
and other form's values and submits them to the insert or update
url (set when clicked save button).
insert.php: Manages the data insert (images and other
values). Returns some result to javascript.
update.php: Manages the data update (images and other
values). Returns some result to javascript.
itemForm.js/$.itemForm.saved(): Manages the saving
result. If it was ok, a dialog is displayed and when it is closed
the user is redirected to another webpage. If there was an error,
a dialog is displayed and the user remains in the same webpage.
saved.php: Webpage after submitting the form.
sleep(5);
before the return statement, at the end of the script.uploaderPreviewer.js > checkImageType()itemForm.js > validateData()uploadImage.php.
If you want to leave any comment, please post it here
http://www.webdeveloper.com/forum/showthread.php?t=209720
Si quieres dejar algún comentario en español, por favor, hazlo aquí
http://www.forosdelweb.com/f127/subir-reducir-vista-previa-imagen-con-ajax-ejemplo-completo-702709/