【開発環境】
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
