Question

我创建了一个表单，用户可以在该表单中提交将.txt文件保存在用户文件夹中的数据。然后在同一页面上有一个dropdown，显示他们稍后可以选择的文件名。我试图填充文件名在一个两个字段，文件内容在另一个。

使用jQuery我现在可以根据选择使用文件名填充第一个textfield，但无法弄清楚如何在第二个文本区域中显示文件内容。

根据选择填充第一个textbox的jQuery代码：

<script>
  $(document).ready(function(){
    // apply a change event
    $('#CodeList').change(function() {
      // update input box with the currently selected value
        $('#CodeName').val($(this).val());
  });
 });
</script>

运行表单的PHP和HTML：

<input type="hidden" name="Action" value="EDIT" /><input type="hidden" name="Selection"  id="Selection" value="-1"><div>Below is the list of your saved codes. To edit your codes, select it from the list.</div>
<select size="1" name="CodeList" id="CodeList"><option value="0">(Add New Code)</option>
<?php
  $directory = $directory = 'users/' . $_SESSION['username'];
  $filesContents = Array();
  $files = scandir( $directory ) ;

  foreach( $files as $file )
 {
  if ( ! is_dir( $file ) )
 {
  $filesContents[$file] = file_get_contents($directory , $file);
  echo "<option>" . $file . "</option>";
 }
}
?>
</select>
        <h3>Saved Codes</h3>
        <form method="post" action="/evo/avsaveprocess.php">

            <input type="hidden" name="Action" value="SAVE" />
            <input type="hidden" name="CodeId" id="CodeId" value="0" />
            <table width="100%" border="0">
                <tr>
                    <td>Description:</td>
                    <td><input type="text" name="CodeDescription" size="40" maxlength="50" id="CodeName" value="" /></td>
                </tr>
                <tr>
                    <td valign="top">Code:</td>
                    <td>
                        <textarea rows="10" style="width:99%" name="Code" id="CodeValue"></textarea>
                    </td>
                </tr>
            </table>
            <input type="submit" value="Save" />
            </form>

Answer 1

你尝试过吗？ $.get( "DIRECTORY/FILE.EXT" );

<script>
  $(document).ready(function(){
    // apply a change event
    $('#CodeList').change(function() {
      // update input box with the currently selected value
        $('#CodeName').val($(this).val());
        $.get( '<? echo $directory ?>' + '/' + $('#CodeName').val(), function( data ) {
            $( "#CodeValue" ).text( data );
        });
  });
 });
</script>

我不知道它是否有效，请让我知道这些行为，如果出现问题，我们会尝试修复。

Answer 2

您需要为此执行文件操作，而不能直接编写$('#CodeName').val($(this).val());

有一个感兴趣的HTML5 API。

File API允许您读取文件（用户选择的文件）。大多数现代浏览器都实现了这一点。

我认为您也可以使用仅IE ActiveX控件在Windows上进行文件操作，只要它与您相关。

<强> Source

Jquery从下拉列表中填充textarea

2 个答案: