当前位置: 首页 > 面试题库 >

HTML-选择文件名后显示图像

施翰学
2023-03-14
问题内容

我有一个表格可以

<input type="file" name="filename" accept="image/gif, image/jpeg, image/png">

浏览并选择一个文件。

我要做的是在选择图像后立即显示该图像。而且这是在按下表单上的“提交”按钮之前,因此图像几乎可以肯定位于客户端。能做到吗?


问题答案:

干得好:

HTML

<!DOCTYPE html>
<html>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <input type='file' onchange="readURL(this);" />
    <img id="blah" src="#" alt="your image" />
</body>
</html>

脚本:

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah')
                    .attr('src', e.target.result)
                    .width(150)
                    .height(200);
            };

            reader.readAsDataURL(input.files[0]);
        }
    }


 类似资料:
  • 我有上传文档按钮,从那里我可以上传图像,文档,pdf文件和EXCEL。我想显示这些选定文件的预览。 我能够显示预览的图像和PDF文件,但不知道如何显示预览,如果文件是文档或excel文件。 下面是显示文件预览的通用代码。 超文本标记语言代码是: JS代码是: 如果选择的文件是PDF和/或图像,但不适用于doc或excel文件,则此代码可以正常工作。任何想法如何显示文档和excel文件的预览?

  • 我正在使用AutoCompleteTextView进行地址建议。 我想做的是当用户输入地址(f. e.“Ma”)时,建议会显示为“Mary, Madley, Ma…”。 然后,当用户选择其中一个建议时,他会立即获得另一个包含整个地址的建议。 例如:他选择了“玛丽”,他得到了像“玛丽123,波士顿”、“玛丽1566,纽约”、“玛丽简569,纽约”这样的建议。 问题是建议填写了适配器,但没有显示。选择

  • 我一直在研究如何使用HTML5

  • 编辑: 下面是Android Studio运行选项卡上的错误

  • 问题内容: 我觉得应该有一个简单的方法来做到这一点,但我不知道。我有一个JFileChooser,它允许用户选择目录。我想显示目录中的所有文件,以便为用户提供一些上下文,但是只应接受目录作为选择(选择文件时可能会禁用“打开”按钮)。有一个简单的方法吗? 问题答案: 重写approveSelection()方法。就像是:

  • 我有一个ComboBox,我正在用Sheet对象值填充它。 我设置了一个单元格工厂,以便在下拉列表中显示工作表的名称。它工作正常(似乎如此)。 问题是,选择项目(“单元格”)后,框中显示的值不是列表中显示的值。 这是相关的代码部分: