HTML5カメラ画像XMLHttpRequestファイルが空です

Question

HTML5とXMLHttpRequestを使用してカメラを読み取ろうとしています。私はいくつかのことを試しましたが、何が変わっても実際にフォームデータをポストから送信することはできません。だから、誰かが私がどこにエラーを出しているのか、保存するための画像を生成していないことを教えてくれます。あるいは、あなたがURLを呼び出す必要はなく、代わりにすばらしいローカル関数を使用することができます。

aspxファイルとHTML構造。

<!-- CAMERA UPLOAD --> 
<div class="row" runat="server" id="div_Upload" visible="false"> 
    <hr /> 
    <label for="fileToUpload">Select a File to Upload</label><br /> 
    <input type="file" name="fileToUpload" class="btn btn-shadow" id="fileToUpload" accept="image/*" capture="camera" onchange="fileSelected()" /> 
    <input type="button" name="btn_upload" value="Upload" id="btn_upload" onclick="uploadFile()" class="btn btn-shadow" /> 
    <div id="fileName"></div> 
    <div id="fileSize"></div> 
    <div id="fileType"></div> 
    <div id="progressNumber"></div> 
    <hr /> 
</div> 

ファイルの頭の中でのjavascript：私はSaveToFile.aspxページを呼び出していた時間によって

<script type="text/javascript"> 

    function fileSelected() { 
     var file = document.getElementById('fileToUpload').files[0]; 
     alert("fileSelected : " + file.name); 
     if (file) { 
      var fileSize = 0; 
      if (file.size > 1024 * 1024) 
       fileSize = (Math.round(file.size * 100/(1024 * 1024))/100).toString() + 'MB'; 
      else 
       fileSize = (Math.round(file.size * 100/1024)/100).toString() + 'KB'; 

      document.getElementById('fileName').innerHTML = 'Name: ' + file.name; 
      document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize; 
      document.getElementById('fileType').innerHTML = 'Type: ' + file.type; 
     } 
    } 

    function uploadFile() { 
     var fd = new FormData(); 
     var file = document.getElementById('fileToUpload').files[0] 
     alert("upload File : " + file.name); 
     fd.append(file.name, file); 
     var xhr = new XMLHttpRequest(); 
     xhr.upload.addEventListener("progress", uploadProgress, false); 
     xhr.addEventListener("load", uploadComplete, false); 
     xhr.addEventListener("error", uploadFailed, false); 
     xhr.addEventListener("abort", uploadCanceled, false); 
     xhr.open("POST", "SaveToFile.aspx"); 
     xhr.send(fd); 
     alert("xhr Response: " + xhr.response); 
    } 

    function uploadProgress(evt) { 
     if (evt.lengthComputable) { 
      var percentComplete = Math.round(evt.loaded * 100/evt.total); 
      document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%'; 
     } 
     else { 
      document.getElementById('progressNumber').innerHTML = 'unable to compute'; 
     } 
    } 

    function uploadComplete(evt) { 
     /* This event is raised when the server send back a response */ 
     alert(evt.target.responseText); 
    } 

    function uploadFailed(evt) { 
     alert("There was an error attempting to upload the file."); 
    } 

    function uploadCanceled(evt) { 
     alert("The upload has been canceled by the user or the browser dropped the connection."); 
    } 

</script> 

そして、ここではSaveToFile.aspx

ある

<%@ Page Language="C#" %> 

<% 
    HttpFileCollection files = HttpContext.Current.Request.Files; 

    for (int index = 0; index < files.Count; index++) 
    { 
     HttpPostedFile uploadfile = files[index]; 
     uploadfile.SaveAs(Server.MapPath(".") + "\\upload\\" + uploadfile.FileName); 
    } 
    HttpContext.Current.Response.Write("Upload successfully!"); 

%> 

があります送信されたファイルはなく、ファイル数= 0です。

ご協力いただければ幸いです！そして、同じページ内に保存する方法はすばらしいでしょう。私は別のポストでそれを参照していましたが、ローカル関数を呼び出すと404エラーが発生します。

Answer 1

asp.netとwebformsでは、フォーム情報が不完全でした。私は変更を行った後、

私は、サイトマスターページ上の

<form> 

からこれは、クライアント側からデータを取得するために、すべての問題や、いくつかの異なるオプションを固定

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

に行って、自分自身を修正しました。

マスターページでは、これを解決する別の方法はわかりませんが、これはサイトマスターで機能します。