QA@IT
«質問へ戻る

24
本文
 3) 1)、2)とは別に、「撮影」ボタンを押すと「カメラ」が起動し、撮影するとそれがプレビュー(サムネイル)表示されます。
 4) 3)を繰り返すと、その分だけ、カメラ起動→撮影→撮影した画像のプレビュー表示がされます。
 5) プレビューされている画像で、何らかの×ボタンを押したり、もしくはチェックボックスの操作等で、アップロードを取りやめることができるようにする。
-6) 「保存」ボタンを押すと、5)で指定した画像がサーバの特定のフォルダ「C:\hoge」にアップロードされます。
+6) 「保存」ボタンを押すと、5)で指定した画像がサーバの特定のフォルダ「\\svr\hoge」にアップロードされます。
 アップロードしたい画像は縮小されたデータではなく、選択・撮影されたデータそのものです。
 7) 既存の画像データを開く「撮影済選択」ボタンと「撮影」ボタンは、別の機能であり別のボタンが望ましいですが、「選択」ボタンを押したあと、「写真またはビデオを撮る」「フォトライブラリ」に自動的に分岐して、そこから操作が進むようになっても良いです。
 8) できれば、5)まではサーバとの通信無しでブラウザのみで完結できると良いです。
     Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
 
         Dim posted As HttpPostedFile
-        Dim SendPath As String = "C:\hoge\"
+        Dim SendPath As String = "\\svr\hoge"
 
         posted = Request.Files("files[0]")
 

ASP.NET で、複数の画像の取得・プレビュー表示をした上、サーバにアップロードしたい

【開発環境】
Windows8.1 IIS 8.5
Microsoft Visual Studio Express 2012 for Web

【テスト・稼働環境】
サーバは、WindowsServer2012 R2
端末
iPad OS 8.1.2
iPhone OS 8.1.2
ブラウザは、当面Safariを考えています。
他、Androidも考えています。

【したいこと】
1) ブラウザ上のボタン「撮影済選択」を押すと、iPhoneの「写真」が開き、その中の「カメラロール」等から、画像を複数選択します。
2) 複数選択後は、選択した画像が、複数プレビュー表示されます。
3) 1)、2)とは別に、「撮影」ボタンを押すと「カメラ」が起動し、撮影するとそれがプレビュー(サムネイル)表示されます。
4) 3)を繰り返すと、その分だけ、カメラ起動→撮影→撮影した画像のプレビュー表示がされます。
5) プレビューされている画像で、何らかの×ボタンを押したり、もしくはチェックボックスの操作等で、アップロードを取りやめることができるようにする。
6) 「保存」ボタンを押すと、5)で指定した画像がサーバの特定のフォルダ「\svr\hoge」にアップロードされます。
アップロードしたい画像は縮小されたデータではなく、選択・撮影されたデータそのものです。
7) 既存の画像データを開く「撮影済選択」ボタンと「撮影」ボタンは、別の機能であり別のボタンが望ましいですが、「選択」ボタンを押したあと、「写真またはビデオを撮る」「フォトライブラリ」に自動的に分岐して、そこから操作が進むようになっても良いです。
8) できれば、5)まではサーバとの通信無しでブラウザのみで完結できると良いです。

【作成の経過とご質問】
1), 2)はできたので、まずは 6)のように、「保存」ボタンでサーバに保存したいのですが、どのようにコードを書けば良いでしょうか。(「保存」ボタンはASP.netのボタンです。)
コード部分の ” posted = Request.Files("files[0]")” で、複数表示されている画像のうちの1枚目が取得できるかと思ったのですが、postedがNothingとなってしまい取得できません。

【ソース部分】

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="test.aspx.vb" Inherits="Test.test" %>
  <style type="text/css">

      #upload {
        width:90px;
        height:35px;
        text-align:center;
        line-height:35px;
        border-radius:5px;
        color:#fff;
        background-color:#4385bf;
        margin:10px 0;
        cursor:pointer;
      }
      #results {
        border:1px solid #4385bf;
        background-color:#bbd4ea;
        height:160px;
        width:500px;
        padding:5px;
        margin:10px 0;
      }
      #results img {
        border:1px solid #000;
        margin:0 5px 0 0;
      }
      #file {
        opacity:0;
      }

      </style>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>

    <form id="form1" runat="server">
            <input type="file" accept="image/jpeg, image/gif, image/png" id="file" name="files[]" multiple>

       <%--     <button type="submit">submit</button>  --%>

    <div>

        <div id="upload">撮影済選択</div>
        <div id="results"></div>
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script>
            $(function () {
                $('#upload').click(function () {
                    $('#file').click();
                    $('#file').on('change', setImage);
                });

                function setImage() {
                    for (var i = 0; i < this.files.length; i++) {
                        var file = this.files[i];
                        fr = new FileReader();
                        fr.onload = function (e) {
                            var img = $('<img>');
                            img.attr('src', e.target.result);
                            img.css('height', '160px', 'width', '100px');
                            img.css('width', '160px');
                            $('#results').append(img);
                        };
                        fr.readAsDataURL(file);
                    }
                }
            });

        </script>

    </div>

        <asp:Button ID="Button1" runat="server" Text="保存" />
    </form>

