質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.75%

  • C#

    6556questions

    C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

  • ASP.NET

    480questions

    ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

ファイルアップロードのボタンを設置し、指定のディレクトリにファイルを保存したい

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,455

asr

score 13

ASP.net C#で開発しています。
やりたいことは、

1.あるページにファイルをアップロードするボタンと送信ボタンを設置する。
2.アップロードするボタンから画像ファイルを選択(複数可)し、決定後は画像のサムネイルを表示する。削除もできるようにしたい。
3.送信ボタンを押し、指定のディレクトリに保存する。

※できれば、アップロードしたファイルサイズの制限をしたいです。

色々調べてみましたが、なかなかうまくいきませんでした。

参考サイトまたは、サンプルソース等を提示していただけると大変助かります。
よろしくお願いします。

追記:
OS:windows10
.net framework4.5
Visual Studio Studio Community2015
IIS 10.0
ブラウザ:IE11,FireFox56.0.2,google chrome62.0.3202.75,safari10.1.2
web フォーム(aspx)

以下のサイトが一番理想に近かったのですが、
http://sorg123.hateblo.jp/entry/2013/07/07/AJAX%E3%81%A7%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89_%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB

の画像ファイルを選択(複数可)と削除、表示された画像のサイズ変更が分かりませんでした。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • ShikaTech

    2017/10/31 12:00

    「色々調べてみましたが、なかなかうまくいきませんでした。」の色々が何で、上手くいかない方法及び事象をちゃんと書かないことには的確なサポートもできないでしょう。分からないことが分からないうちは、いくらサンプル読んでもサイト読んでも分からないままだと思いますよ。

    キャンセル

  • SurferOnWww

    2017/10/31 12:08

    ASP.NET と言っても Web Forms, MVC, WebPage といろいろありますが何ですか? あと、自分の環境(OS, .NET, Visual Studio, IIS のバージョン、ブラウザは何か)ぐらいは最初に書きましょう。質問するときのイロハのイですよ。

    キャンセル

  • SurferOnWww

    2017/10/31 18:40

    上の質問欄に追記されたようですが、それを読めと言う前に、その前にされていた回答に対してきちんとレスしてもらえませんか? レスというのは、回答で問題は解決したのか(しなかったと思っていますが)、回答として不十分であれば具体的にどう不十分なのか、やりたいことと違う場合はどこがどう違うかです。そうしてもらえないと話が進みません。

    キャンセル

回答 3

checkベストアンサー

+1

編集依頼に対してちゃんと質問に追記されたので、可能な限りお手伝いしたいと思います。
まずそもそも諸々をサーバサイドでやるか、クライアントサイドでやるか、あるいは組み合わせるかを考える必要があります。
やりたいことを一つ一つ分けて解決しましょう。

  1. ASP.NET WebFormにより画像アップロードの機構を作りたい
  2. アップロードする画像のサイズを制限したい
  3. アップロードされた画像を指定のディレクトリに保存したい
  4. アップロードされた画像はサムネ表示したい
  5. サムネ表示されている画像を削除したい

1については、ASP.NETの標準機構であれば割りと簡単です。
https://www.ipentec.com/document/document.aspx?page=csharp-aspnet-uploader-control

