个人中心
gpt4 book ai didi

javascript - 如何在放置事件后获取实际图像宽度和高度

转载 作者：行者123 更新时间：2023-11-28 00:09:55 25 4
gpt4 key购买 nike

我一直在研究以下范例，以便学习“如何从我的桌面拖动图像并将其放入浏览器”与 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>

最佳答案

以这种方式尝试(更新为 100 毫秒超时):

    reader.onload = (function(aImg) {
        return function(e) {
            aImg.src = e.target.result;
            setTimeout(function() {
                console.log(aImg.width);  // right now file already loaded...
            }, 100);
        };
    })(img);

http://jsfiddle.net/wVB3V/3/

关于javascript - 如何在放置事件后获取实际图像宽度和高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15987445/

25 4 0
文章推荐： html - 在 Opera 中堆叠 HTML 无序列表
文章推荐： javascript - 在页面加载给定的 url 字符串时触发 onclick
文章推荐： javascript - 为什么使用 data() 将函数存储在元素上？
文章推荐： javascript - 如何将此代码从 UI Route 更改为核心 ng-Route
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com