</body>
</html>

【コード部分】

Public Class test
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub

    Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click

        Dim posted As HttpPostedFile
        Dim SendPath As String = "\\svr\hoge"

        posted = Request.Files("files[0]")

        If Not posted.FileName = "" Then
            posted.SaveAs(SendPath & "1.JPG")
        End If

    End Sub
End Class
【開発環境】
Windows8.1 IIS 8.5
Microsoft Visual Studio Express 2012	 for Web

【テスト・稼働環境】
サーバは、WindowsServer2012 R2
端末
iPad OS 8.1.2
iPhone OS 8.1.2
ブラウザは、当面Safariを考えています。
他、Androidも考えています。

【したいこと】
1) ブラウザ上のボタン「撮影済選択」を押すと、iPhoneの「写真」が開き、その中の「カメラロール」等から、画像を複数選択します。
2) 複数選択後は、選択した画像が、複数プレビュー表示されます。
3) 1)、2)とは別に、「撮影」ボタンを押すと「カメラ」が起動し、撮影するとそれがプレビュー(サムネイル)表示されます。
4) 3)を繰り返すと、その分だけ、カメラ起動→撮影→撮影した画像のプレビュー表示がされます。
5) プレビューされている画像で、何らかの×ボタンを押したり、もしくはチェックボックスの操作等で、アップロードを取りやめることができるようにする。
6) 「保存」ボタンを押すと、5)で指定した画像がサーバの特定のフォルダ「\\svr\hoge」にアップロードされます。
アップロードしたい画像は縮小されたデータではなく、選択・撮影されたデータそのものです。
7) 既存の画像データを開く「撮影済選択」ボタンと「撮影」ボタンは、別の機能であり別のボタンが望ましいですが、「選択」ボタンを押したあと、「写真またはビデオを撮る」「フォトライブラリ」に自動的に分岐して、そこから操作が進むようになっても良いです。
8) できれば、5)まではサーバとの通信無しでブラウザのみで完結できると良いです。

【作成の経過とご質問】
1), 2)はできたので、まずは 6)のように、「保存」ボタンでサーバに保存したいのですが、どのようにコードを書けば良いでしょうか。(「保存」ボタンはASP.netのボタンです。)
コード部分の ” posted = Request.Files("files[0]")” で、複数表示されている画像のうちの1枚目が取得できるかと思ったのですが、postedがNothingとなってしまい取得できません。

【ソース部分】
```ASP.net
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="test.aspx.vb" Inherits="Test.test" %>
  <style type="text/css">
 
      #upload {
        width:90px;
        height:35px;
        text-align:center;
        line-height:35px;
        border-radius:5px;
        color:#fff;
        background-color:#4385bf;
        margin:10px 0;
        cursor:pointer;
      }
      #results {
        border:1px solid #4385bf;
        background-color:#bbd4ea;
        height:160px;
        width:500px;
        padding:5px;
        margin:10px 0;
      }
      #results img {
        border:1px solid #000;
        margin:0 5px 0 0;
      }
      #file {
        opacity:0;
      }

      </style>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>

    <form id="form1" runat="server">
            <input type="file" accept="image/jpeg, image/gif, image/png" id="file" name="files[]" multiple>

       <%--     <button type="submit">submit</button>  --%>

    <div>

        <div id="upload">撮影済選択</div>
        <div id="results"></div>
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script>
            $(function () {
                $('#upload').click(function () {
                    $('#file').click();
                    $('#file').on('change', setImage);
                });

                function setImage() {
                    for (var i = 0; i < this.files.length; i++) {
                        var file = this.files[i];
                        fr = new FileReader();
                        fr.onload = function (e) {
                            var img = $('<img>');
                            img.attr('src', e.target.result);
                            img.css('height', '160px', 'width', '100px');
                            img.css('width', '160px');
                            $('#results').append(img);
                        };
                        fr.readAsDataURL(file);
                    }
                }
            });

        </script>

    </div>

        <asp:Button ID="Button1" runat="server" Text="保存" />
    </form>

</body>
</html>
```
【コード部分】
```
Public Class test
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub

    Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click

        Dim posted As HttpPostedFile
        Dim SendPath As String = "\\svr\hoge"

        posted = Request.Files("files[0]")

        If Not posted.FileName = "" Then
            posted.SaveAs(SendPath & "1.JPG")
        End If

    End Sub
End Class
```

24
本文
 
 【作成の経過とご質問】
 1), 2)はできたので、まずは 6)のように、「保存」ボタンでサーバに保存したいのですが、どのようにコードを書けば良いでしょうか。(「保存」ボタンはASP.netのボタンです。)
-コード部分の ” posted = Request.Files("files[0]")” で、複数表示されている画像のうちの1枚目が取得できるかと思ったのですが、Nothingとなってしまい取得できません。
+コード部分の ” posted = Request.Files("files[0]")” で、複数表示されている画像のうちの1枚目が取得できるかと思ったのですが、postedがNothingとなってしまい取得できません。
 
 【ソース部分】
 ```ASP.net

ASP.NET で、複数の画像の取得・プレビュー表示をした上、サーバにアップロードしたい

【開発環境】
Windows8.1 IIS 8.5
Microsoft Visual Studio Express 2012 for Web

【テスト・稼働環境】
サーバは、WindowsServer2012 R2
端末
iPad OS 8.1.2
iPhone OS 8.1.2
ブラウザは、当面Safariを考えています。
他、Androidも考えています。

【したいこと】
1) ブラウザ上のボタン「撮影済選択」を押すと、iPhoneの「写真」が開き、その中の「カメラロール」等から、画像を複数選択します。
2) 複数選択後は、選択した画像が、複数プレビュー表示されます。
3) 1)、2)とは別に、「撮影」ボタンを押すと「カメラ」が起動し、撮影するとそれがプレビュー(サムネイル)表示されます。
4) 3)を繰り返すと、その分だけ、カメラ起動→撮影→撮影した画像のプレビュー表示がされます。
5) プレビューされている画像で、何らかの×ボタンを押したり、もしくはチェックボックスの操作等で、アップロードを取りやめることができるようにする。
6) 「保存」ボタンを押すと、5)で指定した画像がサーバの特定のフォルダ「C:\hoge」にアップロードされます。
アップロードしたい画像は縮小されたデータではなく、選択・撮影されたデータそのものです。
7) 既存の画像データを開く「撮影済選択」ボタンと「撮影」ボタンは、別の機能であり別のボタンが望ましいですが、「選択」ボタンを押したあと、「写真またはビデオを撮る」「フォトライブラリ」に自動的に分岐して、そこから操作が進むようになっても良いです。
8) できれば、5)まではサーバとの通信無しでブラウザのみで完結できると良いです。

【作成の経過とご質問】
1), 2)はできたので、まずは 6)のように、「保存」ボタンでサーバに保存したいのですが、どのようにコードを書けば良いでしょうか。(「保存」ボタンはASP.netのボタンです。)
コード部分の ” posted = Request.Files("files[0]")” で、複数表示されている画像のうちの1枚目が取得できるかと思ったのですが、postedがNothingとなってしまい取得できません。

【ソース部分】

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="test.aspx.vb" Inherits="Test.test" %>
  <style type="text/css">

      #upload {
        width:90px;
        height:35px;
        text-align:center;
        line-height:35px;
        border-radius:5px;
        color:#fff;
        background-color:#4385bf;
        margin:10px 0;
        cursor:pointer;
      }
      #results {
        border:1px solid #4385bf;
        background-color:#bbd4ea;
        height:160px;
        width:500px;
        padding:5px;
        margin:10px 0;
      }
      #results img {
        border:1px solid #000;
        margin:0 5px 0 0;
      }
      #file {
        opacity:0;
      }

      </style>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>

    <form id="form1" runat="server">
            <input type="file" accept="image/jpeg, image/gif, image/png" id="file" name="files[]" multiple>

       <%--     <button type="submit">submit</button>  --%>

    <div>

        <div id="upload">撮影済選択</div>
        <div id="results"></div>
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script>
            $(function () {
                $('#upload').click(function () {
                    $('#file').click();
                    $('#file').on('change', setImage);
                });

                function setImage() {
                    for (var i = 0; i < this.files.length; i++) {
                        var file = this.files[i];
                        fr = new FileReader();
                        fr.onload = function (e) {
                            var img = $('<img>');
                            img.attr('src', e.target.result);
                            img.css('height', '160px', 'width', '100px');
                            img.css('width', '160px');
                            $('#results').append(img);
                        };
                        fr.readAsDataURL(file);
                    }
                }
            });

        </script>

    </div>

        <asp:Button ID="Button1" runat="server" Text="保存" />
    </form>

</body>
</html>

【コード部分】

Public Class test
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub

    Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click

        Dim posted As HttpPostedFile
        Dim SendPath As String = "C:\hoge\"

        posted = Request.Files("files[0]")

        If Not posted.FileName = "" Then
            posted.SaveAs(SendPath & "1.JPG")
        End If

    End Sub
End Class
【開発環境】
Windows8.1 IIS 8.5
Microsoft Visual Studio Express 2012	 for Web

【テスト・稼働環境】
サーバは、WindowsServer2012 R2
端末
iPad OS 8.1.2
iPhone OS 8.1.2
ブラウザは、当面Safariを考えています。
他、Androidも考えています。

【したいこと】
1) ブラウザ上のボタン「撮影済選択」を押すと、iPhoneの「写真」が開き、その中の「カメラロール」等から、画像を複数選択します。
2) 複数選択後は、選択した画像が、複数プレビュー表示されます。
3) 1)、2)とは別に、「撮影」ボタンを押すと「カメラ」が起動し、撮影するとそれがプレビュー(サムネイル)表示されます。
4) 3)を繰り返すと、その分だけ、カメラ起動→撮影→撮影した画像のプレビュー表示がされます。
5) プレビューされている画像で、何らかの×ボタンを押したり、もしくはチェックボックスの操作等で、アップロードを取りやめることができるようにする。
6) 「保存」ボタンを押すと、5)で指定した画像がサーバの特定のフォルダ「C:\hoge」にアップロードされます。
アップロードしたい画像は縮小されたデータではなく、選択・撮影されたデータそのものです。
7) 既存の画像データを開く「撮影済選択」ボタンと「撮影」ボタンは、別の機能であり別のボタンが望ましいですが、「選択」ボタンを押したあと、「写真またはビデオを撮る」「フォトライブラリ」に自動的に分岐して、そこから操作が進むようになっても良いです。
8) できれば、5)まではサーバとの通信無しでブラウザのみで完結できると良いです。

【作成の経過とご質問】
1), 2)はできたので、まずは 6)のように、「保存」ボタンでサーバに保存したいのですが、どのようにコードを書けば良いでしょうか。(「保存」ボタンはASP.netのボタンです。)
コード部分の ” posted = Request.Files("files[0]")” で、複数表示されている画像のうちの1枚目が取得できるかと思ったのですが、postedがNothingとなってしまい取得できません。

【ソース部分】
```ASP.net
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="test.aspx.vb" Inherits="Test.test" %>
  <style type="text/css">
 
      #upload {
        width:90px;
        height:35px;
        text-align:center;
        line-height:35px;
        border-radius:5px;
        color:#fff;
        background-color:#4385bf;
        margin:10px 0;
        cursor:pointer;
      }
      #results {
        border:1px solid #4385bf;
        background-color:#bbd4ea;
        height:160px;
        width:500px;
        padding:5px;
        margin:10px 0;
      }
      #results img {
        border:1px solid #000;
        margin:0 5px 0 0;
      }
      #file {
        opacity:0;
      }

      </style>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>

    <form id="form1" runat="server">
            <input type="file" accept="image/jpeg, image/gif, image/png" id="file" name="files[]" multiple>

       <%--     <button type="submit">submit</button>  --%>

    <div>

        <div id="upload">撮影済選択</div>
        <div id="results"></div>
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script>
            $(function () {
                $('#upload').click(function () {
                    $('#file').click();
                    $('#file').on('change', setImage);
                });

                function setImage() {
                    for (var i = 0; i < this.files.length; i++) {
                        var file = this.files[i];
                        fr = new FileReader();
                        fr.onload = function (e) {
                            var img = $('<img>');
                            img.attr('src', e.target.result);
                            img.css('height', '160px', 'width', '100px');
                            img.css('width', '160px');
                            $('#results').append(img);
                        };
                        fr.readAsDataURL(file);
                    }
                }
            });

        </script>

    </div>

        <asp:Button ID="Button1" runat="server" Text="保存" />
    </form>

</body>
</html>
```
【コード部分】
```
Public Class test
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub

    Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click

        Dim posted As HttpPostedFile
        Dim SendPath As String = "C:\hoge\"

        posted = Request.Files("files[0]")

        If Not posted.FileName = "" Then
            posted.SaveAs(SendPath & "1.JPG")
        End If

    End Sub
End Class
```

24
本文
 
 【作成の経過とご質問】
 1), 2)はできたので、まずは 6)のように、「保存」ボタンでサーバに保存したいのですが、どのようにコードを書けば良いでしょうか。(「保存」ボタンはASP.netのボタンです。)
-コードの ”posted” で、複数表示されているプレビューのうちの1枚目が取得できるかと思ったのですが、Nothingとなっていて取得できません。
+コード部分の ” posted = Request.Files("files[0]")” で、複数表示されている画像のうちの1枚目が取得できるかと思ったのですが、Nothingとなってしまい取得できません。
 
 【ソース部分】
 ```ASP.net
         Dim posted As HttpPostedFile
         Dim SendPath As String = "C:\hoge\"
 
-        posted = Request.Files("file[0]")
+        posted = Request.Files("files[0]")
 
         If Not posted.FileName = "" Then
             posted.SaveAs(SendPath & "1.JPG")

ASP.NET で、複数の画像の取得・プレビュー表示をした上、サーバにアップロードしたい

【開発環境】
Windows8.1 IIS 8.5
Microsoft Visual Studio Express 2012 for Web

【テスト・稼働環境】
サーバは、WindowsServer2012 R2
端末
iPad OS 8.1.2
iPhone OS 8.1.2
ブラウザは、当面Safariを考えています。
他、Androidも考えています。

【したいこと】
1) ブラウザ上のボタン「撮影済選択」を押すと、iPhoneの「写真」が開き、その中の「カメラロール」等から、画像を複数選択します。
2) 複数選択後は、選択した画像が、複数プレビュー表示されます。
3) 1)、2)とは別に、「撮影」ボタンを押すと「カメラ」が起動し、撮影するとそれがプレビュー(サムネイル)表示されます。
4) 3)を繰り返すと、その分だけ、カメラ起動→撮影→撮影した画像のプレビュー表示がされます。
5) プレビューされている画像で、何らかの×ボタンを押したり、もしくはチェックボックスの操作等で、アップロードを取りやめることができるようにする。
6) 「保存」ボタンを押すと、5)で指定した画像がサーバの特定のフォルダ「C:\hoge」にアップロードされます。
アップロードしたい画像は縮小されたデータではなく、選択・撮影されたデータそのものです。
7) 既存の画像データを開く「撮影済選択」ボタンと「撮影」ボタンは、別の機能であり別のボタンが望ましいですが、「選択」ボタンを押したあと、「写真またはビデオを撮る」「フォトライブラリ」に自動的に分岐して、そこから操作が進むようになっても良いです。
8) できれば、5)まではサーバとの通信無しでブラウザのみで完結できると良いです。

【作成の経過とご質問】
1), 2)はできたので、まずは 6)のように、「保存」ボタンでサーバに保存したいのですが、どのようにコードを書けば良いでしょうか。(「保存」ボタンはASP.netのボタンです。)
コード部分の ” posted = Request.Files("files[0]")” で、複数表示されている画像のうちの1枚目が取得できるかと思ったのですが、Nothingとなってしまい取得できません。

【ソース部分】

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="test.aspx.vb" Inherits="Test.test" %>
  <style type="text/css">

      #upload {
        width:90px;
        height:35px;
        text-align:center;
        line-height:35px;
        border-radius:5px;
        color:#fff;
        background-color:#4385bf;
        margin:10px 0;
        cursor:pointer;
      }
      #results {
        border:1px solid #4385bf;
        background-color:#bbd4ea;
        height:160px;
        width:500px;
        padding:5px;
        margin:10px 0;
      }
      #results img {
        border:1px solid #000;
        margin:0 5px 0 0;
      }
      #file {
        opacity:0;
      }

      </style>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>

    <form id="form1" runat="server">
            <input type="file" accept="image/jpeg, image/gif, image/png" id="file" name="files[]" multiple>

       <%--     <button type="submit">submit</button>  --%>

    <div>

        <div id="upload">撮影済選択</div>
        <div id="results"></div>
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script>
            $(function () {
                $('#upload').click(function () {
                    $('#file').click();
                    $('#file').on('change', setImage);
                });

                function setImage() {
                    for (var i = 0; i < this.files.length; i++) {
                        var file = this.files[i];
                        fr = new FileReader();
                        fr.onload = function (e) {
                            var img = $('<img>');
                            img.attr('src', e.target.result);
                            img.css('height', '160px', 'width', '100px');
                            img.css('width', '160px');
                            $('#results').append(img);
                        };
                        fr.readAsDataURL(file);
                    }
                }
            });

        </script>

    </div>

        <asp:Button ID="Button1" runat="server" Text="保存" />
    </form>

</body>
</html>

【コード部分】

Public Class test
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub

    Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click

        Dim posted As HttpPostedFile
        Dim SendPath As String = "C:\hoge\"

        posted = Request.Files("files[0]")

        If Not posted.FileName = "" Then
            posted.SaveAs(SendPath & "1.JPG")
        End If

    End Sub
End Class
【開発環境】
Windows8.1 IIS 8.5
Microsoft Visual Studio Express 2012	 for Web

【テスト・稼働環境】
サーバは、WindowsServer2012 R2
端末
iPad OS 8.1.2
iPhone OS 8.1.2
ブラウザは、当面Safariを考えています。
他、Androidも考えています。

【したいこと】
1) ブラウザ上のボタン「撮影済選択」を押すと、iPhoneの「写真」が開き、その中の「カメラロール」等から、画像を複数選択します。
2) 複数選択後は、選択した画像が、複数プレビュー表示されます。
3) 1)、2)とは別に、「撮影」ボタンを押すと「カメラ」が起動し、撮影するとそれがプレビュー(サムネイル)表示されます。
4) 3)を繰り返すと、その分だけ、カメラ起動→撮影→撮影した画像のプレビュー表示がされます。
5) プレビューされている画像で、何らかの×ボタンを押したり、もしくはチェックボックスの操作等で、アップロードを取りやめることができるようにする。
6) 「保存」ボタンを押すと、5)で指定した画像がサーバの特定のフォルダ「C:\hoge」にアップロードされます。
アップロードしたい画像は縮小されたデータではなく、選択・撮影されたデータそのものです。
7) 既存の画像データを開く「撮影済選択」ボタンと「撮影」ボタンは、別の機能であり別のボタンが望ましいですが、「選択」ボタンを押したあと、「写真またはビデオを撮る」「フォトライブラリ」に自動的に分岐して、そこから操作が進むようになっても良いです。
8) できれば、5)まではサーバとの通信無しでブラウザのみで完結できると良いです。

【作成の経過とご質問】
1), 2)はできたので、まずは 6)のように、「保存」ボタンでサーバに保存したいのですが、どのようにコードを書けば良いでしょうか。(「保存」ボタンはASP.netのボタンです。)
コード部分の ” posted = Request.Files("files[0]")” で、複数表示されている画像のうちの1枚目が取得できるかと思ったのですが、Nothingとなってしまい取得できません。

【ソース部分】
```ASP.net
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="test.aspx.vb" Inherits="Test.test" %>
  <style type="text/css">
 
      #upload {
        width:90px;
        height:35px;
        text-align:center;
        line-height:35px;
        border-radius:5px;
        color:#fff;
        background-color:#4385bf;
        margin:10px 0;
        cursor:pointer;
      }
      #results {
        border:1px solid #4385bf;
        background-color:#bbd4ea;
        height:160px;
        width:500px;
        padding:5px;
        margin:10px 0;
      }
      #results img {
        border:1px solid #000;
        margin:0 5px 0 0;
      }
      #file {
        opacity:0;
      }

      </style>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>

    <form id="form1" runat="server">
            <input type="file" accept="image/jpeg, image/gif, image/png" id="file" name="files[]" multiple>

       <%--     <button type="submit">submit</button>  --%>

    <div>

        <div id="upload">撮影済選択</div>
        <div id="results"></div>
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script>
            $(function () {
                $('#upload').click(function () {
                    $('#file').click();
                    $('#file').on('change', setImage);
                });

                function setImage() {
                    for (var i = 0; i < this.files.length; i++) {
                        var file = this.files[i];
                        fr = new FileReader();
                        fr.onload = function (e) {
                            var img = $('<img>');
                            img.attr('src', e.target.result);
                            img.css('height', '160px', 'width', '100px');
                            img.css('width', '160px');
                            $('#results').append(img);
                        };
                        fr.readAsDataURL(file);
                    }
                }
            });

        </script>

    </div>

        <asp:Button ID="Button1" runat="server" Text="保存" />
    </form>

</body>
</html>
```
【コード部分】
```
Public Class test
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub

    Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click

        Dim posted As HttpPostedFile
        Dim SendPath As String = "C:\hoge\"

        posted = Request.Files("files[0]")

        If Not posted.FileName = "" Then
            posted.SaveAs(SendPath & "1.JPG")
        End If

    End Sub
End Class
```

