Javascript 如何将表单中的图像文件添加到jQueryAjax请求中

我正在使用jQuery文件上载帮助程序，我需要了解如何将表单中的文件或表单数据作为一个整体附加到请求中

我已经使用ASP.NET代码从请求中接受图像并处理进一步的代码，但是当我尝试使用jQuery

$.ajax（）

使用它时，我无法让它工作

我已经解决了堆栈溢出问题，并且尝试使用

FormData

从

input[type=“file”]

（文件元素的输入）追加数据。但是每次（在服务器上）执行的块都告诉我没有包含请求的文件

这是ASP.NET代码（上载文件页）

jQuery代码如下所示

$(document).ready(function () {
    $('form input[type=submit]').click(function () {
        event.preventDefault();

        $.ajax({
            url: '/UploadFile',
            data: new FormData().append('file',
                  document.getElementById("image").files[0]),
            type: 'POST',
            success: function (data) {
                $('#result').html('Image uploaded was: ' + data);
            }
        });
    });
});

我已经抓狂了，因为我无法在服务器端获取文件内容

---

我怎样才能将文件发送到服务器，或者将整个表单数据发送到服务器，任何事情都是受欢迎的

尝试为此使用处理程序，并为此使用Newtonsoft.json.dll。 对于jQuery

(document).ready(function () {
$('form input[type=submit]').click(function () {
    event.preventDefault();

    $.ajax({
        url: 'handler.ashx', // put a handler instead of direct path
        data: new FormData().append('file',
              document.getElementById("image").files[0]),
        type: 'POST',
        success: function (data) {
            $('#result').html('Image uploaded was: ' + data);
        }
    });
});
});

在asp.net中

using System;
using System.Collections;
using System.Collections.Generic;
using System.Data;
using System.Diagnostics;
using System.Web;
using Newtonsoft.Json;


public class Handler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
    HttpPostedFile up = context.Request.Files[0];
    System.IO.FileInfo upinfo = new System.IO.FileInfo(up.FileName);

        System.Drawing.Image upimg = System.Drawing.Image.FromStream(up.InputStream);
        string path = context.Server.MapPath("~/temp"); // this is the server path   where you'll be saving your image
    if (!System.IO.Directory.Exists(path))
            System.IO.Directory.CreateDirectory(path);

        string fileName;
        fileName = up.FileName;
        string newFilename = Guid.NewGuid().ToString();
        System.IO.FileInfo fInfo = new System.IO.FileInfo(fileName);
        newFilename = string.Format("{0}{1}", newFilename, fInfo.Extension);
        string strFileName = newFilename;
        fileName = System.IO.Path.Combine(path, newFilename);
        up.SaveAs(fileName);
        successmsg1 s = new successmsg1
        {
            status = "success",
            url = "temp/" + newFilename,
            width = upimg.Width,
            height = upimg.Height
        };

        context.Response.Write(JsonConvert.SerializeObject(s));
    }

---

您无法获取文件输入的值并通过AJAX发送，需要使用iframe才能做到这一点that@AminJafari，我看了一些其他的插件，它们都使用这个功能。如果我的ASP.NET代码工作正常，我在使用jQuery代码时遇到问题，我如何将表单数据传递到服务器？

using System;
using System.Collections;
using System.Collections.Generic;
using System.Data;
using System.Diagnostics;
using System.Web;
using Newtonsoft.Json;


public class Handler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
    HttpPostedFile up = context.Request.Files[0];
    System.IO.FileInfo upinfo = new System.IO.FileInfo(up.FileName);

        System.Drawing.Image upimg = System.Drawing.Image.FromStream(up.InputStream);
        string path = context.Server.MapPath("~/temp"); // this is the server path   where you'll be saving your image
    if (!System.IO.Directory.Exists(path))
            System.IO.Directory.CreateDirectory(path);

        string fileName;
        fileName = up.FileName;
        string newFilename = Guid.NewGuid().ToString();
        System.IO.FileInfo fInfo = new System.IO.FileInfo(fileName);
        newFilename = string.Format("{0}{1}", newFilename, fInfo.Extension);
        string strFileName = newFilename;
        fileName = System.IO.Path.Combine(path, newFilename);
        up.SaveAs(fileName);
        successmsg1 s = new successmsg1
        {
            status = "success",
            url = "temp/" + newFilename,
            width = upimg.Width,
            height = upimg.Height
        };

        context.Response.Write(JsonConvert.SerializeObject(s));
    }