我制作了一个程序,只需使用“ formData”单击图像本身即可上传图像。但是,我真的不知道formData是什么,也不知道是否可以发送一些字符串。我知道处理程序泛型不接受值。但是以某种方式,如果我发送由Dataform和一个额外的字符串值组成的JSON对象,我可以做到这一点。以下代码显示了使用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();
}
}