sharma I
Joined: 13 Jun 2008
Posts: 130
|
 Posted: Mon Aug 03, 2009 6:51 am Post subject: |
 |
|
Hi Satya,
For this,
you have to add multifile_compressed.js file in your public/javascripts
1) public/javascripts/multifile_selector.js
function MultiSelector( list_target, max )
{
this.list_target = list_target;
this.count = 0;
this.id = 0;
if( max )
{
this.max = max;
}
else
{
this.max = -1;
};
this.addElement = function( element )
{
if( element.tagName == 'INPUT' && element.type == 'file' )
{
element.name = 'file_' + this.id++;
element.multi_selector = this;
element.onchange = function()
{
var new_element = document.createElement( 'input' );
new_element.type = 'file';
this.parentNode.insertBefore( new_element, this );
this.multi_selector.addElement( new_element );
this.multi_selector.addListRow( this );
this.style.position = 'absolute';
this.style.left = '-1000px';
new_element.style.width = '300px';
new_element.size = '32';
};
if( this.max != -1 && this.count >= this.max )
{
element.disabled = true;
};
this.count++;
this.current_element = element;
}
else
{
alert( 'Error: not a file input element' );
};
};
this.addListRow = function( element )
{
var new_row = document.createElement( 'div' );
var new_row_button = document.createElement( 'input' );
new_row_button.type = 'image';
new_row_button.src= "/images/delete.png"
//new_row_button.value = 'Delete';
new_row.element = element;
new_row_button.onclick= function()
{
this.parentNode.element.parentNode.removeChild( this.parentNode.element );
this.parentNode.parentNode.removeChild( this.parentNode );
this.parentNode.element.multi_selector.count--;
this.parentNode.element.multi_selector.current_element.disabled = false;
return false;
};
if (element.value.length > 12)
{
new_row.innerHTML = element.value.slice(0,12)+'.. ';
}
else
{
new_row.innerHTML = element.value+'...'
}
new_row.appendChild( new_row_button );
this.list_target.appendChild( new_row );
};
};
2) In your upload_images.rhtml file
<% form_for :upload_photos, :url => { :controller =>'<controller_name>', :action => "<method_name>" }
<%= javascript_include_tag "multifile_compressed" %>
<div class="contacts_main new_sport_main">
<div class="msg_upphotos">Select Image (max 10)</div>
<div class="msg_input"><%= file_field "image", "data" ,:style=>'float:left; ', :size => 32 %> </div>
<div class="msg_input1"><input type="image" src="/images/submit.jpg" ></div>
</div>
<div id="files_list" class="up_mar"></div>
<script>
var multi_selector = new MultiSelector( document.getElementById("files_list"), 10);
multi_selector.addElement( document.getElementById("image_data") );
</script>
<div class="new_clear"></div>
<% end -%>
3) In your controller
def images_upload
@team_pictures = Picture.new
end
def picture_create
i = 0
while params['file_'+i.to_s] != ""
@team_pictures = TeamPicture.new
p = Hash[:teampictures =>{"image_url"=>""}]
p[:teampictures][:image_url] = params["file_"+i.to_s]
@team_pictures.image_url = p[:teampictures][:image_url]
if p[:teampictures][:image_url] != nil
@team_pictures.save
end
i += 1
end
redirect_to root_url
end
Note: In the above code,
1) redirect_to root_url is your path to redirect the form after saving the images.
2) var multi_selector = new MultiSelector( document.getElementById("files_list"), 10);
Here, number 10 is the limit of the images to upload
I hope this can helps you.
Thank You,
Sarma |
|
