Question

我在asp.net中有一个文件上传控件，用于上传图像文件。现在我想要的是我有图像控制，所以当用户上传文件时，该文件中的图像应该在图像控件中可见，然后才能真正上传到服务器上。当用户更改文件时，更改应反映在该图像控件中。我不想使用除文件上传控制之外的任何其他按钮。

有没有办法用javascript做到这一点？

Answer 1

我认为在HTML5支持的浏览器中可以实现这一点

检查HTML5文件API http://www.w3.org/TR/FileAPI/

这适用于FF3 +

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>input type=file & Firefox 3</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>

</head>

<body>

<h1>This works in Firefox 3+</h1>

<script type="text/javascript">
// <![CDATA[
function inputFileOnChange() {
    if (document.getElementById('fichier').files) {
        $("#dvFileName").html(document.getElementById('fichier').files.item(0).name);
        $("#imgImage").attr("src" ,document.getElementById('fichier').files.item(0).getAsDataURL());
    };
};
// ]]>
</script>

<div>
    <input type="file" name="fichier" id="fichier" onchange="inputFileOnChange();" />
    <br /><br />
    <img id="imgImage" src="" width="200" height="200" alt="" />
    <div id="dvFileName">
    </div>
</div>

</body>
</html>

首先在客户端上传图像

1 个答案: