Question

我正在制作一个上传页面，你可以通过将文件放到某个区域上来上传文件，也可以点击图片并选择一个文件。＆＃xA;效果很好，但现在我想实现一个进度条，所以我必须在chooseFile按钮的onChange-Event中调用一个js-function：

＆＃xA;＆＃xA;

 ＆lt; img src =“images / cloud .png“id =”uploadCloud“class =”uploadImage“alt =”Dateien durchsuchen“/＆gt;＆＃xA; ＆lt; form action =“upload.php”method =“post”enctype =“multipart / form-data”＆gt;＆＃xA; ＆lt; input type =“file”id =“datei”name =“datei”onChange =“javascript：upload（）”hidden /＆gt;＆＃xA; ＆lt; / form＆gt;＆＃xA;

＆＃xA;＆＃xA;

这些是我的脚本：

＆＃xA;＆＃xA;

 ＆LT;脚本＆GT;＆＃XA; function upload（）＆＃xA; {＆＃XA; //做上传文件的内容（已经实现）＆＃xA; }＆＃XA;＆LT; /脚本＆GT;＆＃XA;＆LT;脚本＆GT;＆＃XA; $（document）.ready（function（e）＆＃xA; {＆＃xA; $（“＃uploadCloud”）。click（function（）＆＃xA; {＆＃xA; $（“＃datei”）。触发（'click'）;＆＃xA;}）;＆＃xA;}）; ＆＃xA;＆lt; / script＆gt;＆＃xA;

＆＃xA;＆＃xA;

测试代码时，控制台抛出 ReferenceError：未定义上传< / code>

＆＃xA;＆＃xA; 我看不出我的不同之处： http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onchange  
＆＃xA;＆＃xA; 什么有我做错了调用 upload（）函数？＆＃xA;

Answer 1

我没有明白 javascript：onchange（）; 以及隐藏这个词......

<img src="images/cloud.png" id="uploadCloud" class="uploadImage" alt="Dateien durchsuchen"/>
<form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" id="datei" name="datei" onchange="upload()" />
</form>

Answer 2

您应该只输入onChange="upload()"而不是onChange="javascript:upload()"，但更好的不引人注目的方式是

<head>
<script>

    upload = function() {

    }

    $(document).ready(function(e) {
        $("#datei").change(upload);
        $("#uploadCloud").click(function()
        {
            $("#datei").trigger('click');
        });
    }); 

</script>
</head>
<body>

    <img src="images/cloud.png" id="uploadCloud" class="uploadImage" alt="Dateien durchsuchen"/>
    <form action="upload.php" method="post" enctype="multipart/form-data">
        <input type="file" id="datei" name="datei" />
    </form> 

</body>

<input type =“file”/> onChange调用js out mutliple <script> -Tags

2 个答案: