3

「デスクトップから画像をドラッグしてブラウザにドロップする方法」がHtml 5で機能することを学ぶために、次のパラダイムに取り組んでいます。しかし、画像をドロップした後、情報を取得できません関数 handleFiles(files,n) の画像の実際の幅と高さを警告します。これは可能ですか？誰でも私を助けることができますか？

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="http://www.facebook.com/2008/fbml"  xml:lang="el-gr" lang="el-gr" dir="ltr">
    <head>
       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
       <title>Files javascript upload with drag and drop</title>
    </head>
<title>File(s) size</title>
</head>
<body>

<table>
    <tr>
        <td><input type="file" id="fileElem1"  name="fileElem1" accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<div id="dropbox_1" style="width:200px;height:100px;border:1px solid blue;z-index=10;">  
    <div id="preview1"></div>
</div>
</td>
        <td><input type="file" id="fileElem2"  name="fileElem2" accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<div id="dropbox_2" style="width:200px;height:100px;border:1px solid blue;">  <div id="preview2"></div></div></td>
        <td><input type="file" id="fileElem3"  name="fileElem3" accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<div id="dropbox_3" style="width:200px;height:100px;border:1px solid blue;">  <div id="preview3"></div></div></td>
    </tr>
</table>

<input type="button" onclick="sendFiles()" value="send" >
<script>
    var dropbox1,dropbox2,dropbox3; 
    dropbox1 = document.getElementById("dropbox_1");
    dropbox1.addEventListener("dragenter", dragenter, false);
    dropbox1.addEventListener("dragover", dragover, false);
    dropbox1.addEventListener("drop", drop, false);

    dropbox2 = document.getElementById("dropbox_2");
    dropbox2.addEventListener("dragenter", dragenter, false);
    dropbox2.addEventListener("dragover", dragover, false);
    dropbox2.addEventListener("drop", drop, false);

    dropbox3 = document.getElementById("dropbox_3");
    dropbox3.addEventListener("dragenter", dragenter, false);
    dropbox3.addEventListener("dragover", dragover, false);
    dropbox3.addEventListener("drop", drop, false);


    var fileElem1 = document.getElementById("fileElem1");
        var fileElem2 = document.getElementById("fileElem2");   
        var fileElem3 = document.getElementById("fileElem3");


    function dragenter(e) {
      e.stopPropagation();
      e.preventDefault();
    }

    function dragover(e) {
      e.stopPropagation();
      e.preventDefault();
    } 

    function drop(e) {
      e.stopPropagation();
      e.preventDefault();

      var n=e.currentTarget.id.split("_");
      var dt = e.dataTransfer;
      var files = dt.files;

      handleFiles(files,n[1]);
    }

    var filesforupload = new Array(null,null,null);
    function handleFiles(files,n) {

      for (var i = 0; i < files.length; i++) {
        var file = files[i];
        var imageType = /image.*/;

        if (!file.type.match(imageType)) {
          continue;
        }

        var img = document.createElement("img");
        img.classList.add("obj");
        img.file = file;
        alert(img.width); // <- HERE I NEED TO GET THE width of the image
            img.style.zIndex=2;
            img.style.position="absolute";                  
            document.getElementById("dropbox_"+n).style.height="200";
        document.getElementById("preview"+n).innerHTML = "";
        document.getElementById("preview"+n).appendChild(img);

        var reader = new FileReader();
        reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
        reader.readAsDataURL(file);
        filesforupload[n-1]=file;
        //filesforupload.push(file);
        //sendFile(file);
      }
    }


    function sendFile(file) {
            var uri = "upload.php";
            var xhr = new XMLHttpRequest();
            var fd = new FormData();

            xhr.open("POST", uri, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // Handle response.
                    alert(xhr.responseText); 
           // handle response.
                }
            };
        var reader = new FileReader();
            fd.append('fileElem', file);
            // Initiate a multipart/form-data upload
            xhr.send(fd);
        }


    function sendFiles(){

                for (var i=0; i<filesforupload.length; i++) {
           if(filesforupload[i]!=null)
                        sendFile(filesforupload[i]);
                }
    }


            dropbox1.ondrop = function(event) {
                event.stopPropagation();
                event.preventDefault(); 
        filesArray = event.dataTransfer.files;
            }


    function dump(obj) {
        var out = '';
        for (var i in obj) {
        out += i + ": " + obj[i] + "\n";
        }

        alert(out);        
    }
</script>
</body>
</html>
4

2 に答える 2

0

とにかく、このように画像にIDを追加し、画像にonload関数を追加することで、次の解決策を見つけました

img.addEventListener('load', function() { alert(document.getElementById('test').width); /* ... */ }, false);
img.id="test";

img オブジェクトが追加された後に load イベントが発生するため、順序は重要ではありません。

これが完全なコードです。

