如何在jQuery simpleUpload上传成功后为文件输入框追加隐藏输入字段？

看起来你踩了个小坑——你现在是试图往自闭合的<input>标签内部追加元素，这肯定不会生效的，毕竟<input>没法容纳子元素。我来帮你调整代码解决这个问题：

先看你当前代码的问题所在：

$(obj).append('<input type="text" name="images[]" value="'+data.message+'">');

这里用append是把新元素塞到obj（也就是文件输入框）的内部，但<input>是自闭合标签，根本装不下子元素，所以这行代码不会产生任何效果。

正确的实现方式 #

你需要把隐藏字段加到文件输入框的外部，比如它的后面或者所在的父容器里，同时记得把type="text"改成type="hidden"（毕竟你要的是隐藏字段）。

方法1：直接加到文件输入框的后面（最常用）

$(document).on('change', '.upfile', function(){
    var obj = $(this);
    $(this).simpleUpload("/upload.php", {
        start: function(file){ console.log("upload started"); },
        progress: function(progress){ console.log("upload progress: " + Math.round(progress) + "%"); },
        success: function(data){
            // 用after方法把隐藏字段加到当前文件输入框的后面
            obj.after('<input type="hidden" name="images[]" value="'+data.message+'">');
            console.log("上传成功，已添加隐藏字段");
        },
        error: function(error){
            console.log("上传出错: " + error.message);
        }
    });
});

方法2：加到父容器.form-group里

如果你想把隐藏字段和文件输入框放在同一个父容器里，也可以这样写：

success: function(data){
    // 找到当前输入框的.form-group父容器，追加隐藏字段
    obj.closest('.form-group').append('<input type="hidden" name="images[]" value="'+data.message+'">');
}

更安全的写法（避免XSS和语法错误） #

如果data.message里包含特殊字符（比如引号、HTML标签），直接拼接HTML会导致语法错误或者XSS风险，建议用jQuery的元素创建方法：

success: function(data){
    var hiddenInput = $('<input>', {
        type: 'hidden',
        name: 'images[]',
        value: data.message
    });
    obj.after(hiddenInput);
}

这样就能顺利在上传成功后添加隐藏的输入字段啦！

备注：内容来源于stack exchange，提问作者William Cross