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

Question

我有 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);
}

Answer 1

将 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 处理程序

HttpPostedFile inputFile = HttpContext.Current.Request.Files["strinputfile"];