AJAX upload triggered from a specific select option

I'm looking to add an option to my layout page to allow people to upload new logos 开发者_如何转开发on the fly. Currently users can select the image they'd like via a drop-down select element. I'd like to add an option at the end which allows them to upload a new image. I'd then refresh the image select elements with the new addition.

HTML example:

<select name='image_select' id='image_select_id' class='input_select' title='Select Image 1'>
  <option value='0' selected = 'selected'>--Select Logo--</option>
  <option value='test.jpg'>test.jpg</option>
  <option value='test2.jpg'>test2.jpg</option>
  <option value='add' class='upload_option'>Add new image...</option>
</select>

I'm using AJAXUpload for other uploading functions, but the iFrame doesn't seem to play nice in this instance. Does anyone have any suggestions about how to make this work?

The only way to uplaod an image in a AJAX way is via an iframe. If i had to advise a way i would have it so that. The user selects Add new images. An onselect function detects this and displays a form in a html box underneath. You have that form's "target" set to the ID of the iframe. Also have a onSubmit command on the form. The user hits submit, the file is sent though an iframe, you can then use the onSubmit tag to get your javascript to pull up a loading bar or what ever you want.