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

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

新規登録して質問してみよう
ただいま回答率
85.51%
C#

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

ASP.NET

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

Q&A

解決済

3回答

12259閲覧

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

asr

総合スコア19

C#

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

ASP.NET

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

0グッド

1クリップ

投稿2017/10/31 01:37

編集2017/10/31 06:27

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ShikaTech

2017/10/31 03:00

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

退会済みユーザー

2017/10/31 03:08

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

退会済みユーザー

2017/10/31 09:40

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

回答3

0

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

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

投稿2017/10/31 03:22

編集2017/10/31 03:54
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

asr

2017/11/01 05:41

返答遅れて申し訳ございません。 上記のURLからソースを見て、ファイルを選択後に「Upload」ボタンがどういう動きしているかわからなかったのでそこでストップしています。ファイルを保存するディレクトリを指定したいけど、でもどこでやってるのか、もともと変更できない仕様なのか。 その他にも分からない部分は多々ありますが、メインのところなのでまずそこだけ挙げました。 取り敢えずやりたいところを一つずつ作りながらやっているので、返答が遅かったり方向性が決まってない点に関しては、申し訳ございません。
退会済みユーザー

退会済みユーザー

2017/11/01 07:15

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

0

ベストアンサー

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

 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/10/31 08:10

ShikaTech

総合スコア468

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

asr

2017/11/01 06: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は出ませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問