Javascript 在Html中，如何使用Ajax将本地文件传输到服务器

我有javascript代码，允许用户从另一个网页或其桌面拖放图像，以便显示在我的网页上，然后我有ajax代码（sendFormData（）），如果图像来自另一个网页，则可以将图像传输到服务器

我没有做的是将图像作为本地文件传输到服务器，我不知道怎么做，这是我的Javascript

基本上，我有一个e.dataTransfer.files[0]中的file对象，但如何在sendFormData（）方法中将其内容传输到服务器（顺便说一句，实际上已经没有表单了，不要让函数名误导您）

dropzone.ondragover
=函数ondragover（e）
{
e、 预防默认值（）；
dropzone.classList.add（'dragover'）；
};
dropzone.ondrop
=函数ondrop（e）
{
e、 预防默认值（）；
dropzone.classList.remove（'dragover'）；
//尝试从此dropevent获取图像
img=检索图像数据（例如数据传输）；
如果（！img）
{
回来
}
res.src=img.element.src；
};
dropzone.ondragexit
=函数（ondragexit）
{
dropzone.classList.remove（'dragover'）；
};
/**
从最新用户下拉列表中获取数据
*/
函数检索图像数据（数据传输）
{
//首先尝试获取文件
var img=getFile（数据传输）；
如果（img！=null）
{
返回img；
}
//如果没有，请尝试获取HTMLImage或SVGImage
var elems=getHTMLMarkup（数据传输）；
if（元素和元素长度）
{
返回元素[0]；
}
//我们也可以尝试获取数据（'text/plain'），希望得到一个url
//但这可能不是个好主意。。。
console.warn（'无法检索丢弃数据中的任何图像'）；
}
/**用户已经拖放了一个本地文件，如果他们尝试拖放多个文件，我们只需要第一个
*/
函数getFile（数据传输）
{
if（dataTransfer.files&&dataTransfer.files.length）
{
//只有图像文件
if（dataTransfer.files[0].type.indexOf（'image/'）==0）
{
imgObj=
{
键入：“文件”，
元素：新图像（），
文件：dataTransfer.files[0]
};
imgObj.element.src=URL.createObjectURL（imgObj.file）；
返回imgObj；
}
}
}
/**
从另一个网页拖动图像
注意不要试图重新格式化，似乎会破坏它
*/
函数getHTMLMarkup（dT）
{
var markup=dT.getData（'text/html'）；
如果（标记）
{
var doc=new DOMParser（）.parseFromString（标记“text/html”）；
var imgs=doc&&doc.queryselectoral（'img，image'）||[]；
imgs.forEach（toImageObject）；
返回Array.prototype.map.call（imgs，toImageObject）；
}
函数toImageObject（元素）{
var-img；
if（SVGImageElement的元素实例）{
img=新图像（）；
img.src=element.getAttributeNS（'http://www.w3.org/1999/xlink“，”href'）||
元素getAttribute（'href'）；
}否则{
img=文档.采用节点（元素）；
}
返回{
类型：'元素'，
元素：img
};
}
}
//一旦我们得到了一切，是时候找回我们的物品了
函数sendData（）
{
如果（img.type=='file'）
{
sendFormData（img.file）；
}
else if（img.type=='element'）
{
sendFormData（img.element.src）；
}
};
函数sendFormData（数据）
{
console.log（'Data'，Data）；
var xhr=new XMLHttpRequest（）；
xhr.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）
{
var check=document.getElementById（“ARTWORK_TABLE”）.querySelectorAll（“input[type='checkbox']”）
var images=document.getElementById（“ARTWORK_TABLE”）.getElementsByTagName（“img”）；
var imglabel=document.getElementById（“ARTWORK_TABLE”）.getElementsByClassName（“imglabel”）；
var hidden=document.getElementById（“ARTWORK_TABLE”）.querySelectorAll（“input[type='hidden']”）
如果（xhr.responseText.length>0）
{
var response=JSON.parse（xhr.responseText）；
对于（变量i=0；i

在if条件

if（img.type=='file'）

中更改函数

sendData（）

if(img.type == 'file'){  
    reader = new FileReader();  
    reader.addEventListener('load',function (){  
        sendFormData(reader.result);  
    }, false);  
    reader.readAsDataURL(img.file);  
}

c。在您的服务器代码中（顺便说一下.NET-c#）-ashx处理程序
查看此处的“处理丢弃的文件”部分：您能看看我的代码并告诉我如何修复它吗请，我是否可以发送数据而不必将其包装在FormData中发送更改函数sendData（）的内部条件如果（img.type='file'）。。，将文件读入变量var fr=new FileReader（）；fr.readAsText（e.dataTransfer.files[0]）；然后调用sendFormData（fr）；您还可以使用fr.readAsDataURL（）；FileReader是HTML5API，并非所有浏览器都支持。适用于最常见的浏览器chrome、firefox、edgeThankyou，我做了var reader=new FileReader（）；addEventListener（“加载”，函数（）{sendForm（reader.result）；}，false）；reader.readAsDataURL（img.file）；如果你能改正你的答案，我会把你的答案记为正确。
HttpPostedFile inputFile = HttpContext.Current.Request.Files["strinputfile"];
HttpPostedFile inputFile = HttpContext.Current.Request.Files["strinputfile"];