在客戶端，我需要保存圖像，用戶只能通過輸入（type = file）選擇文件。ASP.NET將圖像保存到SQL Server而不刷新頁面
文件上傳需要一個完整的回發。使用隱藏的iframe /表單進行回傳以將文件上傳到服務器。
下面是示例代碼。
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的形式js文件（https://github.com/garagesocial/ajax-form-js）
它是一個教程或示例代碼。我聽到這個解決方案，但無法找到完整的參考。 –
Okie，在一段時間內用示例代碼更新我的答案。 –
@MohammadAdibi：看看這個。 （我假設你正在使用MVC .net） –
使用回發更新面板內 請參閱此鏈接瞭解更多有關更新面板 http://msdn.microsoft.com/en-us/library/bb399001.aspx
你的問題到底是什麼？你有樣品代碼嗎？ – codemonkeh
請使用AsyncFileUpload進行嘗試。 http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/AsyncFileUpload/AsyncFileUpload.aspx –
使用Jquery Uploadify .................. –