HTML5 Kamera Bild XMLHttpRequest Datei ist leer

Question

Ich versuche, die Kamera mit HTML5 und XMLHttpRequest zu lesen. Ich habe ein paar Dinge ausprobiert, aber egal was ich ändere, ich kann nicht scheinen, um die Formulardaten, Daten durch die Post tatsächlich zu senden. Kann mir jemand sagen, wo ich den Fehler mache und kein Bild zum Speichern erzeuge? Alternativ, wenn Sie nicht zu einer URL aufrufen müssen, sondern stattdessen eine lokale Funktion verwenden, die großartig wäre.

aspx-Datei und die HTML-Struktur.

<!-- 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> 

Die Javascript im Kopf der Datei:

<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> 

Und hier ist der 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!"); 

%> 

Als ich die SaveToFile.aspx Seite dort anzurufenden sind keine Dateien gesendet und die Anzahl der Dateien = 0;

Jede Hilfe würde sehr geschätzt werden! Und eine Möglichkeit, auf derselben Seite zu bleiben, wäre großartig. Ich habe einen Hinweis darauf in einem anderen Beitrag gesehen, aber wenn ich eine lokale Funktion anrufe, erhalte ich einen Fehler 404.

Answer 1

Mit Asp.net und Webforms war die Formularinformation unvollständig.

ging ich von

<form> 

auf der Website Masterseite

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

Diese alle Probleme behoben und verschiedene Optionen Daten von Client-Seite zu bekommen, selbst festgelegt, sobald ich die Änderung vorgenommen hat.

Mit einer Masterseite kenne ich keine andere Möglichkeit, dies zu lösen, aber das funktioniert mit dem Site-Master.