0

我试图在“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>`
4

1 回答 1

0

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

如果您希望获取位图数据并将其显示在画布上，或许可以研究使用 FileReader。

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

于 2013-06-25T14:51:13.983 回答