QA@IT
«回答へ戻る

回答を投稿

書き直してみたものです。FileUpload サーバーコントロールを6個並べ、ボタンでアップロードします。
1) 起動直後のページイメージ
_.jpg
2) コード部分

Imports System.IO

Public Class Start
    Inherits System.Web.UI.Page

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

        Me.Form.Enctype = "multipart/form-data"

    End Sub

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

        Dim fileName As String

        Dim SendPath As String = "C:\picture\"

        ' 0番目
        If (upfile.HasFile) Then
            fileName = upfile.FileName
            upfile.SaveAs(SendPath & "0_" & upfile.FileName)
        End If

        ' 1番目
        If (upfile1.HasFile) Then
            fileName = upfile1.FileName
            upfile1.SaveAs(SendPath & "1_" & upfile.FileName)
        End If

        ' 2番目
        If (upfile2.HasFile) Then
            fileName = upfile2.FileName
            upfile2.SaveAs(SendPath & "2_" & upfile.FileName)
        End If

        ' 3番目
        If (upfile3.HasFile) Then
            fileName = upfile3.FileName
            upfile3.SaveAs(SendPath & "3_" & upfile.FileName)
        End If

        ' 4番目
        If (upfile4.HasFile) Then
            fileName = upfile4.FileName
            upfile4.SaveAs(SendPath & "4_" & upfile.FileName)
        End If

        ' 5番目
        If (upfile5.HasFile) Then
            fileName = upfile5.FileName
            upfile5.SaveAs(SendPath & "5_" & upfile.FileName)
        End If

    End Sub

End Class

3)ソース部分

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Start.aspx.vb" Inherits="TEST.Start" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <style type="text/css">
        .auto-style1 {
            width: 324px;
        }
        .auto-style2 {
            width: 323px;
        }
    </style>
</head>

<body>

    <form id="form1" runat="server" enctype="multipart/form-data">

         <asp:Button ID="Button1" runat="server" Text="Button" /> <br/> <br/> 
         <table style="width: 83%;">
             <tr>
                 <td class="auto-style1" style="vertical-align: top">


        <asp:FileUpload ID="upfile" runat="server" />
                     <br />
       <img id="thumb" width="320" style="vertical-align: top"/></td>
                 <td class="auto-style2" style="vertical-align: top">  


      <asp:FileUpload ID="upfile1" runat="server" />  
                     <br />
    <img id="thumb1" width="320"/></td>
                 <td style="vertical-align: top">  

       <asp:FileUpload ID="upfile2" runat="server" /> 
                     <br />
    <img id="thumb2" width="320"/></td>
             </tr>
             <tr>
                 <td class="auto-style1" style="vertical-align: top">  

       <asp:FileUpload ID="upfile3" runat="server" /> 
                     <br />
    <img id="thumb3" width="320"/></td>
                 <td class="auto-style2" style="vertical-align: top">  

       <asp:FileUpload ID="upfile4" runat="server" /> 
                     <br />
    <img id="thumb4" width="320"/></td>
                 <td style="vertical-align: top">  

       <asp:FileUpload ID="upfile5" runat="server" /> 
                     <br />
    <img id="thumb5" width="320"/></td>
             </tr>
             <tr>
                 <td class="auto-style1" style="vertical-align: top">&nbsp;</td>
                 <td class="auto-style2" style="vertical-align: top">&nbsp;</td>
                 <td style="vertical-align: top">&nbsp;</td>
             </tr>
         </table>



    </form> 


    <script>

        showImage(false);


 // 0番目
$("#upfile").onchange = function(evt){
    showImage(false);
    var files = evt.target.files;
    if(files.length == 0) return;
    var file = files[0];
    if(!file.type.match(/image/)) {
        alert('画像ファイルを選んでください');
        return;
    }        
    var reader = new FileReader();        
    reader.onload = function(evt) {
        $("#thumb").src = reader.result;
        showImage(true);
    }
    reader.readAsDataURL(file);
}

// 1番目
$("#upfile1").onchange = function (evt) {
    showImage(false);
    var files = evt.target.files;
    if (files.length == 0) return;
    var file = files[0];
    if (!file.type.match(/image/)) {
        alert('画像ファイルを選んでください');
        return;
    }        
    var reader = new FileReader();        
    reader.onload = function (evt) {
        $("#thumb1").src = reader.result;
        showImage(true);
    }
    reader.readAsDataURL(file);
}

// 2番目
$("#upfile2").onchange = function (evt) {
    showImage(false);
    var files = evt.target.files;
    if (files.length == 0) return;
    var file = files[0];
    if (!file.type.match(/image/)) {
        alert('画像ファイルを選んでください');
        return;
    }
    var reader = new FileReader();
    reader.onload = function (evt) {
        $("#thumb2").src = reader.result;
        showImage(true);
    }
    reader.readAsDataURL(file);
}

// 3番目
$("#upfile3").onchange = function (evt) {
    showImage(false);
    var files = evt.target.files;
    if (files.length == 0) return;
    var file = files[0];
    if (!file.type.match(/image/)) {
        alert('画像ファイルを選んでください');
        return;
    }
    var reader = new FileReader();
    reader.onload = function (evt) {
        $("#thumb3").src = reader.result;
        showImage(true);
    }
    reader.readAsDataURL(file);
}

// 4番目
$("#upfile4").onchange = function (evt) {
    showImage(false);
    var files = evt.target.files;
    if (files.length == 0) return;
    var file = files[0];
    if (!file.type.match(/image/)) {
        alert('画像ファイルを選んでください');
        return;
    }
    var reader = new FileReader();
    reader.onload = function (evt) {
        $("#thumb4").src = reader.result;
        showImage(true);
    }
    reader.readAsDataURL(file);
}

// 5番目
$("#upfile5").onchange = function (evt) {
    showImage(false);
    var files = evt.target.files;
    if (files.length == 0) return;
    var file = files[0];
    if (!file.type.match(/image/)) {
        alert('画像ファイルを選んでください');
        return;
    }
    var reader = new FileReader();
    reader.onload = function (evt) {
        $("#thumb5").src = reader.result;
        showImage(true);
    }
    reader.readAsDataURL(file);
}

// 6番目
$("#upfile6").onchange = function (evt) {
    showImage(false);
    var files = evt.target.files;
    if (files.length == 0) return;
    var file = files[0];
    if (!file.type.match(/image/)) {
        alert('画像ファイルを選んでください');
        return;
    }
    var reader = new FileReader();
    reader.onload = function (evt) {
        $("#thumb6").src = reader.result;
        showImage(true);
    }
    reader.readAsDataURL(file);
}

function showImage(b) {
    var val = b ? "block" : "none";

    $("#thumb").style.display = val;
    $("#thumb1").style.display = val;
}    
書き直してみたものです。FileUpload サーバーコントロールを6個並べ、ボタンでアップロードします。
1) 起動直後のページイメージ
![_.jpg](https://qa-atmarkit-image.s3.amazonaws.com/uploads/attached_image/image/41/_.jpg)
2) コード部分
```
Imports System.IO

Public Class Start
    Inherits System.Web.UI.Page

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

        Me.Form.Enctype = "multipart/form-data"

    End Sub

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

        Dim fileName As String

        Dim SendPath As String = "C:\picture\"

        ' 0番目
        If (upfile.HasFile) Then
            fileName = upfile.FileName
            upfile.SaveAs(SendPath & "0_" & upfile.FileName)
        End If

        ' 1番目
        If (upfile1.HasFile) Then
            fileName = upfile1.FileName
            upfile1.SaveAs(SendPath & "1_" & upfile.FileName)
        End If

        ' 2番目
        If (upfile2.HasFile) Then
            fileName = upfile2.FileName
            upfile2.SaveAs(SendPath & "2_" & upfile.FileName)
        End If

        ' 3番目
        If (upfile3.HasFile) Then
            fileName = upfile3.FileName
            upfile3.SaveAs(SendPath & "3_" & upfile.FileName)
        End If

        ' 4番目
        If (upfile4.HasFile) Then
            fileName = upfile4.FileName
            upfile4.SaveAs(SendPath & "4_" & upfile.FileName)
        End If

        ' 5番目
        If (upfile5.HasFile) Then
            fileName = upfile5.FileName
            upfile5.SaveAs(SendPath & "5_" & upfile.FileName)
        End If

    End Sub

End Class
```
3)ソース部分
```ここに言語を入力
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Start.aspx.vb" Inherits="TEST.Start" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <style type="text/css">
        .auto-style1 {
            width: 324px;
        }
        .auto-style2 {
            width: 323px;
        }
    </style>
</head>

<body>

    <form id="form1" runat="server" enctype="multipart/form-data">
       
         <asp:Button ID="Button1" runat="server" Text="Button" /> <br/> <br/> 
         <table style="width: 83%;">
             <tr>
                 <td class="auto-style1" style="vertical-align: top">

       
        <asp:FileUpload ID="upfile" runat="server" />
                     <br />
       <img id="thumb" width="320" style="vertical-align: top"/></td>
                 <td class="auto-style2" style="vertical-align: top">  


      <asp:FileUpload ID="upfile1" runat="server" />  
                     <br />
    <img id="thumb1" width="320"/></td>
                 <td style="vertical-align: top">  

       <asp:FileUpload ID="upfile2" runat="server" /> 
                     <br />
    <img id="thumb2" width="320"/></td>
             </tr>
             <tr>
                 <td class="auto-style1" style="vertical-align: top">  

       <asp:FileUpload ID="upfile3" runat="server" /> 
                     <br />
    <img id="thumb3" width="320"/></td>
                 <td class="auto-style2" style="vertical-align: top">  

       <asp:FileUpload ID="upfile4" runat="server" /> 
                     <br />
    <img id="thumb4" width="320"/></td>
                 <td style="vertical-align: top">  

       <asp:FileUpload ID="upfile5" runat="server" /> 
                     <br />
    <img id="thumb5" width="320"/></td>
             </tr>
             <tr>
                 <td class="auto-style1" style="vertical-align: top">&nbsp;</td>
                 <td class="auto-style2" style="vertical-align: top">&nbsp;</td>
                 <td style="vertical-align: top">&nbsp;</td>
             </tr>
         </table>



    </form> 
 

    <script>

        showImage(false);


 // 0番目
$("#upfile").onchange = function(evt){
    showImage(false);
    var files = evt.target.files;
    if(files.length == 0) return;
    var file = files[0];
    if(!file.type.match(/image/)) {
        alert('画像ファイルを選んでください');
        return;
    }        
    var reader = new FileReader();        
    reader.onload = function(evt) {
        $("#thumb").src = reader.result;
        showImage(true);
    }
    reader.readAsDataURL(file);
}
 
// 1番目
$("#upfile1").onchange = function (evt) {
    showImage(false);
    var files = evt.target.files;
    if (files.length == 0) return;
    var file = files[0];
    if (!file.type.match(/image/)) {
        alert('画像ファイルを選んでください');
        return;
    }        
    var reader = new FileReader();        
    reader.onload = function (evt) {
        $("#thumb1").src = reader.result;
        showImage(true);
    }
    reader.readAsDataURL(file);
}

// 2番目
$("#upfile2").onchange = function (evt) {
    showImage(false);
    var files = evt.target.files;
    if (files.length == 0) return;
    var file = files[0];
    if (!file.type.match(/image/)) {
        alert('画像ファイルを選んでください');
        return;
    }
    var reader = new FileReader();
    reader.onload = function (evt) {
        $("#thumb2").src = reader.result;
        showImage(true);
    }
    reader.readAsDataURL(file);
}

// 3番目
$("#upfile3").onchange = function (evt) {
    showImage(false);
    var files = evt.target.files;
    if (files.length == 0) return;
    var file = files[0];
    if (!file.type.match(/image/)) {
        alert('画像ファイルを選んでください');
        return;
    }
    var reader = new FileReader();
    reader.onload = function (evt) {
        $("#thumb3").src = reader.result;
        showImage(true);
    }
    reader.readAsDataURL(file);
}

// 4番目
$("#upfile4").onchange = function (evt) {
    showImage(false);
    var files = evt.target.files;
    if (files.length == 0) return;
    var file = files[0];
    if (!file.type.match(/image/)) {
        alert('画像ファイルを選んでください');
        return;
    }
    var reader = new FileReader();
    reader.onload = function (evt) {
        $("#thumb4").src = reader.result;
        showImage(true);
    }
    reader.readAsDataURL(file);
}

// 5番目
$("#upfile5").onchange = function (evt) {
    showImage(false);
    var files = evt.target.files;
    if (files.length == 0) return;
    var file = files[0];
    if (!file.type.match(/image/)) {
        alert('画像ファイルを選んでください');
        return;
    }
    var reader = new FileReader();
    reader.onload = function (evt) {
        $("#thumb5").src = reader.result;
        showImage(true);
    }
    reader.readAsDataURL(file);
}

// 6番目
$("#upfile6").onchange = function (evt) {
    showImage(false);
    var files = evt.target.files;
    if (files.length == 0) return;
    var file = files[0];
    if (!file.type.match(/image/)) {
        alert('画像ファイルを選んでください');
        return;
    }
    var reader = new FileReader();
    reader.onload = function (evt) {
        $("#thumb6").src = reader.result;
        showImage(true);
    }
    reader.readAsDataURL(file);
}

function showImage(b) {
    var val = b ? "block" : "none";

    $("#thumb").style.display = val;
    $("#thumb1").style.display = val;
}    
```