1

好的，所以我在尝试将存储在本地存储中的值传递到输入字段时遇到问题。我发现了另一个线程（将 javascript 变量值传递到输入类型隐藏值中），它显示了如何做到这一点，但它仍然对我不起作用，我不知道我做错了什么。我的整个代码都在下面，但我把它分开了，以便更容易找到真正重要的部分。

    <html>
    <head>
<title>Location details</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript">

这是我试图将存储的值传递到字段但没有运气的地方。

    document.getElementById("plat").value = localStorage.latitude;
    document.getElementById("plon").value = localStorage.longitude;

    function fileSelected() {            
        var file = document.getElementById("fileUpload").files[0];
        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 id = new formData();
        id.append("fileUpload", document.getElementById("fileUpload").files[0]);
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", uploadProgress, false);
        xhr.addEventListener("load", uploadComplete, false);
        xhr.addEventListener("error", uploadFailed, false);
        xhr.addEventListener("abort", uploadCancelled, false);
        xhr.open("POST", "snap.php");
        xhr.send(id);
    }

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

    //==================================================================
    // These events are raised when the server sends back a response
    //==================================================================
    function uploadComplete(evt) {

        alert(evt.target.responseText);
    }

    function uploadFailed(evt) {
        alert("Therew as an error attempting to upload the file.");
    }

    function uploadCancelled(evt) {
        alert("The upload has been cancelled by the user or the browser dropped the connection.");
    }
</script>
</head>
<body>
     <div>
    <form id="form1" enctype="multipart/form-data" method="post" action="scripts/snap.php">

这是我的输入字段。他们在我看来很好。

       <p>
            <input id="plat" type="text" value="" />
            <input id="plon" type="hidden" value="" />
        </p>
        <div class="row">
            <label for="fileUpload">Select an image to Upload</label><br />
            <input type="file" name="fileUpload" id="fileUpload" onchange="fileSelected();" />
        </div>
        <div id="filename"></div>
        <div id="fileSize"></div>    
        <div id="fileType"></div>
        <div class="row">
            <input type="button" onclick="uploadFile()" value="Upload" />
        </div>
        <div id="progressNumber"></div>
    </form>
</div>
</body>
</html>
4

1 回答 1

1

在加载 dom 内容之前尝试您正在调用脚本的这段代码：

    document.addEventListener('DOMContentLoaded', function () {
        document.getElementById("plat").value = localStorage.latitude;
        document.getElementById("plon").value = localStorage.longitude;
    }, false);


    function fileSelected() {
        var file = document.getElementById("fileUpload").files[0];
        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 id = new formData();
        id.append("fileUpload", document.getElementById("fileUpload").files[0]);
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", uploadProgress, false);
        xhr.addEventListener("load", uploadComplete, false);
        xhr.addEventListener("error", uploadFailed, false);
        xhr.addEventListener("abort", uploadCancelled, false);
        xhr.open("POST", "snap.php");
        xhr.send(id);
    }

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

    //==================================================================
    // These events are raised when the server sends back a response
    //==================================================================
    function uploadComplete(evt) {

        alert(evt.target.responseText);
    }

    function uploadFailed(evt) {
        alert("Therew as an error attempting to upload the file.");
    }

    function uploadCancelled(evt) {
        alert("The upload has been cancelled by the user or the browser dropped the connection.");
    }
于 2013-04-18T05:34:58.847 回答