Image de l'appareil photo HTML5 Le fichier XMLHttpRequest est vide

Question

Je tente de lire la caméra en utilisant HTML5 et XMLHttpRequest. J'ai essayé quelques choses mais peu importe ce que je change, je ne peux pas vraiment envoyer les données de formulaire, les données par la poste. Alors quelqu'un peut-il me dire où je fais l'erreur et ne générant aucune image à sauvegarder. Alternativement, si vous n'avez pas besoin d'appeler une URL, utilisez plutôt une fonction locale qui serait géniale.

fichier aspx et la structure 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> 

Le javascript dans la tête du fichier:

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

Et voici le 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!"); 

%> 

Au moment où j'appelle la page SaveToFile.aspx il y a aucun fichier envoyé et le nombre de fichiers = 0;

Toute aide serait grandement appréciée! Et un moyen de rester dans la même page serait génial. J'ai vu une référence à cela dans un autre post mais quand j'appelle une fonction locale, j'obtiens une erreur 404.

Answer 1

Avec asp.net et webforms, les informations de formulaire étaient incomplètes.

Je suis passé de

<form> 

sur la page principale du site pour

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

Ce fixe toutes les questions et plusieurs options différentes pour obtenir des données de côté client, se fixe une fois que je fait le changement.

Avec une page maître, je ne connais pas de façon différente de résoudre ce problème, mais cela fonctionne avec le maître du site.