![](/img/trans.png)
[英]How do I transfer HTML script functions to an external JavaScript file?
[英]In Html How do I transfer local file to server with Ajax
我有javascript代码,允许用户从另一个网页或其桌面上拖放图像,以便在我的网页上显示,然后有一个ajax代码( sendFormData() ),可以将图像从另一个网页传输到服务器。
我还没有做的是将图像作为本地文件传输到服务器时,我不知道该怎么做,这是我的Javascript
基本上,我有一个来自e.dataTransfer.files [0]的文件对象,但是如何在sendFormData()方法中将其内容传输到服务器(顺便说一句,实际上不再存在一种形式,不要让函数名误导您)
dropzone.ondragover
= function ondragover(e)
{
e.preventDefault();
dropzone.classList.add('dragover');
};
dropzone.ondrop
= function ondrop(e)
{
e.preventDefault();
dropzone.classList.remove('dragover');
// try to get images from this dropevent
img = retrieveImageData(e.dataTransfer);
if (!img)
{
return;
}
res.src=img.element.src;
};
dropzone.ondragexit
= function(ondragexit)
{
dropzone.classList.remove('dragover');
};
/**
Get Data from latest user drop
*/
function retrieveImageData(dataTransfer)
{
// first try to get Files
var img = getFile(dataTransfer);
if (img!=null)
{
return img;
}
// if none, try to get HTMLImage or SVGImage
var elems = getHTMLMarkup(dataTransfer);
if (elems && elems.length)
{
return elems[0];
}
// we could also try to getData('text/plain') hoping for an url
// but this might not be such a good idea...
console.warn('unable to retrieve any image in dropped data');
}
/** User has drag/dropped a local file, if they try and drop more than one we just take the first one
*/
function getFile(dataTransfer)
{
if (dataTransfer.files && dataTransfer.files.length)
{
// only Image Files
if (dataTransfer.files[0].type.indexOf('image/') === 0)
{
imgObj =
{
type: 'file',
element: new Image(),
file: dataTransfer.files[0]
};
imgObj.element.src = URL.createObjectURL(imgObj.file);
return imgObj;
}
}
}
/**
Dragged an image from another webpage
NOTE DO NOT TRY TO REFORMAT SEEMS TO BREAK IT
*/
function getHTMLMarkup(dT)
{
var markup = dT.getData('text/html');
if (markup)
{
var doc = new DOMParser().parseFromString(markup, 'text/html');
var imgs = doc && doc.querySelectorAll('img,image') || [];
imgs.forEach(toImageObject);
return Array.prototype.map.call(imgs, toImageObject);
}
function toImageObject(element) {
var img;
if (element instanceof SVGImageElement) {
img = new Image();
img.src = element.getAttributeNS('http://www.w3.org/1999/xlink', 'href') ||
element.getAttribute('href');
} else {
img = document.adoptNode(element);
}
return {
type: 'element',
element: img
};
}
}
// Once we got everything, time to retrieve our objects
function sendData()
{
if(img.type == 'file')
{
sendFormData(img.file);
}
else if(img.type == 'element')
{
sendFormData(img.element.src);
}
};
function sendFormData(data)
{
console.log('Data', data);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
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']")
if(xhr.responseText.length > 0)
{
var response = JSON.parse(xhr.responseText);
for (var i = 0; i < check.length; i++)
{
if(check[i].checked==true)
{
images[i].src = "images/" + response.path + "_thumbnail.jpg";
images[i].title = response.dim;
imglabel[i].textContent = response.dim;
hidden[i].value = response.path;
}
}
}
}
};
xhr.open('POST', '/editsongs.update_artwork', true);
xhr.setRequestHeader("Content-type", "text/plain");
xhr.send(data);
}
如果条件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处理程序
HttpPostedFile inputFile = HttpContext.Current.Request.Files["strinputfile"];
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.