<html xmlns="http://www.w3.org/1999/xhtml"
          xmlns:og="http://ogp.me/ns#"
          xmlns:fb="http://www.facebook.com/2008/fbml"  xml:lang="el-gr" lang="el-gr" dir="ltr">
        <head>
           <meta http-equiv="content-type" content="text/html; charset=utf-8" />
           <title>File(s) javascript upload with drag and drop</title>
        </head>
    <title>File(s) size</title>
    </head>
    <body>

    <table>
        <tr>
            <td><input type="file" id="fileElem1"  name="fileElem1" accept="image/*" style="display:none" onchange="handleFiles(this.files)">
    <div id="dropbox_1" style="min-width:200px;height:100px;border:1px solid blue;z-index=10;">  
        <div id="preview1"></div>
    </div>
    </td>
            <td><input type="file" id="fileElem2"  name="fileElem2" accept="image/*" style="display:none" onchange="handleFiles(this.files)">
    <div id="dropbox_2" style="width:200px;height:100px;border:1px solid blue;">  <div id="preview2"></div></div></td>
            <td><input type="file" id="fileElem3"  name="fileElem3" accept="image/*" style="display:none" onchange="handleFiles(this.files)">
    <div id="dropbox_3" style="width:200px;height:100px;border:1px solid blue;">  <div id="preview3"></div></div></td>
        </tr>
    </table>

    <input type="button" onclick="getthewidth()" value="send" >
    <script>
function getthewidth(){
alert(document.getElementById('test').width);
}
        var dropbox1,dropbox2,dropbox3; 
        dropbox1 = document.getElementById("dropbox_1");
        dropbox1.addEventListener("dragenter", dragenter, false);
        dropbox1.addEventListener("dragover", dragover, false);
        dropbox1.addEventListener("drop", drop, false);

        dropbox2 = document.getElementById("dropbox_2");
        dropbox2.addEventListener("dragenter", dragenter, false);
        dropbox2.addEventListener("dragover", dragover, false);
        dropbox2.addEventListener("drop", drop, false);

        dropbox3 = document.getElementById("dropbox_3");
        dropbox3.addEventListener("dragenter", dragenter, false);
        dropbox3.addEventListener("dragover", dragover, false);
        dropbox3.addEventListener("drop", drop, false);


        var fileElem1 = document.getElementById("fileElem1");
            var fileElem2 = document.getElementById("fileElem2");   
            var fileElem3 = document.getElementById("fileElem3");


        function dragenter(e) {
          e.stopPropagation();
          e.preventDefault();
        }

        function dragover(e) {
          e.stopPropagation();
          e.preventDefault();
        } 

        function drop(e) {
          e.stopPropagation();
          e.preventDefault();

          var n=e.currentTarget.id.split("_");
          var dt = e.dataTransfer;
          var files = dt.files;

          handleFiles(files,n[1]);
        }

        var filesforupload = new Array(null,null,null);
        function handleFiles(files,n) {

          for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var imageType = /image.*/;

            if (!file.type.match(imageType)) {
              continue;
            }

            var img = document.createElement("img");
            img.classList.add("obj");
            img.file = file;
        img.addEventListener('load', function() { alert(document.getElementById('test').width); /* ... */ }, false);
        img.id="test";
        //alert(document.getElementById('test').id);
           // alert(img.width); // <- HERE I NEED TO GET THE width of the image
                img.style.zIndex=2;
                img.style.position="absolute";                  
                //document.getElementById("dropbox_"+n).style.height="200";
            document.getElementById("preview"+n).innerHTML = "";
            document.getElementById("preview"+n).appendChild(img);
            var reader = new FileReader();
            reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
            reader.readAsDataURL(file);
            filesforupload[n-1]=file;
            //filesforupload.push(file);
            //sendFile(file);
          }
        }


        function sendFile(file) {
                var uri = "upload.php";
                var xhr = new XMLHttpRequest();
                var fd = new FormData();

                xhr.open("POST", uri, true);
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        // Handle response.
                        alert(xhr.responseText); 
               // handle response.
                    }
                };
            var reader = new FileReader();
                fd.append('fileElem', file);
                // Initiate a multipart/form-data upload
                xhr.send(fd);
            }


        function sendFiles(){

                    for (var i=0; i<filesforupload.length; i++) {
               if(filesforupload[i]!=null)
                            sendFile(filesforupload[i]);
                    }
        }


                dropbox1.ondrop = function(event) {
                    event.stopPropagation();
                    event.preventDefault(); 
            filesArray = event.dataTransfer.files;
                }


        function dump(obj) {
            var out = '';
            for (var i in obj) {
            out += i + ": " + obj[i] + "\n";
            }

            alert(out);        
        }
    </script>
    </body>
    </html>
于 2013-04-17T22:39:32.037 に答える