Question

到目前为止，我不是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());
}

Answer 1

简单方法：

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

这会破坏所有清除按钮父级（span）并再次创建它，所有输入数据都将丢失。

如何使用JQuery清除自定义文件输入

1 个答案: