选择文件时，“文件上传”输入不会更新该值

Question

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

如何使“文件上传”输入更新为用户选择的值？

如果按钮是在页面加载时设置的，则可以正常工作，但是如果按钮是由Javascript生成的，则用户接受的要上传文件的选择将不被接受，并被置于VALUE =“”字段中（保持空白）。

我使用js小提琴重新创建了它： http : //jsfiddle.net/6fays32v/1/

的HTML

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

Java脚本

 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);

如果尝试选择一个文件，则会看到输入的VALUE =“”保持不变-这就是问题所在。

我究竟做错了什么？

提前致谢！

Answer 1

JavaScript不能更改“文件”类型的输入的值。 这是安全的事情。

否则，您可以做一些事情，例如在页面上运行各种隐藏的表单并通过Ajax上载文件，而无需用户知道。