Javascript 选择文件时，文件上载输入不会更新该值

我正在使用Javascript动态添加楼层平面，用户可以在其中添加图像并将其附加到酒店楼层

如何使文件上载输入将其值更新为用户选择的值

如果在页面加载上设置了该按钮，则该按钮可以正常工作，但如果它是由Javascript生成的，则用户选择的要上载的文件将不被接受，并放入VALUE=字段中，该字段将保持为空

我使用js fiddle重新创建了它：

HTML

Javascript

如果您尝试选择一个文件，您将看到输入的值=保持不变-这就是问题所在

我做错了什么

---

提前谢谢

JavaScript无法更改file类型输入的值。这是安全问题

---

否则，您可以在页面上运行各种隐藏表单，并在用户不知道的情况下通过Ajax上传文件。

我不想改变值，而是将整个标签放在页面上，供用户选择文件。尝试填充值=通过从系统中选择一个文件，您将看到它不是正常行为。我看不到，我看到了我期望的正常行为–选择一个文件后，输入字段将显示其在本地驱动器上的路径。您没有做错任何事，这就是它的工作方式。如果要读取当前值，请使用javascript。

<div id="floor_plans_container">
    <div id="unassigned">
        Test
    </div>
</div>

 var floor_number = $('h2').length;

    var html = '<div id="0" class="plan_page">' + 
'           <h2 class="closeable">Floor Plan '+floor_number+'<span class="rooms_count">    </span></h2>' +
'           <div class="plan_wrapper form_section">' +
'               <div class="plan_form">' +
'                       <form target="iframe_0" enctype="multipart/form-data" method="post" action="" id="form_0" name="form_0">' +
'                           <input type="hidden" value="0" id="0" name="plan_id">' +
'                           <input type="hidden" value="" id="room_ids_db_0" name="room_ids_db">' +
'                           <div id="buttons_wrapper_plan">' +
'                               <button class="save_changes" name="plan_save" type="submit">Save</button>' +
'                                   <a href="#" class="delete"></a>' +
'                                </div>' +
'                           <table border="0" cellspacing="0" cellpadding="0" class="floor_plan">' +
'                               <tbody><tr>' +
'                                   <td>' +
'                                       <label for="name">Floor Plan Name</label>' +
'                                   </td>' +
'                                   <td>' +
'                                       <input type="text" value="Floor Plan 1" id="name" name="name">' +
'                                   </td>' +
'                               </tr>' +
'                               <tr>' +
'                                   <td>' +
'                                       <label for="file">Background Image</label>' +
'                                   </td>' +
'                                   <td>' +
'                                       <input type="file" value="" class="file_upload" name="file_upload"> &nbsp;' +
'                                       <iframe onload="" src="" id="iframe_0" name="iframe_0" class="iframe"></iframe>' +
'                                   </td>' +
'                               </tr>' +
'                               <tr>' +
'                                   <td>' +
'                                       <label for="room_size">Room Size</label>' +
'                                   </td>' +
'                                   <td>' +
'                                       <div class="room_size on"></div>' +
'                                       <input type="hidden" value="1" class="room_size_large" name="room_size_large">' +
'                                </td>' +
'                            </tr>' +
'                        </tbody></table>' +
'                    </form>' +
'                   </div>' +
'                       <div>' +
'                   <div style="" class="plan image small">' +
'                  </div>' +
'               </div>' +
'              </div>' +
'       </div>';


    $("#floor_plans_container #unassigned").html(html);