Хорошо, это будет долго. Как уже упоминалось - вы не можете напрямую загружать через AJAX, но вы наверняка можете подделать поведение, отправив сообщение на скрытый iFrame.
Для целей этой демонстрации я бы пошел с плагином jQuery blockUI для модального ... компонент загрузки файла на самом деле не имеет значения. Основной процесс:
- Откройте модальное окно и представьте обычный диалог загрузки
- Выберите скрытый iFrame с помощью поста формы. Отключить возможность закрыть модал.
- Когда загрузка будет завершена (в конце сценария), перезапустите тег, который вызывает функцию в родительском фрейме.
- Функция в родительском фрейме берет URL нового изображения и выполняет .append () к телу модального окна и повторно включает возможность закрыть модальное.
Хотя это не законченное приложение, оно должно дать вам необходимую основу. Если вам нужно что-то на 100% ... ну, это заняло бы у меня больше времени, чем у меня в данный момент, так как я просто адаптирую часть моего существующего кода к вашему qasting.
Часть сообщения модального сообщения (включая iFrame):
<div id="UploadDrivers">
<a href="#" onclick="$('#UploadForm').toggle();return false;" title="Upload New Image">
<img src="/upload.gif" title="Upload New Image" />Upload New Image</a>
<div id="UploadForm" style="display:none;text-align:right;">
<form method="post" enctype="multipart/form-data" style="display:inline;"
action="/uploadLogic.aspx" target="FileUpload"
onsubmit="$('#UploadDrivers').hide(); $('#UploadStatus').show();">
<input type="hidden" name="CALLBACK" value="uploadCallback" />
<input type="file" name="FILE_NAME" />
<input type="submit" value="Upload Image"
onclick="return $('input[name=FILE_NAME]', '#UploadForm').val() != '';"/>
</form>
</div>
<iframe id="FileUpload" name="FileUpload" src="javascript:false;" style="width:1px;height:1px;border:none;"></iframe>
</div>
<div style="text-align:center;display:none;" id="UploadStatus">
Uploading file.... <img src="busy.gif" title="Uploading..." />
</div>
</div>
Ваша страница загрузки (в данном случае uploadLogic.aspx):
\\Whatever logic you need for your situation to upload a file goes here
script language="javascript" type="text/javascript">
function init(){
var bError = ; //boolean from the upload
var fileGuid = ""; //guid of file on server
var msg = ""; //message to display on callback
var fileName = "" //for friendly display of original name
if(top.) {
top.(bError, guid, filename, msg)
//callback function passed to this page to allow it to be more 'universal'
}
}
/script>
И последнее, но не менее важное ... на главной странице есть ссылка для показа модального режима и такая функция, как
function uploadCallback(error, guid, filename, message) {
if(error) { alert("There was an error uploading the file:\r\n\r\n" + message); return; }
$("#UploadDrivers").append(");
//do whatever else
}
... это важные биты - вы, возможно, захотите что-то сделать с расширением файла или более прохладным пользовательским интерфейсом, но это основы того, как это можно сделать с помощью JS.