my dialog does not popup after successfull upload? the upload开发者_运维百科 works fine but $("#dialog-confirm").dialog does not work?
<h2>
upload Data</h2>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="../../Scripts/jqueryform.js" type="text/javascript"></script>
<script src="../../Scripts/jblock.js" type="text/javascript"></script>
<script src="../../Content/jquery-ui-1.8.12.custom/js/jquery-ui-1.8.12.custom.min.js"
type="text/javascript"></script>
<link href="../../Content/jquery-ui-1.8.12.custom/css/ui-lightness/jquery-ui-1.8.12.custom.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#ajaxUploadForm").ajaxForm({
iframe: true,
dataType: "json",
beforeSubmit: function () {
$("#ajaxUploadForm").block({ message: '<h1><img src="/Content/busy.gif" /> uploading file...</h1>' });
},
success: function (result) {
$("#ajaxUploadForm").unblock();
$("#ajaxUploadForm").resetForm();
$.growlUI(null, result.message);
//alert(result.message);
//does not popup??
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
"Ok":
function () {
alert('ok');
$(this).dialog("close");
}
,
Cancel: function () {
$(this).dialog("close");
}
}
});
},
error: function (xhr, textStatus, errorThrown) {
$("#ajaxUploadForm").unblock();
$("#ajaxUploadForm").resetForm();
$.growlUI(null, 'Error uploading file');
}
});
});
</script>
<form id="ajaxUploadForm" action="<%= Url.Action("AjaxUpload", "Home")%>" method="post" enctype="multipart/form-data">
<fieldset>
<legend>Upload a file</legend>
<label>
File to upload:
<input type="file" name="file" />(100MB max size)</label>
<input id="ajaxUploadButton" type="submit" value="Submit" />
</fieldset>
</form>
public FileUploadJsonResult AjaxUpload(HttpPostedFileBase file)
{
// TODO: Add your business logic here and/or save the file
System.Threading.Thread.Sleep(2000); // Simulate a long running upload
// Return JSON
return new FileUploadJsonResult { Data = new { message = string.Format("{0} uploaded successfully.", System.IO.Path.GetFileName(file.FileName)) } };
}
I see that you are using the jquery.form plugin for AJAXifying the form and returning JSON from your controller action. Here's what the documentation says about this scenario:
Since it is not possible to upload files using the browser's XMLHttpRequest object, the Form Plugin uses a hidden iframe element to help with the task. This is a common technique, but it has inherent limitations. The iframe element is used as the target of the form's submit operation which means that the server response is written to the iframe. This is fine if the response type is HTML or XML, but doesn't work as well if the response type is script or JSON, both of which often contain characters that need to be repesented using entity references when found in HTML markup.
To account for the challenges of script and JSON responses, the Form Plugin allows these responses to be embedded in a textarea element and it is recommended that you do so for these response types when used in conjuction with file uploads.
So for this to work the response from the server needs to look like this:
<textarea>{ message: 'file uploaded successfully' }</textarea>
Is it what this custom FileUploadJsonResult
is doing in your controller action?
精彩评论