ارسال عکس به همراه چند مشخه دیگه به سرور

[Boy_nn]

سلام می خواستم یه عکس رو به همراه چند مشخصه دیگه به سرور بفرستم ولی موفق نشدم
فقط قصدم آپلود کردن به عکس نیست بلکه می خوام هم زمان چند مشخه دیگه هم ارسال بشه
تونستم فقط یک عکس آپلود کنم

[Amir Oveisi]

کد View و Action اتون رو قرار بدید

[SVSRGroup]

من این کدها رو برای ارسال پارامترهای جانبی کنار فایل نوشتم که می تونی به راحنی استفاده کنی...
سوالی داشتی بپرس..

کد سمت کنترلر:
[HttpPost]
public ActionResult Upload()
{
// داده های شما داخل این مدل ریخته میشه
// فقط باید یک viewModel براش تعریف کنید تا بهتر بتونید مدیریت کنید
var viewModel = JsonConvert.DeserializeObject<myViewModel>(Request.Params["data"]);

foreach (string file in Request.Files)
{
var hpf = Request.Files[file] as HttpPostedFileBase;
if (hpf.ContentLength == 0)
continue;
string savedFileName = Path.Combine(Server.MapPath("~/App_Data/Uploads/"), Path.GetFileName(hpf.FileName));
if (!Directory.Exists(Server.MapPath("~/App_Data/Uploads/")))
{
Directory.CreateDirectory(Server.MapPath("~/App_Data/Uploads/"));
}
hpf.SaveAs(savedFileName);
}
return Content(Request.Params["data"].ToString());
}

کد جاوا اسکریپت سمت کلاینت:

///////////////////////////
////#### Upload file with extra JSON data by Artem co.
////#### 2014/01/04 03:05 PM
{
artem.uploader = {};
artem.uploader.upload = function (url, inputElementId, jsonData, completeHandler, progressElement) {
var file = document.getElementById(inputElementId).files[0];
var fd = new FormData();
fd.append("fileData", file);
fd.append("data", JSON.stringify(jsonData));
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", function (evt) { artem.uploader.uploadProgress(evt, progressElement); }, false);
xhr.addEventListener("load", function (evt) { artem.uploader.uploadComplete(evt, completeHandler); }, false);
xhr.addEventListener("error", function (evt) { artem.uploader.uploadFailed(evt); }, false);
xhr.addEventListener("abort", function (evt) { artem.uploader.uploadCanceled(evt); }, false);
xhr.open("POST", url, true);
xhr.send(fd);
}
artem.uploader.uploadProgress = function (evt, progressElement) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
if (progressElement != undefined) {

} $(progressElement).text(percentComplete + "% ");

}
}
artem.uploader.uploadComplete = function (evt, completeHandler) {
if (evt.target.status == 200) {
if ($.isFunction(completeHandler))
completeHandler(evt.target.response);
}
else {
alert( "Error Uploading File");
}
}
artem.uploader.uploadFailed = function (evt) {
alert("There was an error attempting to upload the file.");
}
artem.uploader.uploadCanceled = function (evt) {
alert("The upload has been canceled by the user or the browser dropped the connection.");
}}

-------
کد HTML

<input type="file" name="zxc" id="myImage">
--
حالا فقط کافیه کد زیر رو به دکمه ی ارسال توسط جی کوئری وصل کنی:
$(".buttom").click(function(){
var extradata = { param1:'artem',param2:'good-luck' };
artem.uploader.upload('/myController/Upload', 'myImage', extradata, completeHandler );
});
var completeHandler = function (data) {
alert('custom Complete Code');
}

[hakim22]

به این مقاله مراجعه کنید

http://barnamenevis.org/showthread.php?420749-%D8%A2%D9%BE%D9%84%D9%88%D8%AF-%D9%81%D8%A7%DB%8C%D9%84-%D8%AF%D8%B1-%D8%A8%D8%A7-Ajax-%D8%AF%D8%B1-ASP.MVC3-%E2%80%93-%D9%86%D8%B3%D8%AE%D9%87-3