Tôi đang gặp một số sự cố trong IE với việc tải tệp lên qua iFrame ẩn. Trên thực tế việc tải lên tệp đang hoạt động tốt nhưng mã jQuery của tôi để hiển thị hộp thoại thành công và thêm liên kết vào bảng không kích hoạt. Sử dụng các công cụ phát triển IE mà tôi đã phát hiện SCRIPT70: Cho phép thông báo lỗi bị từ chối. Điều này làm việc tốt trong Chrome vì vậy tôi đang thua lỗ với vấn đề trong IE. Tôi nên đề cập đến tôi đang sử dụng IE10 vì vậy tôi tưởng tượng vấn đề tồn tại trong các phiên bản trước của IE là tốt.SCRIPT70: Quyền bị từ chối Truy cập iFrame trong IE
Về cơ bản những gì tôi đang cố gắng làm là mô phỏng Ajax như tải lên tệp bằng iFrame ẩn vì chúng tôi phải hỗ trợ các trình duyệt cũ. Khi bài đăng iFrame thành công, câu trả lời của nó có một div chứa JSON mà tôi đọc rồi phân tích cú pháp. Dữ liệu từ JSON được sử dụng để hiển thị thông báo cho người dùng cũng cho biết trạng thái của tệp tải lên và thêm liên kết vào trang bằng cách thêm hàng vào bảng. Tuy nhiên trong IE chức năng chechUploadResponse thậm chí không xuất hiện để được bắn.
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();
}
Hidden 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>
Dưới đây là một phản ứng ví dụ từ iFrame ẩn sau khi được đăng tải
<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>
Hóa ra này có thể là một lỗi jQuery. Tôi đã nâng cấp từ jQuery-1.9.1 lên jQuery-1.10.2 và điều đó dường như giải quyết vấn đề cho tôi. Tôi thấy điều này được báo cáo trên trang web jQuery cho bất kỳ ai quan tâm. Hy vọng điều này sẽ giúp bất cứ ai có vấn đề tương tự. http://bugs.jquery.com/ticket/13936 – greyfox