IEで非表示のiFrame経由でファイルをアップロードする際に問題が発生しています。実際にはファイルのアップロードはうまくいきますが、成功ダイアログを表示してテーブルへのリンクを追加するjQueryコードは起動しません。 IEの開発者ツールを使用して、私はSCRIPT70:Permission deniedエラーメッセージを発見しました。これはChromeで正常に動作しているため、IEの問題を紛失しています。私はIE10を使用していることを言及する必要がありますので、IEの以前のバージョンにも問題が存在すると思います。SCRIPT70:IEでiFrameへのアクセスが拒否されました
私がやろうとしているのは、従来のブラウザをサポートする必要があるため、非公開のiFrameを使用してファイルをアップロードするようなAjaxをシミュレートすることです。 iFrameが正常にポストするとJSONが含まれているdivがあり、それを解析して解析します。 JSONからのデータを使用して、ファイルアップロードのステータスを示すメッセージをユーザに表示し、テーブルに行を追加してリンクをページに追加します。しかし、IEでは、chechUploadResponse関数は起動していないようです。
Javascriptを:
$(document).ready(function()
{
$('#btnPrint').click(openPrintTimesheetWindow);
$('#date').change(postback);
$('#employee').change(postback);
$('#client').change(postback);
$('#btnUpload').click(uploadFile);
$("#uploadFrame").on("load", function() {
$('#uploadFrame').contents().find('#userFile').change(uploadFileChanged);
checkUploadResponse();
});
});
function postback()
{
$('#timesheetPrintFilter').submit();
}
function uploadFileChanged()
{
$('#ajaxBusy').show();
$('#uploadFrame').contents().find('#uploadForm').submit();
}
function uploadFile()
{
var employeeId = $('#init_employee').val();
var periodDate = $('#init_periodEndDate').val();
$('#uploadFrame').contents().find('#employeeId').val(employeeId);
$('#uploadFrame').contents().find('#periodEndDate').val(periodDate);
$('#uploadFrame').contents().find('#userFile').click();
}
function checkUploadResponse()
{
var response = $('#uploadFrame').contents().find('#uploadResponse').text();
if (response != null && response != '')
{
var response = jQuery.parseJSON(response);
if (response.status == "ERROR")
{
$("#dialog").html(response.message);
$("#dialog").dialog({ buttons: { "OK": function() { $(this).dialog("close");}}, title: "Error" });
}
else
{
$("#dialog").html(response.message);
$("#dialog").dialog({ buttons: { "OK": function() { $(this).dialog("close");}}, title: "Success" });
var url = response.url;
var tsaid = response.tsaid;
var name = response.name;
var row = '<tr id="tsaid-' + tsaid + '">' +
'<td width="80%" valign="top" align="left">' +
'<a href="' + url + '">' + name + '</a>' +
'</td>' +
'</tr>';
$("#tsAttachment").append(row);
}
}
$('#ajaxBusy').hide();
}
非表示のiframe:ここ
<form id="uploadForm" name="uploadForm" action="timesheet-upload.php" method="POST" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="3145728" />
<input type="hidden" name="employeeId" id="employeeId" value="" />
<input type="hidden" name="periodEndDate" id="periodEndDate" value="" />
<input type="file" name="userFile" id="userFile" />
</form>
が、私はこの記事が少し古いです知っ
<div id="uploadResponse">{"status":"SUCCESS","message":"Timesheet successfully uploaded","url":"uploads\/2013\/Aug\/1-49cd1c0217abf676505b349ec88bb5a42b1d5631e41232f08be3b0dced9f65e2.pdf","name":"How To Write A Cover Letter.pdf","tsaid":15}</div>
<form id="uploadForm" name="uploadForm" action="timesheet-upload.php" method="POST" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="3145728" />
<input type="hidden" name="employeeId" id="employeeId" value="" />
<input type="hidden" name="periodEndDate" id="periodEndDate" value="" />
<input type="file" name="userFile" id="userFile" />
</form>
これはjQueryのバグであったかもしれません。私はjQuery-1.9.1からjQuery-1.10.2にアップグレードしました。それは私の問題を解決するようでした。興味のある人のためにjQueryのウェブサイトでこれが報告されています。これが似たような問題を抱えている人を助けることを望みます。 http://bugs.jquery.com/ticket/13936 – greyfox