Question

当通过Ajax完成文件上传时，我在清除文件内容方面遇到了一些麻烦.Below是我的模态弹出式HTML代码，

            <div class="modal-header bg-blue">
                <div class="desktop_view">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title"id="myModalLabel">Upload Document</h4>
                </div>
                <div class="mobile_view">
                    <button type="button" class="btn btn-default btn-xs pull-right bold" data-dismiss="modal">Close</button>
                    <h4 class="modal-title"id="myModalLabel">Upload Document</h4>
                </div>

            </div>
            <div class="modal-body">
                <div class="upload-container">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="row">
                            <div class="form-group fileinput-button">
                                <label class="col-lg-6 col-md-6 col-sm-6 col-xs-12 control-label">Select Your Document:</label>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"><input type="file" multiple name="file[]" accept="image/*" id="files" ></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
                <div class="preview-container">
                    <div class="col-lg-12">
                        <div class="clearfix"></div>
                        <div id="dvPreview" class="preview-container"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">

                <input type="submit"  value="Upload"  class = "btn btn-info" id= "save" />
                <button type="button" class="btn btn-danger myclose" data-dismiss="modal">Close</button>
            </div>
        </form>

    </div>
</div>

提交表单后，之前的图片内容仍然存在。我尝试过以下方法。

$('#myModalone').find('form')[0].reset();

$(function () {
  // Delegating to `document` just in case.
  $(document).on("hidden.bs.modal", "#myModalone", function () {

       //$('.modal-body').find('input').val('');
        $(this).removeData('bs.modal');
  });
});

它不起作用。请提供解决方案。

Answer 1

为表单提供一个id并将表单重置函数调用为：

$("#formId")[0].reset()
// or
$("#formId").get(0).reset()

你也可以使用js作为：

document.getElementById('formId').reset();

要重置div：

$('#div_id input[type="text"]').val('');

$('#div_id input[type="file"]').val('');

在这里找到工作小提琴：

http://jsfiddle.net/Safoora/Car52/174/

在模态弹出窗口中上传文件后清除文件内容

1 个答案: