Question

我的标记写如下。请更多关注uploadBtn按钮的点击处理程序。

<!DOCTYPE html>
<html>
  <head>
    <title>Cleansing Workbench</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>



<div class="container">
    <h1>Cleansing Workbench</h1>
    <h3>Upload File</h3>
    <form class="form-inline well">
        <label class="span3">Enter the file to upload</label><button id="uploadBtn" class="btn btn-default">...</button><label id="filename"></label>
        <br />
        <label class="span3">Enter Delimiter</label>
        <select name="delimiter" id="delimiter">
            <option value="comma">Comma</option>
            <option value="tab">Tab</option>
            <option value="pipe">Pipe</option>
            <option value="other">Other</option>
        </select>
        <label>Specify Delimiter</label>
        <input type="text" name="otherDelimiter" id="txtdelimiter" value="Comma (,)" />
        <br />
        <br />
        <div class="text-right">
            <input type="submit" class="btn btn-primary" value="Upload" />
        </div>

    </form>
    <iframe name="upload" id="upload" src="about:blank" style="display:none"></iframe>
</div>


    <script src="Scripts/jquery-1.7.1.min.js"></script>
    <script src="Scripts/bootstrap/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        (function ($) {
            $.fn.toggleDisabled = function () {
                return this.each(function () {
                    var $this = $(this);
                    if ($this.attr('disabled')) $this.removeAttr('disabled');
                    else $this.attr('disabled', 'disabled');
                });
            };
        })(jQuery);

        $(function () {
            var arrDelimiterEnums = ['Comma (,)',
                'Tab Separated ( \\t )',
                'Pipe ( | )'];

            $txt = $('#txtdelimiter').toggleDisabled();

            $('#delimiter').change(function () {
                var obj = this;
                var indx = obj.selectedIndex;
                var val = obj.options[indx].value;
                if (val == 'other') {
                    $txt.val('').toggleDisabled();
                }
                else {
                    if (!$txt.attr('disabled'))
                        $txt.toggleDisabled();
                    $txt.val(arrDelimiterEnums[indx]);
                }
            });
            $('#upload').load(function () {                

            });

            $('#uploadBtn').click(function () {
                var ifr = document.getElementById('upload');
                var doc = ifr.contentWindow.document;
                if (doc.getElementById('uploader') == null) {
                    var frm = document.createElement('form');
                    frm.action = "fileupload.ashx";
                    frm.method = "post";
                    frm.id = 'uploader';

                    var inp = document.createElement('input');
                    inp.type = "file";
                    inp.name = 'uploadFile';
                    inp.id = 'uploadbtn';
                    var i = $(inp).click(function () {
                        console.log('hello');
                        console.log(this.value);
                    });
                    frm.appendChild(inp);
                    doc.body.appendChild(frm);
                    //i.trigger('click', null);
                }
                else {
                    var btn = doc.getElementById('uploadbtn');
                    $(btn).trigger('click', null);
                }                
            });
        });
    </script>

  </body>
</html>

执行以下行后，浏览器中的网址会附加?delimiter=comma。

doc.body.appendChild(frm);

我预计这不会重新加载。那么我该怎么办才能让它重装？

Answer 1

从<form class="form-inline well">＆amp;表格中取出您的输入只需使用jQuery或vanilla javascript操作它们。

当按钮处于表单中时，它们会自动“提交”/刷新页面。

写入iframe会导致浏览器使用不同的URL重新加载

1 个答案: