1
我的標記寫法如下。更多關注uploadBtn按鈕的點擊處理程序。寫入iframe會導致瀏覽器使用不同的url重新加載
<!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>
只要下面一行執行，我瀏覽器中的url就會附加?delimiter=comma。
doc.body.appendChild(frm);
我預計這不會重新加載。那麼我該怎麼做才能讓它重新加載呢？