0

私は決して JQuery の専門家ではないので、自分の苦境をできる限り説明しようと思います。

基本的に、次の例を見つけました: http://the-echoplex.net/demos/upload-file/は、Jquery を使用して入力ファイル ボタンの外観をカスタマイズします。

また、次の例のようなクリア ボタンを使用してファイルを削除できるようにしたいと考えていました: http://www.electrictoolbox.com/clear-upload-file-input-field-jquery/

問題は、それらを結合しようとしたときに、実際の入力ファイル ボタンがリセットされたにもかかわらず、ボタンの横に表示されるファイル パス テキストが引き続きそこに残ることです。

クリア ボタンをクリックしたときにファイル パス テキストを削除する方法はありますか? ファイル パスのテキストが JQuery (file-upload.js) のどこかに保存されていると想定しています。

どんな助けでも大歓迎です！

ここに私のHTMLがあります：

<form enctype="multipart/form-data" action="#" method="post">
      <div class="field" id="example_file">
           <label class="file-upload">
              <div class="icon-med icon-blck-upload"></div>
                   Upload
               <input type="file" name="uploadfile" />
           </label>
      </div><!--end field-->

           <input type="button" value="Clear" onclick="example_reset_html('example_file');">
</form>

これが JQuery です (一番下に明確なコードを配置しました)。

(function () {

    // import library
    eval( JELLY.unpack() );

    addDomReady( function () {

        // Load our css
        Load.css( 'file-upload.css' );

        // Create a reusable tweening object
        var tween = new Tween,

            // event handlers, including blur/focus to 
            // restore keyboard navigation
            onUploadChange = function ( e ) {

                var status = retrieveData( this, 'upload-status' );

                if ( this.value ) {
                    // IE shows the whole system path, we're reducing it 
                    // to the filename for consistency
                    var value = browser.ie ? this.value.split('\\').pop() : this.value;
                    status.innerHTML = value;
                    insertAfter( status, this.parentNode );

                    // Only tween if we're responding to an event
                    if ( e ) { 
                        tween.setElement( status ).
                            setOpacity( 0 ).
                            start({ 
                                opacity: 1, duration: 500 
                            });
                    }
                }
                else if ( status && status.parentNode ) {
                    removeElement( status );
                }

            }, 
            onUploadFocus = function () { 
                addClass( this.parentNode, 'focus' ); 
            },
            onUploadBlur = function () { 
                removeClass( this.parentNode, 'focus' ); 
            };


        Q( '.file-upload input[type=file]' ).each( function ( field ) {

            // Create a status element, and store it
            storeData( field, 'upload-status', createElement( 'span.file-upload-status' ) );

            // Bind events
            addEvent( field, 'focus', onUploadFocus );
            addEvent( field, 'blur', onUploadBlur );
            addEvent( field, 'change', onUploadChange );

            // Set current state 
            onUploadChange.call( field );

            // Move the file input in Firefox / Opera so that the button part is
            // in the hit area. Otherwise we get a text selection cursor
            // which you cannot override with CSS
            if ( browser.firefox || browser.opera ) {
                field.style.left = '-800px';
            }
            else if ( browser.ie ) {
                // Minimizes the text input part in IE
                field.style.width = '0';
            }
        });
    });

})();

//Clear Button////////////////////////////////////////////////////////////////////////////////////

function example_reset_html(id) {
    $('#' + id).html($('#' + id).html());
}
4

1 に答える 1

0

簡単な方法：

<form>
...
<span>
<input type="file"/>
<input type="button" value="Clear" onclick="jQuery(this).parent().html(jQuery(this).parent().html());"/>
</span>
...
</form>

これにより、クリアボタンの親（スパン）のすべてが破棄されて再度作成され、すべての入力データが失われます。

于 2012-05-03T23:51:45.980 に答える