Я хочу загрузить изображение с помощью ajax или jQuery без обновления страницы. У меня есть много изображений на моей веб-странице, и когда я нажму на любой из них, он появится в окне изображения. Пожалуйста, помогите мне в этой проблеме, я получаю много решений для простого скачивания кода, но мне это нужно.Загрузка изображения в ajax или JQuery
ответ
Вы не можете загружать файлы с помощью AJAX, но вы можете использовать , чтобы это выглядело, как будто это то, что вы делаете ...
Просто создайте с помощью простой формы внутри него (дон 't забудьте enctype="multipart/form-data"
) и используйте это для отображения ввода файла. Когда эта форма отправляется, будет перезагружен только iframe.
Я использую Asp.net возможно в asp.net –
Серверный технологии вы используете, не имеет значения. Вы можете использовать Flash или Java на стороне клиента ... – Greg
Если вы используете JQuery в вашем проекте вы не на самом деле нужно сделать вещь самостоятельно, есть много плагинов для него.
Uploadify IMO похоже лучший.
Я использую Asp.net, это возможно в asp.net –
Это не может быть сделано непосредственно с AJAX из-за secutiry причины, но я сделал то, что вы просите в форме Asp.Net, следуя указаниям в this excellent article (link)
HTML Оформить ASP загрузить Conrol, IFrame и кнопка стартует событие
<asp:FileUpload ID="PhotoUpload" runat="server" CssClass="width100pc" onchange="submitUpload('UploadFrame', 'PhotoJsonInfo')" />
<iframe src='../Public/blank.htm' name='UploadFrame' style="display:none"></iframe>
<input type="text" id="PhotoJsonInfo" runat="server" style="display:none;" />
Javascript
//Our function expects 2 parameters, the name of the disposable frame
//that we will use for the form post, as well as the id of the input control used to upload the file.
function submitUpload(frameName, uploadId)
{
document.forms[0].action = window.location;
//The magic line.. set the target of the form post to be our hidden IFrame
var defaultFrame = document.forms[0].target;
document.forms[0].target = frameName;
//We have to use a setTimeout here so that we can update the document in a separate thread
//otherwise the document wouldn't update until after the upload completed.
window.setTimeout(function()
{
var uploadControl = $get('<%= this.PhotoUpload.ClientID %>');
FacebookPreview.onImageUpdating(); //show animated loading gif
uploadControl.parentNode.replaceChild(uploadControl.cloneNode(true), uploadControl); // not sure this line is neccessary
}, 100);
//send request
document.forms[0].submit();
// reset postback
document.forms[0].target = defaultFrame;
}
CodeBehind
protected override void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
// This is only ever called via an IFrame
if (PhotoUpload.HasFile)
{
// do file saving logic here
string filePath = "..yourFullFilePathHere";
PhotoUpload.SaveAs(filePath);
string fileUrl = ... transform filePath to Url....
WebHelper.RegisterStartupScript(this, "FileUploaded", String.Format(@"window.parent.OnAfterUpload('{0}');", fileUrl));
}
}
}
Только для записи это не противоречит моему ответу - плагины используют
Я использую Asp.net, это возможно в asp. net –
О чем ты говоришь? Язык Server-Sive не имеет значения. Вы можете использовать ajax с каждым серверным языком – jitter