web-dev-qa-db-ja.com

クリックせずにFileUploadコントローラーでパスを選択した後に画像を表示する方法

最近、ASP.NET（c＃）でWebフォームアプリケーションを開発しています。画像コントロールがあります。

<asp:Image ID="Avatar" runat="server" Height="225px" ImageUrl="~/Images/NoUser.jpg" Width="225px" />

そしてFileUpload＆Buttonコントロール

<asp:FileUpload ID="avatarUpload" runat="server" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="Upload" />

ユーザーがボタンをクリックすると、「アップロード」コードが実行されます（画像がデータベースに送信されます）。問題は、ユーザーが「必死」ボタンをクリックする前に、ユーザーがアバター画像コントローラーで選択した画像を表示したいことです。

これを自動的に行うことは可能ですか？

c#asp.netimagefile-upload
10
molu2008

File Api of HTML5（ 例：Webアプリケーションからのファイルの使用 ）の助けを借りて、これを簡単に実現できます。マークアップを変更して、input type="file"の代わりにasp:FileUploadを使用し、IDを追加し、タグrunat="server"を追加して、サーバーからアクセスできるようにします。マークアップは次のようになります。

<input ID="avatarUpload" type="file" name="file" onchange="previewFile()"  runat="server" />
<%--<asp:FileUpload ID="avatarUpload" runat="server" />--%>
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="Upload" />
<asp:Image ID="Avatar" runat="server" Height="225px" ImageUrl="~/Images/NoUser.jpg" Width="225px" />

次に、ドキュメントの先頭にJavaScript関数previewFileを追加します。

<head runat="server">
    <title></title>
    <script type="text/javascript">
        function previewFile() {
            var preview = document.querySelector('#<%=Avatar.ClientID %>');
            var file = document.querySelector('#<%=avatarUpload.ClientID %>').files[0];
            var reader = new FileReader();

            reader.onloadend = function () {
                preview.src = reader.result;
            }

            if (file) {
                reader.readAsDataURL(file);
            } else {
                preview.src = "";
            }
        }
    </script>
</head>

画像を選択すると、下のようなプレビューが表示されます。 enter image description here

CSSを使用して、サムネイルのサイズを変更できます。 [アップロード]ボタンをクリックした後、コードで投稿されたファイルを見つけることができます。

protected void Upload(object sender, EventArgs e)
{
    int contentLength = avatarUpload.PostedFile.ContentLength;//You may need it for validation
    string contentType = avatarUpload.PostedFile.ContentType;//You may need it for validation
    string fileName = avatarUpload.PostedFile.FileName;
    avatarUpload.PostedFile.SaveAs(@"c:\test.tmp");//Or code to save in the DataBase.
}
29
afzalulh