Question

我有以下问题。我有2个JQuery函数。一个用于附加内容，另一个用于显示所选文件的名称。

功能1

<script> 
        jQuery( document ).ready(function( $ )
  {
   $("input[name=contribution_type]").on('change', function()
   {
    var value = this.value;

    $("#contribution").empty();

    if (value != 'none')
    {
        var div2 = 'content'
        $("#contribution").append(div2);
    }
   });

   });


       </script>

功能2

 <script type="text/javascript">
    $(document).ready(function(name){
        $('input[type="file"]').change(function(e){
            var fileName = e.target.files[0].name;
            alert('The file "' + fileName +  '" has been selected.');
        });
    });
</script>

var div2 ='content'这里是整个表单，但它太长了所以我没有包含它。

有关文件名的第二个函数如何在append（）中起作用的任何想法？

提前谢谢！

Answer 1

我已经创建了一个工作演示供您查看＆amp;在jsFiddle测试。

<强> HTML：

<html>
    <body>
    <input type="text" id="contribution_type" placeholder="Enter some text here..." />
    <div id="contribution">
        <button id="button1" disabled>Click me. This button will change into a form upload field.</button>
    </div>
    </body>
</html>

<强> jQuery的：

$('#contribution_type').on('keyup', function() {
    $('#button1').removeAttr('disabled');
});

$('#contribution_type').on('blur', function() {
    let value = this.value;

    $("#contribution").empty();
    if (value !== 'none') {
        let div2 = '<input type="file"><div id="contribution">Attach a file. Then press this button:<button>Test</button></div>';
        $('#contribution').append(div2);
    }

    $('input[type="file"]').on('blur',function(e){
        if (e && e.target && e.target.files && e.target.files[0] && e.target.files[0].name) {
            let fileName = e.target.files[0].name;
            let output = 'The file "' + fileName +  '" has been selected.';
            console.log(output);
            alert(output);
        }
    });
});

这是如何工作的：

change事件不适用于<input>个标签。它适用于<select>个元素。因此，必须将其切换为以下内容：blur，click，keyUp，keyDown，keyPress等等。
此属性已过时：type="text/javascript"。我们现在只使用<script>。
新的ES6更新允许我们使用let关键字替代var关键字。它修复了this和that的问题，以及它们对JavaScript块的影响范围......例如function () {...}或if (){...}块。
上传表单需要一些object detection，以便在弹出表单时不会抛出错误。这就是e && e.target行的全部内容。
严格相等的type checking运算符，例如：!==和===始终优先于松散的相等运算符，例如：!=和==。（原因是JS代码不必输入强制转换来查看整数1 ==字符串＆＃39; 1＆＃39;。这是真的，但是1 === '1'会是假的。）
您可以将$(document).ready替换为$().ready。有关该快捷方式，请参阅.ready上的jQuery API页面。

我输了console.log＆amp;一个alert()方法，以便您可以看到这两个示例。 console.log在循环中比警报更好。我不推荐100多个循环警报！ ; - ）

希望您能指出正确的方向让您的上传表单正常运行。祝你好运！

jQuery函数不适用于附加的html表单

1 个答案: