web-dev-qa-db-ja.com

Javascriptでファイル入力要素のクローンを作成します

ユーザーがアップロードするファイルを参照して選択した後に複製する必要があるファイル入力要素があります。私はobj.cloneNode（）を使用することから始めましたが、IEで使用してみるまでは、すべて正常に機能していました。

それ以来、jQueryのcloneメソッドを次のように使用してみました。

var tmp = jQuery('#categoryImageFileInput_'+id).clone();
var clone = tmp[0];

FireFoxでは期待どおりに機能しますが、IEでは機能しません。

私は立ち往生しています。誰か提案がありますか？

javascriptjqueryinternet-explorerclone
20
Anti-Dentite

ファイルフォームフィールドの編集はセキュリティリスクであるため、ほとんどのブラウザで無効になっており、Firefoxではshould無効になっています。この機能に依存することはお勧めできません。誰かがjavascriptを使用して、隠しファイルのアップロードフィールドを次のように変更できたと想像してみてください。

c：\ Users\Person\Documents\Finances

または

C：\ Users\Person\AppData\Microsoft\Outlook.pst

:)

9
user19302

入力要素のクローンを作成して非表示のフォームに配置し、非表示のiframeにPOSTするために、この機能が必要であると推測します...

IEのelement.clone（）実装は、input type = "file"の値を引き継がないため、次のように逆にする必要があります。

// Clone the "real" input element
var real = $("#categoryImageFileInput_" + id);
var cloned = real.clone(true);

// Put the cloned element directly after the real element
// (the cloned element will take the real input element's place in your UI
// after you move the real element in the next step)
real.hide();
cloned.insertAfter(real);   

// Move the real element to the hidden form - you can then submit it
real.appendTo("#some-hidden-form");
66
Mark Allen

JQuery fileuploadウィジェットには、変更イベントリスナーが1回だけ起動するのを回避するためのファイル入力replaceメソッドがあります。

https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.fileupload.js#L769

（jquery.fileupload.jsの_replaceFileInputメソッド）

2
Gabriel

他の方法を適用することができます。実際の要素をiframeに送信し、複製された要素を挿入してフォームを作成する必要があります。例えば：

$("INPUT[type='file']").each
(
    function(index, element)
    {
    $(this).wrap("<div></div>");
    var Div = $(this).parent();
    $(this).appendTo("FORM[name='forIframe']"); // This form for iframe
    Div.append($(this).clone());
    }
);

この方法を使用すると、フォームはファイルをサーバーに送信しますが、Chrome an IEファイルを含む入力がリセットされます。

0
Timofey Inchagov