I am creating a website for a client, and he wants to be able to have in one page, many upload buttons. When he clicks select files, uploadify uploads the file to the server and then changes the value of the input field "Image" to the path of the image.
The problem is that i cannot find a way to have multiple upload buttons in one page, where each one individually will fill it's own div's "Image" field. And the client will have n number of divs in the same page.
Here's my js code:
$(document).ready(function() {
$('.file_upload').uploadify({
'uploader' : 'content/plugins/category_manager/upload/js/uploadify.swf',
'script' : 'content/plugins/category_manager/upload/upload.php',
'cancelImg' : 'content/plugins/category_manager/upload/js/cancel.png',
'folder' : 'content/plugins/category_manager/upload/uploads',
'fileExt' : '*.jpg;*.gif;*.png',
'fileDesc' : 'Image Files',
'auto' : true,
'onComplete' : function(event, ID, fileObj, response, data) {
$("input[name=image]").empty(this).val(fileObj.name);
}
});
});
This code:
jQuery(".file_upload").each(function() {
jQuery(this).uploadify({
height : 30,
swf : '/uploadify/uploadify.swf',
uploader : '/script/uploadify/uploadify.php',
width : 120
});
});
works very fine.
This also requires that the ids in the .file_upload
elements are unique, even if they are not used.