質問を投稿

ASP.NET で、複数の画像の取得・プレビュー表示をした上、サーバにアップロードしたい

【開発環境】
Windows8.1 IIS 8.5
Microsoft Visual Studio Express 2012 for Web

【テスト・稼働環境】
サーバは、WindowsServer2012 R2
端末
iPad OS 8.1.2
iPhone OS 8.1.2
ブラウザは、当面Safariを考えています。
他、Androidも考えています。

【したいこと】
1) ブラウザ上のボタン「撮影済選択」を押すと、iPhoneの「写真」が開き、その中の「カメラロール」等から、画像を複数選択します。
2) 複数選択後は、選択した画像が、複数プレビュー表示されます。
3) 1)、2)とは別に、「撮影」ボタンを押すと「カメラ」が起動し、撮影するとそれがプレビュー(サムネイル)表示されます。
4) 3)を繰り返すと、その分だけ、カメラ起動→撮影→撮影した画像のプレビュー表示がされます。
5) プレビューされている画像で、何らかの×ボタンを押したり、もしくはチェックボックスの操作等で、アップロードを取りやめることができるようにする。
6) 「保存」ボタンを押すと、5)で指定した画像がサーバの特定のフォルダ「C:\hoge」にアップロードされます。
アップロードしたい画像は縮小されたデータではなく、選択・撮影されたデータそのものです。
7) 既存の画像データを開く「撮影済選択」ボタンと「撮影」ボタンは、別の機能であり別のボタンが望ましいですが、「選択」ボタンを押したあと、「写真またはビデオを撮る」「フォトライブラリ」に自動的に分岐して、そこから操作が進むようになっても良いです。
8) できれば、5)まではサーバとの通信無しでブラウザのみで完結できると良いです。

【作成の経過とご質問】
1), 2)はできたので、まずは 6)のように、「保存」ボタンでサーバに保存したいのですが、どのようにコードを書けば良いでしょうか。(「保存」ボタンはASP.netのボタンです。)
コードの ”posted” で、複数表示されているプレビューのうちの1枚目が取得できるかと思ったのですが、Nothingとなっていて取得できません。

【ソース部分】

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="test.aspx.vb" Inherits="Test.test" %>
  <style type="text/css">

      #upload {
        width:90px;
        height:35px;
        text-align:center;
        line-height:35px;
        border-radius:5px;
        color:#fff;
        background-color:#4385bf;
        margin:10px 0;
        cursor:pointer;
      }
      #results {
        border:1px solid #4385bf;
        background-color:#bbd4ea;
        height:160px;
        width:500px;
        padding:5px;
        margin:10px 0;
      }
      #results img {
        border:1px solid #000;
        margin:0 5px 0 0;
      }
      #file {
        opacity:0;
      }

      </style>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>

    <form id="form1" runat="server">
            <input type="file" accept="image/jpeg, image/gif, image/png" id="file" name="files[]" multiple>

       <%--     <button type="submit">submit</button>  --%>

    <div>

        <div id="upload">撮影済選択</div>
        <div id="results"></div>
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script>
            $(function () {
                $('#upload').click(function () {
                    $('#file').click();
                    $('#file').on('change', setImage);
                });

                function setImage() {
                    for (var i = 0; i < this.files.length; i++) {
                        var file = this.files[i];
                        fr = new FileReader();
                        fr.onload = function (e) {
                            var img = $('<img>');
                            img.attr('src', e.target.result);
                            img.css('height', '160px', 'width', '100px');
                            img.css('width', '160px');
                            $('#results').append(img);
                        };
                        fr.readAsDataURL(file);
                    }
                }
            });

        </script>

    </div>

        <asp:Button ID="Button1" runat="server" Text="保存" />
    </form>

