Я сделал программу, которая может загружать изображение, просто нажав на само изображение с помощью «formData». Тем не менее, я действительно не знаю, что такое formData и возможность отправить вместе с ним какую-то строку. Я знаю, что обработчик generi c не принимает значения. Но почему-то я думаю, что смогу сделать это, если отправлю объект JSON, составленный из Dataform, и дополнительное строковое значение. Следующий код показывает успешный фрагмент кода загрузки изображения с использованием formData, и его необходимо обработать, просто добавив некоторые строковые значения.
HTML
<div>
<img id="img" style="width:300px;height:250px;" src="download.png" />
<input id="FileUp" hidden="hidden" type="file" /><br />
<span id="lblMessage" style="color: Green"></span>
</div>
JQuery
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var Image = $("#img");
var FileUpload = $("#FileUp");
var Label = $("#lblMessage");
Image.click(function () {
FileUpload.click().on("change", function () {
var ObjFile = this.files[0];
var reader = new FileReader(ObjFile);
reader.readAsDataURL(ObjFile);
reader.onload = function (e) {
Image.attr('src', e.target.result);
var formData = new FormData();
formData.append('file', ObjFile);
$.ajax({
url: 'Handler.ashx',
type: 'POST',
data: formData, // <-- here I would like to send string value alongside formData
cache: false,
contentType: false,
processData: false,
success: function (file) {
Label.html("<b>(" + file.name + ")</b> ... has been uploaded successfully.");
},
xhr: function () {
var fileXhr = $.ajaxSettings.xhr();
if (fileXhr.upload !== true) {
return fileXhr;
alert("Sorry, your file wasn't uploaded !!");
}
}
});
};
});
return false;
});
});
</script>
Обработчик ASHX
public void ProcessRequest(HttpContext context)
{
//Check if Request is to Upload the File.
if (context.Request.Files.Count > 0)
{
//Fetch the Uploaded File.
HttpPostedFile postedFile = context.Request.Files[0];
//Set the Folder Path.
string folderPath = context.Server.MapPath("~/Uploads/");
//Set the File Name.
string fileName = Path.GetFileName(postedFile.FileName);
//Save the File in Folder.
postedFile.SaveAs(folderPath + fileName);
//Send File details in a JSON Response.
string json = new JavaScriptSerializer().Serialize(
new
{
name = fileName
});
context.Response.StatusCode = (int)HttpStatusCode.OK;
context.Response.ContentType = "text/json";
context.Response.Write(json);
context.Response.End();
}
}