クライアント側では、画像を保存する必要があり、ユーザーは入力 (タイプ = ファイル) でファイルのみを選択します。
更新パネル内でポスト バックを使用します。更新パネルの詳細については、このリンクを参照して ください http://msdn.microsoft.com/en-us/library/bb399001.aspx
ファイルのアップロードには完全なポストバックが必要です。非表示の iframe/form を使用してポストバックを実行し、ファイルをサーバーにアップロードします。
以下はサンプルコードです。
HTML
<input type="file" size="15" name="file" onchange="UploadPicture(this, 'user-picture-form');" class="upload-new-avatar"/>
<img id="Myimg" src="" />
JavaScript
function UploadPicture(sender, form) {
var newForm = $("<FORM>");
newForm.attr({ method: "POST", enctype: "multipart/form-data" }).hide();
newForm.appendTo($("body"));
var $this = $(sender), $clone = $this.clone();
$this.after($clone).appendTo($(newForm));
AjaxFormSubmit({
type: "POST",
validate: false,
parentControl: $(newForm),
form: $(newForm),
messageControl: null,
throbberPosition: { my: "left center", at: "right center", of: sender, offset: "5 0" },
url: '/Home/UploadPicture',
success: function (data) {
if (data.Status == ActionStatus.Successfull) {
if (data.Results == null || data.Results == 'null') {
//Message(data.Message, ActionStatus.Error);
}
else {
$("#Myimg").attr("src", "/Images/" + data.Results[0]);
}
}
else {
//Message(data.Message, ActionStatus.Error);
}
}
});
}
function AjaxFormSubmit(parameters) {
/*=====================================Sample Usage======================================================
AjaxFormSubmit({
type: "POST", //default is "POST"
validate: true, //if the form/data needs to be validated
validationError: function () { }, //called only if validate is true
parentControl: $(selector), //required if validate is true
error: function () { }, //called when an unexpected error occurs
form: $(selector), //neglected if data is not null
data: {name: "value"} //overwrites the form parameter
messageControl: $(selector), //the control where the status message needs to be displayed
beforeSubmit: function (arr, $form, options) { }, //called before the form is actually submitted
throbberPosition: { my: "left center", at: "right center", of: sender, offset: "5 0" }, //the position at which the throbber needs to be displayed
url: url, //the url that needs to be hit
success: function (data) {}, //called after the request has been executed without any unhandeled exception
bar: $('.bar'), //var bar = $('.bar');
percent: $('.percent'), //var percent = $('.percent');
status: $('#status') //var status = $('#status');
});
===============================================================================================*/
if (parameters.validate == true) {
if (ValidateControls($(parameters.messageControl), $(parameters.parentControl)) == false) {
if (parameters.validationError) parameters.validationError();
return false;
}
}
if (parameters.data == undefined) {
$(parameters.form).ajaxForm({
url: parameters.url,
dataType: $.browser.msie ? "json" : undefined,
type: parameters.type == undefined ? "POST" : parameters.type,
error: function () {
RemoveThrobber();
Message("Unexpected Error", ActionStatus.Error);
if (parameters.error != undefined) parameters.error();
},
beforeSubmit: function (arr, form, options) {
arr = NeglectWaterMark(arr, form);
if (parameters.beforeSubmit) parameters.beforeSubmit(arr, form, options);
},
beforeSend: function () {
if (parameters.status != null && parameters.status != undefined) {
parameters.status.empty();
var percentVal = '0%';
parameters.bar.width(percentVal)
parameters.percent.html(percentVal);
}
},
uploadProgress: function (event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
parameters.bar.width(percentVal)
parameters.percent.html(percentVal);
},
success: function (data) {
//RemoveThrobber();
if (data.Status == undefined) {
Message('Invalid data returned in the response', ActionStatus.Error);
return false;
}
else if (parameters.bar!=null) {
var percentVal = '100%';
parameters.bar.width(percentVal)
parameters.percent.html(percentVal);
parameters.success(data);
}
else{
parameters.success(data);
}
},
complete: function (xhr) {
}
}).submit();
}
else {
$.ajax({
url: parameters.url,
type: parameters.type == undefined ? "POST" : parameters.type,
error: function (a, b, c) {
RemoveThrobber();
Message($(parameters.messageControl), "Unexpected Error", ActionStatus.Error);
if (parameters.error != undefined) parameters.error();
},
async: true,
data: parameters.data,
success: function (data) {
RemoveThrobber();
if (data.Status == undefined) {
Message($(parameters.messageControl), "Invalid data returned in the response", ActionStatus.Error);
return false;
}
else {
parameters.success(data);
}
},
error: function (obj) {
Message(data.Message, ActionStatus.Error);
}
});
}
}
コントローラ
public JsonResult UploadPicture(HttpPostedFileBase file)
{
string newFilename = Guid.NewGuid().ToString() + "." + file.FileName.Substring(file.FileName.LastIndexOf(".") + 1);
string fileExt = System.IO.Path.GetExtension(file.FileName).ToLower();
ActionOutput result;
if (fileExt == ".jpeg" || fileExt == ".jpg" || fileExt == ".gif" || fileExt == ".bmp" || fileExt == ".png")
{
System.Drawing.Bitmap bitmap = new System.Drawing.Bitmap(file.InputStream);
if (bitmap.Height > 600 || bitmap.Height < 200)
{
if ((Request.Browser).Browser == "IE")
return Json(new ActionOutput { Status = ActionStatus.Error, Message = "Image must be between 200x200 to 600x600 pixel." }, "text/plain", JsonRequestBehavior.AllowGet);
else
return Json(new ActionOutput { Status = ActionStatus.Error, Message = "Image must be between 200x200 to 600x600 pixel." }, JsonRequestBehavior.AllowGet);
}
// Saving Image to Folder
string folder = Server.MapPath("~/Images/");
if (!System.IO.Directory.Exists(folder))
System.IO.Directory.CreateDirectory(folder);
file.SaveAs(folder + newFilename);
result = new ActionOutput { Status = ActionStatus.Successfull, Results = new List<string> { newFilename } };
}
else
{
result = new ActionOutput { Status = ActionStatus.Error, Message = "Invalid file, valid file are *.jpg, *.jpeg, *.gif, *.bmp, *.png" };
}
if ((Request.Browser).Browser == "IE")
return Json(result, "text/plain", JsonRequestBehavior.AllowGet);
else
return Json(result, JsonRequestBehavior.AllowGet);
}
共通出力クラス
public class ActionOutput
{
public ActionStatus Status { get; set; }
public String Message { get; set; }
public List<String> Results { get; set; }
}
Ajax-Form js ファイルを含めることを忘れないでください ( https://github.com/garagesocial/ajax-form-js )