</body>
</html>

【コード部分】

Public Class test
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub

    Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click

        Dim posted As HttpPostedFile
        Dim SendPath As String = "C:\hoge\"

        posted = Request.Files("file[0]")

        If Not posted.FileName = "" Then
            posted.SaveAs(SendPath & "1.JPG")
        End If

    End Sub
End Class
【開発環境】
Windows8.1 IIS 8.5
Microsoft Visual Studio Express 2012	 for Web

【テスト・稼働環境】
サーバは、WindowsServer2012 R2
端末
iPad OS 8.1.2
iPhone OS 8.1.2
ブラウザは、当面Safariを考えています。
他、Androidも考えています。

【したいこと】
1) ブラウザ上のボタン「撮影済選択」を押すと、iPhoneの「写真」が開き、その中の「カメラロール」等から、画像を複数選択します。
2) 複数選択後は、選択した画像が、複数プレビュー表示されます。
3) 1)、2)とは別に、「撮影」ボタンを押すと「カメラ」が起動し、撮影するとそれがプレビュー(サムネイル)表示されます。
4) 3)を繰り返すと、その分だけ、カメラ起動→撮影→撮影した画像のプレビュー表示がされます。
5) プレビューされている画像で、何らかの×ボタンを押したり、もしくはチェックボックスの操作等で、アップロードを取りやめることができるようにする。
6) 「保存」ボタンを押すと、5)で指定した画像がサーバの特定のフォルダ「C:\hoge」にアップロードされます。
アップロードしたい画像は縮小されたデータではなく、選択・撮影されたデータそのものです。
7) 既存の画像データを開く「撮影済選択」ボタンと「撮影」ボタンは、別の機能であり別のボタンが望ましいですが、「選択」ボタンを押したあと、「写真またはビデオを撮る」「フォトライブラリ」に自動的に分岐して、そこから操作が進むようになっても良いです。
8) できれば、5)まではサーバとの通信無しでブラウザのみで完結できると良いです。

【作成の経過とご質問】
1), 2)はできたので、まずは 6)のように、「保存」ボタンでサーバに保存したいのですが、どのようにコードを書けば良いでしょうか。(「保存」ボタンはASP.netのボタンです。)
コードの ”posted” で、複数表示されているプレビューのうちの1枚目が取得できるかと思ったのですが、Nothingとなっていて取得できません。

【ソース部分】
```ASP.net
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="test.aspx.vb" Inherits="Test.test" %>
  <style type="text/css">
 
      #upload {
        width:90px;
        height:35px;
        text-align:center;
        line-height:35px;
        border-radius:5px;
        color:#fff;
        background-color:#4385bf;
        margin:10px 0;
        cursor:pointer;
      }
      #results {
        border:1px solid #4385bf;
        background-color:#bbd4ea;
        height:160px;
        width:500px;
        padding:5px;
        margin:10px 0;
      }
      #results img {
        border:1px solid #000;
        margin:0 5px 0 0;
      }
      #file {
        opacity:0;
      }

      </style>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>

    <form id="form1" runat="server">
            <input type="file" accept="image/jpeg, image/gif, image/png" id="file" name="files[]" multiple>

       <%--     <button type="submit">submit</button>  --%>

    <div>

        <div id="upload">撮影済選択</div>
        <div id="results"></div>
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script>
            $(function () {
                $('#upload').click(function () {
                    $('#file').click();
                    $('#file').on('change', setImage);
                });

                function setImage() {
                    for (var i = 0; i < this.files.length; i++) {
                        var file = this.files[i];
                        fr = new FileReader();
                        fr.onload = function (e) {
                            var img = $('<img>');
                            img.attr('src', e.target.result);
                            img.css('height', '160px', 'width', '100px');
                            img.css('width', '160px');
                            $('#results').append(img);
                        };
                        fr.readAsDataURL(file);
                    }
                }
            });

        </script>

    </div>

        <asp:Button ID="Button1" runat="server" Text="保存" />
    </form>

</body>
</html>
```
【コード部分】
```
Public Class test
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub

    Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click

        Dim posted As HttpPostedFile
        Dim SendPath As String = "C:\hoge\"

        posted = Request.Files("file[0]")

        If Not posted.FileName = "" Then
            posted.SaveAs(SendPath & "1.JPG")
        End If

    End Sub
End Class
```