2については、クライアント(JavaScript)でやるかサーバ(C#)でやるか決める必要があります。
たぶんここがごっちゃになってますよね。

3については、簡単で1のURLで例示したとおりPOSTされたデータから取り出して、任意のフォルダに保存してやればよいかと。

4については、ファイルアップロードの前にやりたいのか、後にやりたいのかによって動きが変わります。
理想に近いとおっしゃったページではjQueryからやってますね。つまりアップロードの前です。
ASP.NETでのみ実現するのであればアップロード後に行なう必要がありそうです。

5については、上記4項目に関連して、ファイルアップロード後に消したいのか、ファイルアップロード前に消したいのかによります。
アップ前であれば、すでに選択してサムネ表示されている画像をjQuery等で消し去る形になります。
アップ後であれば、サーバに保存されている画像を物理削除し、画面上もクリアする形になります。

大前提としてPostBack機構の理解や、JavaScript/jQueryでいかに処理をハンドリングしてPOSTするか、あるいはPOSTされる内容がどのようにサーバサイドに渡るのか、そのあたりの知識はありますか?
無いのであればJavaScript/jQueryを一切使わずにASP.NET WebFormの機構でのみ実現したほうがいいです。
混在して分からなくなってくるので。

これを踏まえて、理想に近いといったページに対して画像ファイルを選択(複数可)と削除、表示された画像のサイズ変更を実装するのなら、私ならこうします。

  • "hogeFile","hogeText"をコピーして「複数」必要な分だけ用意
  • "preview_field"を"hogeField"とし、上記複数用意した画像選択コントロール分だけ同様の命名ルールで用意
  • 用意したFile/Text/Fieldのセット分だけ「削除用」のコントロールを用意
  • 削除用のコントロールにjQueryイベントを連動させ、選択中の画像を解除する処理を実装
  • JavaScript関数のpreviewを改修し、サムネイルとして表示したい画像サイズにリサイズして表示
  • "hogeSubmit"を"fileUpload"等に変更
  • jQueryのsubmitハンドラ内で固定1コントロールだけ指定している部分を任意の数扱えるように修正
  • ajax通信の前に選択された画像群のサイズを調べてNGだったらエラー表示するように分岐

これはJavaScript/jQuery側に実装を寄せたパターンです。
愚直に言われたことだけができるプログラムになりますので、プロダクトとして作るならもっと考える必要があります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/01 15:11

    返答遅れて申し訳ございません。
    長いご説明ありがとうございました。

    現在の状況としては、
    1と3はできました。
    クライアント側で
    <asp:FileUpload ID="FileUpload" runat="server" AllowMultiple="true"/>
    を設置し、
    サーバ側で
    foreach (var file in FileUpload.PostedFiles)
    {
    file.SaveAs(strCurrentDirPath + System.IO.Path.GetFileName(file.FileName));
    }
    することにより、複数のファイルを選択後に指定のディレクトリに全て保存することができました。

    2・4・5は今のところクライアント側でやる予定。

    で、今は4を作成中。

    http://sorg123.hateblo.jp/entry/2013/07/07/AJAX%E3%81%A7%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89_%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB

    を応用し、<div id="preview_field"></div>に選択した画像分だけ表示できないかを調べています。

    後余談ですが、<asp:FileUpload ID="FileUpload" runat="server" AllowMultiple="true"/>を設置するとIEではボタンが二つ出る状態になります。テキストボックスのようなボタン(押下するとファイル選択ダイアログが出る)と、参照ボタンです。Firefoxとchromは出ませんでした。

    キャンセル

+1

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

Web Forms でないと使えないので、MVC とかですと紹介しても意味がないかもしれませんが(だから上のコメントで何を作っているか書いてくれと言ってます)、Ajax Control Toolkit の AjaxFileUpload が質問者さんの求めているものに近いと思われます。ただし、環境によっては使えないかも知れませんが(だから開発環境を書いてくれと言ってます)

AjaxFileUpload Demonstration
https://ajaxcontroltoolkit.devexpress.com/AjaxFileUpload/AjaxFileUpload.aspx

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/01 14:41

    返答遅れて申し訳ございません。

    上記のURLからソースを見て、ファイルを選択後に「Upload」ボタンがどういう動きしているかわからなかったのでそこでストップしています。ファイルを保存するディレクトリを指定したいけど、でもどこでやってるのか、もともと変更できない仕様なのか。
    その他にも分からない部分は多々ありますが、メインのところなのでまずそこだけ挙げました。

    取り敢えずやりたいところを一つずつ作りながらやっているので、返答が遅かったり方向性が決まってない点に関しては、申し訳ございません。

    キャンセル

  • 2017/11/01 16:15

    紹介したデモのソースコードが入手できるはずですので、それを見るといろいろ分かるのではないかと思います。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.75%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • C#

    6556questions

    C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

  • ASP.NET

    480questions

    ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

  • トップ
  • C#に関する質問
  • ファイルアップロードのボタンを設置し、指定のディレクトリにファイルを保存したい