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> 

파일의 머리에 자바 스크립트 :

<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 페이지를 호출 오전함으로써 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 id="form1" runat="server" enctype="multipart/form-data"> 

에 사이트 마스터 페이지에

<form> 

에서 갔다.

마스터 페이지에서이 문제를 해결할 수있는 다른 방법을 모르지만 사이트 마스터에서 작동합니다.