on 1/31/08 1:52 AM, Diego A. at [EMAIL PROTECTED] wrote:
>
> I've tried for a long time to do this and as far as I know: it just
> can't be done. Perhaps the next generation of browsers will allow us
> developers to call the file seclection box like this
> "window.chooseFile", just like we can use "window.prompt"...
>
> If this does turn out to be possible, eventually, then I'll add it to
> my multiple file upload plugin...
>
> On Jan 30, 4:11 am, "Steffan A. Cline" <[EMAIL PROTECTED]> wrote:
>> on 1/29/08 7:58 PM, Hamish Campbell at [EMAIL PROTECTED] wrote:
>>
>>
>>
>>
>>
>>> Some code would be useful - you've said that .click() doesn't work in
>>> FF, but it probably isn't the .click() bit that isn't working.
>>
>>> One suggestion (untested) is that you include both the normal button
>>> and the new image, but hide the image with CSS by default. This means
>>> that if JS is disabled, the user can still click the normal button.
>>
>>> Then with jQuery, hide the button and show the image on
>>> document.ready. Then apply a trigger to the image that fires the
>>> normal button action. It means you shouldn't need to code anything
>>> special - just piggy-back on the usual action of the button.
>>
>>> Eg:
>>
>>> $("#myImage").click(function () {
>>> $("#fileButton").trigger('click');
>>> });
>>
>>> On Jan 30, 8:01 am, "Steffan A. Cline" <[EMAIL PROTECTED]> wrote:
>>>> on 1/29/08 11:57 AM, Mika Tuupola at [EMAIL PROTECTED] wrote:
>>
>>>>> On Jan 29, 2008, at 7:08 PM, Steffan A. Cline wrote:
>>
>>>>>> I know there is a plug-in for styling file inputs but what about
>>>>>> using a
>>>>>> custom image instead? I need to do something where I have an ADD and a
>>>>>> DELETE button side by side. I tried this using .click() and it worked
>>>>>> flawlessly but alas FF does not support it! How stupid!.
>>
>>>>> What are you trying to achieve? What does ADD and DELETE buttons do?
>>
>>>>> --
>>>>> Mika Tuupola
>>>>> http://www.appelsiini.net/
>>
>>>> The add button would simply pop up the file selector as clicking on the
>>>> actual file button would do. The delete button would set a hidden flag to
>>>> remove the stored file.
>>
>>>> See the previous thread ".click()" This described the previous method which
>>>> I gave up on.
>>
>>>> Thanks
>>
>>>> Steffan
>>
>> Well, I tried many variations of .click() with FF and according to this
>> link:
>>
>> http://www.quirksmode.org/dom/inputfile.html
>>
>> reads:
>>
>> "The click() method allows you to simulate a click on a form field.
>> Checkboxes get toggled, radios selected, and so on. Unfortunately Mozilla
>> and Opera haven't added this method to file upload fields. I wonder why,
>> adding it is not really a security risk since the worst that can happen is
>> that the file selection window pops up.
>>
>> So unfortunately we cannot use this simple solution."
>>
>> I hadn't tried your "trigger" method. Did you test it in FF? I just did and
>> unfortunately as said on quirksmode that does not work :( but it does on
>> everything else.
>>
>> What else do you suggest?
>>
>> Thanks
>>
>> Steffan
>>
I finally figured it out. I have a working version using CSS.
<style type="text/css"><!--
.input-file{
position:relative;
zoom:1; /*clear float*/
overflow:hidden; /*clear float*/
}
.input-file img { cursor: pointer }
.input-file label{
float:left;
white-space:nowrap;
position:relative;
z-index:1;
left:0;
top:0;
overflow:hidden;
display:inline;
cursor: pointer;
}
.input-file label input{
position:absolute;
right:0;
top:0;
opacity:0;
zoom:1;
filter:alpha(opacity=0);
cursor:pointer;
}
--></style>
<div class="input-file">
<label><img src="/add_button.gif" border="0" /><input type="file"
name="myfile" /></label> <img src="/delete_button.gif" border="0" />
</div>
Works in FF-Mac, Safari-Mac, IE6&7-PC
I wish this could be incorporated into the jQuery plugin. I am not that well
versed yet enough to do this. While basic it could be done to have a dummy
field that strips the path and shows just the file name. That is my plan on
the real page.
Any thoughts anyone?
Thanks
Steffan
---------------------------------------------------------------
T E L 6 0 2 . 7 9 3 . 0 0 1 4 | F A X 6 0 2 . 9 7 1 . 1 6 9 4
Steffan A. Cline
[EMAIL PROTECTED] Phoenix, Az
http://www.ExecuChoice.net USA
AIM : SteffanC ICQ : 57234309
YAHOO : Steffan_Cline MSN : [EMAIL PROTECTED]
GOOGLE: Steffan.Cline Lasso Partner Alliance Member
---------------------------------------------------------------
