1

我想用文本输入字段完全替换现有的文件输入字段,并且所有属性都完好无损,如id,name等。我如何使用 jQuery 来做到这一点?

前奏

我有一个<input type="file" name=".." id=".." />用于基于 AJAX 的上传。(是的,对于 IE,我使用IFRAMEs 提交表单。)

上传完成后,我进入我的成功回调函数,我试图将原始文件更改<input type="file"<input type="text".

在其他浏览器中,当我简单地运行以下代码时,这可以正常工作:

$originalInput[0].type = 'text';
$originalInput[0].value = 'response code';

但这在 IE 中不起作用,我从 SO 那里得知这是一个安全问题,因此是不允许的。我想为此编写最少的代码。

4

5 回答 5

1

从user2259571的回答中,我以更短的单行方式执行了以下操作:

$originalInput
    .replaceWith( $originalInput[0].outerHTML.replace(/type="file"/, 'type="input"') );
于 2013-09-05T17:54:19.627 回答
0

我认为你可以通过放置两个输入来实现这一点,

<input type="file" name="somename1" id="someid1"/>
<input type="text" name="somename1-after" id="someid1-after" style="display:none"/>

在您请求回调中,您可以删除type="file"输入字段,去掉“-after”后缀并显示type="text"输入字段。

于 2013-09-04T15:04:48.790 回答
0
var input = $("input[type=file]");
var inputHTML = input.clone().wrapAll("<div>").parent().html();

var newinputHTML = inputHTML.replace(/type="file"/, 'type="text"');

input.replaceWith(newinputHTML);

http://jsfiddle.net/QdZDb/1/

于 2013-09-04T15:38:40.770 回答
0

万岁 jQuery

    var fileInput = $('input[type="file"]');
    var textInput = $('<input type="text"/>');

    //can copy properties here 
    textInput.value = 'response code';
    textInput.className = fileInput.className;

textInput.insertBefore(fileInput);
textInput.remove();
于 2013-09-04T14:59:00.800 回答
0

IE 不允许这样做,但解决方法可以是:

$('body').find('input:file').each(function() {
  $("<input type='text' />").attr({value: 'response code' }).insertBefore(this);
}).remove();

jQuery更改输入类型的可能重复项

于 2013-09-04T15:00:31.113 回答