Сначала загрузите изображение на стороне клиента - PullRequest
Новая
       2

Сначала загрузите изображение на стороне клиента

0 голосов
/ 30 августа 2011

У меня есть элемент управления загрузкой файлов в asp.net, который используется для загрузки файла изображения.Теперь я хочу, чтобы у меня был элемент управления изображением, поэтому, когда пользователь загружает файл, изображение из этого файла должно быть видно в элементе управления изображением, прежде чем оно действительно будет загружено на сервер.Когда пользователь изменяет файл, это изменение должно отражаться в этом элементе управления изображением.Я не хочу использовать какие-либо дополнительные кнопки, кроме элемента управления загрузкой файлов.

Есть ли способ сделать это с помощью JavaScript ??

1 Ответ

1 голос
/ 30 августа 2011

Я думаю, что это возможно в поддерживаемых HTML5 браузерах

проверьте API ФАЙЛА HTML5 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...