Hi there,
I'm a newbie when it comes to writing plugins, but I like to learn ;).
I got the following wish. I want to write a plugin that turns a "div" with an id to a uploadform for an image file. By setting options I want to pass values for height/size/extension etc.
I want to be able to use the plugin more then once on a page. for uploading a photo and for uploading an Avatar.
I made this, but this only works for the last called div. This means that both divs are generated good, but the submit event only triggers the second upoadform and the plugin wont work. It works fine when I only have 1 instance on the page.
Anyone got an idea?
Tnx in advance
ps, I know it's not beautifull code, but as said, I'm a newbie
(function($){
$.fn.extend({
ws_uploadForm: function(options) {
var defaults = {
imagePath: "images/",
formAction: "upload.php",
uploadPath: "uploadedImages/",
defaultImage: "unknown.png",
imageMess: "250,250",
previewHeight: "100",
imageSize: "1",
extensions: "jpg|jpeg|png|gif"
}
var options = $.extend(defaults, options);
return this.each(function() {
//-------------------------------------------------
// The vars that are used in this plugin
//-------------------------------------------------
//---- The options that are set
var o = options;
//---- The upload errors
var uploadError = new Array;
uploadError[1] = 'Bestand is niet geupload'; // file is not uploaded
uploadError[2] = 'Dit is geen afbeeldingsbestand'; // No image file
uploadError[4] = 'Error tijdens het verplaatsen van het bestand'; // Error during move upload file
uploadError[5] = 'Bestand bestaat reeds'; // File allready exsits
uploadError[6] = 'Error tijdens het resizen van een jpg bestand'; // Error resizing jpg
uploadError[7] = 'Error tijdens het resizen van een gif bestand'; // Error resizing gif
uploadError[8] = 'Error tijdens het resizen van een png bestand'; // Error resizing png
uploadError[9] = 'Error tijdens het creeeren van een jpg bestand'; // Imagecreate error for jpg
//---- error[10]= Resized, not realy an error but a succes :)
uploadError[11] = 'Error tijdens het creeeren van een gif bestand'; // Imagecreate error for gif
uploadError[12] = 'Error tijdens het creeeren van een png bestand'; // Imagecreate error for png
uploadError[13] = 'Bestandstype niet toegestaan'; // Filetype not allowed
uploadError[14] = 'Bestand is te groot'; // Filetype not allowed
//---- Defining the object
obj = $(this);
//---- Defining the ID that has been set
uploadFormID = obj.attr('id')+'_';
//---- When this form is used with php and mysql, a photo could be saved
//----- Then the photo needs to come out of the DB and is in the "rel"-attribute
if(obj.attr('rel')==undefined){
var showImage = o.imagePath+o.defaultImage;
}else{
var showImage = obj.attr('rel');
}
//---- The form with buttons
var form = "\
<form action='"+o.formAction+"' method='post' enctype='multipart/form-data' target='upload_target' id='"+uploadFormID+"submitfile'>\
<img id='"+uploadFormID+"uploadImage' class='uploadImage' src='"+showImage+"' height='"+o.previewHeight+"px'/>\
<img id='"+uploadFormID+"process' src='"+o.imagePath+"ajax-loader3.gif' />\
<br /><br />\
<input name='file' type='file' id='"+uploadFormID+"fileLocation' />\
<input type='hidden' name='uploadPath' value='"+o.uploadPath+"' />\
<input type='hidden' name='imageMess' value='"+o.imageMess+"' />\
<input type='hidden' name='imageSize' value='"+o.imageSize+"' />\
<input type='hidden' id='defaultImage' value='"+o.imagePath+o.defaultImage+"' />\
<input type='submit' name='submitBtn' value='Upload' />\
<br /><br />\
<p class='text'>Toegestane extensies: "+o.extensions.replace(/\|/g,", ")+"</p>\
<p class='text'>Toegestane bestandsgrootte: "+parseFloat(o.imageSize)+" MB</p>\
<br />\
<p id='"+uploadFormID+"result' class='error'></p>\
</form>\
<iframe id='"+uploadFormID+"upload_target' name='upload_target' style='width:0;height:0;border:0px solid #fff;'>\
</iframe>";
//---- What to do when the upload file gives response
stopUpload = function (response, filename){
//---- If fileupload went good, insert image
if (response == 3 || response == 10){
$('#'+uploadFormID+'uploadImage').attr("src",filename);
$('#'+uploadFormID+'process').hide();
$('#'+uploadFormID+'fileLocation').val('');
return false;
} else {
$('#'+uploadFormID+'process').hide();
$('#'+uploadFormID+'result').html(uploadError[response]).show();
}
return true;
}
//---- Insert the form
obj.html(form);
//---- Hide the processing-image
$('#'+uploadFormID+'process').hide();
//---- Submit the form
$("#"+uploadFormID+"submitfile", obj).submit(function(){
$('#'+uploadFormID+'process',obj).show();
$('#'+uploadFormID+'result',obj).html('').hide();
});
//---- Do live check on extension, this is also checked extra in php
$("#"+uploadFormID+"fileLocation", form).change(function(){
var fileLocation = $("#"+uploadFormID+"fileLocation").val().toLowerCase();
var ext = o.extensions;
var filter = new RegExp("."+ext);
if(!fileLocation.match(filter)){
$('#'+uploadFormID+'result').html(uploadError[13]).show();
$('#'+uploadFormID+'fileLocation').val('');
}
});
});
}
});
})(jQuery);