Question

我试图在“div”中显示由用户选择的图片，这要归功于“输入文件”。
我不知道我的代码有什么问题。我正在使用（试图使用）Kinectic.JS库。这是我的代码：

`<html>
     <head>
         <style type="text/css">
             #droite { float:right; }
             #gauche { float:left; }
         </style>
         <script src="./Librairies/Canvas/kinetic-v4.5.4.js"></script>
         <title>Kinetic test</title>
     </head>
<body>
    <div id="gauche"></div>
    <form name=test>
        <div id="droite"><br><br>
            Please specify the image you want to appear<br>
            <input type="file" name="uploadimage" accept="image/*">
            <br><button id="addImg" value="Upload" >Upload</button>
    </form>
    <script>
        function addImage(){
            var stage = new Kinetic.Stage({
            container: "gauche",
            width: 500,
            height: 400
        });
        var layer = new Kinetic.Layer();

        var imageObj = new Image();
        imageObj.onload = function() {
            var myImage = new Kinetic.Image({
            x: 140,
            y: stage.getHeight() / 2 - 59,
            image: imageObj,
            width: 106,
            height: 118
            });
            layer.add(myImage);
            stage.add(layer); 
       };  

       var f = document.getElementById('uploadimage').files[0];
       var name = f.name;
       var url = window.URL;
       var src = url.createObjectURL(f);

       imageObj.src = src;
       //console.log(imageObj);
       //alert(src);
     }

      document.getElementById('addImg').addEventListener('click',function(){ addImage(); }, false);
         </script>
       <form name=testo>
             <br>Type some text <br>
             <input type="text" name="texte"> <input type="submit" value="Print">
            </div>
       </form>
  </body>
</html>`

Answer 1

我没有对此进行过测试，但我认为你所期待的和实际发生的事情是不同的。文件输入用于表单提交。您将发布您的表单，服务器将收到一个可以处理的文件。

如果您希望获取位图数据并将其显示在画布上，可能会调查FileReader的使用。

http://www.html5rocks.com/en/tutorials/file/dndfiles/

使用按钮加载图像（Kkinetic）

1 个答案: