Javascript：画像を特定のディレクトリにアップロード

Question

私は愚かな質問をしています。しかし、私は良いgooglerではありません。私がする必要があるのは、ファイルを特定の相対アドレスにアップロードすることだけです。つまり "〜/ Content/img/uploads /"です。これは私がこれまで持っているものです。

<div id="my_camera"></div> 

       <!-- First, include the Webcam.js JavaScript Library --> 
       <script type="text/javascript" src="~/Content/js/plugins/WebCam/webcam.js"></script> 

       <!-- Configure a few settings and attach camera --> 
       <script language="JavaScript"> 
        Webcam.set({ 
         width: 320, 
         height: 240, 
         image_format: 'jpeg', 
         jpeg_quality: 90 
        }); 
        Webcam.attach('#my_camera'); 
       </script> 


       <!-- A button for taking snaps --> 
       <form> 
        <input type=button value="Take Snapshot" onClick="take_snapshot()"> 
       </form> 
       <div id="results" style="float:right;width:320px;height:240px"></div> 
       <p id="myResult"></p> 

<script language="JavaScript"> 
    function take_snapshot() { 
     // take snapshot and get image data 
     Webcam.snap(function(data_uri) { 
      // display results in page 

      //Upload image here     
     }); 
    } 

EDIT ここに私は理解していないものです。だから私は私の問題を解決した

function UploadFile(file) { 

    var xhr = new XMLHttpRequest(); 
    if (xhr.upload && file.type == "image/jpeg" && file.size <= $id("MAX_FILE_SIZE").value) { 
// start upload 
     xhr.open("POST", $id("upload").action, true); 
     xhr.setRequestHeader("X_FILENAME", file.name); 
     xhr.send(file); 
    } 
} 

Answer 1

：ここで私は、画像をアップロードすることが判明、ないところ、それはにアップロードされるURLを指定しない機能があります。誰でも私のソリューションを改善できますか？

MTのHTML：その後、

<div id="my_camera" class="center-block"> 

       </div> 

       <!-- First, include the Webcam.js JavaScript Library --> 
       <script type="text/javascript" src="~/Content/js/plugins/WebCam/webcam.js"></script> 

       <!-- Configure a few settings and attach camera --> 
       <script language="JavaScript"> 
        Webcam.set({ 
         width: 320, 
         height: 320, 
         image_format: 'jpeg', 
         jpeg_quality: 90 
        }); 
        Webcam.attach('#my_camera'); 
       </script> 
       <form> 
        <input type=button value="Take Snapshot" onClick="take_snapshot()"> 
       </form> 

       <!-- A button for taking snaps --> 

       <input type="hidden" id="base64Label" name="base64Label" /> 
       <p id="myResult"></p> 

JS：

var myResult = document.getElementById('base64Label'); 
function take_snapshot() { 
    Webcam.snap(function (data_uri) {  
     myResult.value = data_uri; 
    }); 
} 

、最終的に私のC＃：

public ActionResult ReportFault(Model model, FormCollection collection){ 
    string base64 = collection.Get("base64Label").Substring(ExpectedImagePrefix.Length); 
      byte[] bytes = Convert.FromBase64String(base64); 
      string directory = "~/Content/img/faults/" + user.PublicUserId +"/"; 
      fault.ImageData = bytes; 

      Image image; 
      using (MemoryStream ms = new MemoryStream(bytes)) 
      { 
       image = Image.FromStream(ms); 
       if (Directory.Exists(directory)) 
       { 
        string date = (fault.DateCreated.Day.ToString() + fault.DateCreated.Month.ToString() + fault.DateCreated.Year.ToString() + fault.DateCreated.TimeOfDay.ToString().Replace(":", "")).Replace(".",""); 

        image.Save(Server.MapPath(directory + date + ".jpg")); 
        fault.ImageMimeType = directory.Replace("~", "") + date + ".jpg"; 
       } 
       else 
       { 
        string date = fault.DateCreated.Day.ToString() + fault.DateCreated.Month.ToString() + fault.DateCreated.Year.ToString() + fault.DateCreated.TimeOfDay.ToString().Replace(":",""); 
        Directory.CreateDirectory(Server.MapPath(directory)); 
        image.Save(Server.MapPath(directory+date+".jpg")); 
        fault.ImageMimeType = directory.Replace("~","") + date + ".jpg"; 
       } 
      }}