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 に答える