HTML5相机图片XMLHttpRequest文件为空

时间:2017-09-22 19:13:09

标签: javascript asp.net html5 mobile camera

我正在尝试使用HTML5和XMLHttpRequest读取相机。我尝试了几件事,但无论我改变什么,我似乎无法通过帖子实际发送表格数据,数据。所以有人可以告诉我我在哪里制作错误并且不生成任何要保存的图像。或者,如果您不必调用网址,而是使用本地功能,那将非常棒。

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>

文件头部的javascript:

<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

<%@ 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!");

%>

当我调用SaveToFile.aspx页面时,没有发送文件且文件计数= 0;

任何帮助将不胜感激!并且保持在同一页面内的方式将是非常棒的。我在另一篇文章中看到了对此的引用,但是当我调用本地函数时,我收到404错误。

1 个答案:

答案 0 :(得分:0)

使用asp.net和webforms,表单信息不完整。

我从

开始
<form>

在网站母版页上

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

这修复了所有问题和几个不同的选项,以便从客户端获取数据,并在我做出更改后自行修复。

使用母版页我不知道解决此问题的不同方法,但这适用于网站管理员。