1

1 つのステップでファイルを参照してアップロードするコードを書いています。私はこのコードを用意しています:

<input type="file" id="image" style="display: none;">
<input type="submit" name="upload" id="upload" value="upload"
  onclick="document.getElementById('image').click();">

このコードを使用すると、ファイルを選択してフォームを送信できますが、 $_FILE 属性を使用したいのですが、ファイル入力に名前フィールドがないため、ファイル情報にアクセスできません。

そこで、次のように名前フィールドを追加するようにコードを変更しました

<input type="file" name="image" id="image" style="display: none;" />

<input type="submit" name="upload" id="upload" value="upload"
  onclick="document.getElementById('image').click();" />

さて、このコードでは、ファイルを参照できますが、送信されません。一言で言えば、両方の方法で $_FILE にアクセスできません。

前進するために私ができることの提案。??

ティア

4

6 に答える 6

1

選択した画像を PHP の $_FILES 配列で使用できるようにするには、ファイル フィールドに name 属性を指定しenctype、フォームの を に設定multipart/form-dataして、ブラウザが正しく投稿できるようにする必要があります。

<form action="some.php" method="post" enctype="multipart/form-data">
 <input type="file" id="image" name="image">
 <input type="button" value="select image" id="button">
</form>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

ファイル入力でメソッドを引き続き使用できるようにする.click()には、ドキュメントから取り出されていてはなりません (つまり、機能しdisplay: noneません)。したがって、次を使用できます。

​input[type=file] {
 position: absolute; height: 0; width: 0; /* should be totally squashed */
 visibility: hidden; /* just in case */
}​

次に、JavaScript を使用して選択ダイアログを開き、フォームを送信できます。

$('#button').click(function() {
  $('#image')[0].click();
});​​​​
$('#image').change(function() {
  $('form').submit();
});

(ここでは、ページに jQuery があると仮定して、実際の例を示しますhttp://jsfiddle.net/steveukx/V4yE3/ )

于 2012-04-18T07:10:56.307 に答える
0

ここではメソッドをサポートしていませんが (マークアップと動作を分離していません)、return trueinを追加してみてくださいonclick。

于 2012-04-18T05:03:48.293 に答える
0

このコードは、クロスブラウザーでは機能しません。click()クロムでは、隠しinput[type=file]要素を呼び出すことはできません。

表示に切り替えてもclick()、onclickoronsubmitハンドラーを配置しても機能しません。フォームは新しいファイル値で送信されません。これはセキュリティ機能です。ブラウザは、これを行うことを望んでいません。

フラッシュはあなたが望むことをすることができます。YUI Uploader コンポーネントをチェックしてください: http://developer.yahoo.com/yui/uploader/

于 2012-04-18T05:07:31.473 に答える
0 
<input type="file" id="image" onchange="yourForm.submit();">
于 2012-04-18T09:04:21.103 に答える
0

私が理解しているように、a) ブラウザー固有のファイル参照コントロールを非表示にし、独自のスタイルのボタンを提供し、b) 同時にファイルを選択してアップロードします (たとえば、ファイル参照ダイアログが閉じているときに写真をアップロードします)。

この場合、次のようなものが必要です。

<form name="myForm" method="POST">
    <input type="file" name="image" id="image" 
        style="position: absolute; left: -1000px;"
        onchange="myForm.submit();" />
    <input type="button" name="upload" id="upload" value="upload"
        onclick="document.getElementById('image').click();" />
</form>

Chrome で動作します (ファイル入力を非表示にせず、ページの外に移動します)。他のブラウザに問題がある場合は、jQuery を使用することをお勧めします。

HTH

于 2012-04-18T07:08:26.383 に答える
0

ページをリロードせずにファイルをアップロードする場合は、AJAX ファイル アップロード jQuery プラグインを使用してファイルをアップロードし、応答をコールバックに渡します。

It does not depend on specific HTML, just give it a <input type="file">
It does not require your server to respond in any particular way
It does not matter how many files you use, or where they are on the page

-- 最小限の使用 --

$('#one-specific-file').ajaxfileupload({
  'action': '/upload.php'
});

-- またはそれと同じくらい --

$('input[type="file"]').ajaxfileupload({
  'action': '/upload.php',
  'params': {
    'extra': 'info'
  },
  'onComplete': function(response) {
    console.log('custom handler for file:');
    alert(JSON.stringify(response));
  },
  'onStart': function() {
    if(weWantedTo) return false; // cancels upload
  },
  'onCancel': function() {
    console.log('no file selected');
  }
});
于 2012-04-18T05:34:33.663 に答える