Javascript：将图像上传到特定目录

I know I'm asking a stupid question. But I'm not a good googler. All I need to do is upload a file from a to a specific relative address. Namely "~/Content/img/uploads/". This is what I have so far:

我知道我在问一个愚蠢的问题。但我不是一个好的Google员工。我需要做的就是将文件从a上传到特定的相对地址。即“〜/ 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 Here's what I don't understand. Here is a function I found to upload an image, but no where does it specify the url that it will be uploaded to:

编辑这是我不明白的。这是我发现上传图片的功能,但没有指定将上传到的网址:

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);
    }
}

1 个解决方案

#1

So I have solved my problem. Can anyone improve on my solution?

所以我解决了我的问题。有人可以改进我的解决方案吗?

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>

then JS:

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

and finally my C#:

最后我的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";
                }
            }}

#1