Nahrajte soubory obrázků do Asp.net Core přes ajax

Nahrání obrázku je běžnou funkcí jakékoli webové aplikace. Takže zde v tomto článku se naučíme, jak pomocí IFormFile můžeme nahrávat soubory v Asp.net Core 3.1 také bez použití značky formuláře, pouhým zadáním požadavku ajax na výběr souboru, tj. (při události změny vstupu).

No, byl tam jeden požadavek, kdy musím nahrávat soubory na výběr vstupu a bez značky formuláře a bez tlačítka pro odeslání. Nenašel jsem o tom žádný článek. Tak jsem zkusil něco jednoduchého a fungovalo to pro mě, a proto zde sdílím kompletní článek o tom.

Co je IFormFile?

IFormFile je rozhraní, které je představeno v Asp.net Core 1.0. Rozhraní IFormFile se používá k odesílání souborů v požadavku HTTP. Abychom mohli použít IFormFile, musíme do našeho PageModel přidat jmenný prostor Microsoft.AspNetCore.Http.

IFormFile nám poskytuje užitečné vlastnosti jako FileName, Length, ContentType, ContentDisposition atd. Má metody jako CopyTo() , CopyToAsync() který budeme dále v tomto článku používat k ukládání nahraných souborů.

Krok k nahrání souboru do jádra asp.net

1. Přidejte na stránku břitvy značku HTML.
2.Server-side:kód pro uložení obrázku pomocí IFormFile.
3.jQuery Volání Ajax pro nahrání souboru na server.

Přidejte na stránku břitva značku HTML.

Nejprve vytvoříme nový projekt Asp.net Core a otevřeme Index.cshtml, což je výchozí stránka naší aplikace. Nyní jednoduše přidáme značku vstupního souboru a značku tlačítka (volitelné) na naši stránku břitvy.

Takže naše označení stránky Razor nakonec vypadá, jak je napsáno níže:

 <div class="row">       
    <h2>Upload file using jQuery ajax in Asp.net Core Razor Pages</h2>

    <div class=" form-group  text-center offset-3">
        <div class="custom-file">
            <input type="file" id="fileUpload" class="fileUpload">
            <button id="btnUpload" class="btn btn-success">Upload</button>
        </div>
    </div>
</div> 

Na straně serveru:Kód pro uložení obrázku pomocí IFormFile

V jádru asp.net jsou ve výchozím nastavení všechny statické soubory uloženy ve složce wwwroot. Protože potřebujeme přistupovat ke složce wwwroot, musíme do razor PageModel vložit IWebHostEnvironment.

Dále přidáme metodu OnPostMyUploader(), která zpracovává požadavek na příspěvek jQuery ajax.
Náš kód PageModel vypadá takto:

public class IndexModel : PageModel
{        
    private readonly IWebHostEnvironment webHostEnvironment;

    public IndexModel(IWebHostEnvironment webHostEnvironment)
    {
        this.webHostEnvironment = webHostEnvironment;
    }

    public IActionResult OnPostMyUploader(IFormFile MyUploader)
    {
        if (MyUploader != null)
        {
            string uploadsFolder = Path.Combine(webHostEnvironment.WebRootPath, "mediaUpload");
            string filePath = Path.Combine(uploadsFolder, MyUploader.FileName);
            using (var fileStream = new FileStream(filePath, FileMode.Create))
            {
                MyUploader.CopyTo(fileStream);
            }
            return new ObjectResult(new { status = "success" });
        }
        return new ObjectResult(new { status = "fail" });

    }
} 

A náš Startup.cs kód vypadá

public void ConfigureServices(IServiceCollection services)
{
    services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");
    services.AddControllersWithViews();
    services.AddRazorPages();
}

jQuery Ajax:Vytvořte žádost o příspěvek ajax pro nahrání souborů.

Zde při události změny souboru vytvoříme objekt FormData() a připojíme k němu soubory. Dále provedeme požadavek na odeslání těchto souborů.

Do beforeSend jsme také přidali záhlaví požadavku s hodnotou __RequestVerificationToken, toto je skryté pole, které automaticky generuje @Html.AntiForgeryToken() .

Konečný kód js pro vytvoření požadavku ajax na nahrání souboru do jádra asp.net vypadá takto:

 $("#fileUpload").on('change', function () {
    var files = $('#fileUpload').prop("files");                
    var url = "/Index?handler=MyUploader";
    formData = new FormData();
    formData.append("MyUploader", files[0]);

    jQuery.ajax({
        type: 'POST',
        url: url,
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        beforeSend: function (xhr) {
            xhr.setRequestHeader("XSRF-TOKEN",
                $('input:hidden[name="__RequestVerificationToken"]').val());
        },
        success: function (repo) {
            if (repo.status == "success") {
                alert("File : " + repo.filename + " is uploaded successfully");
            }
        },
        error: function() {
            alert("Error occurs");
        }
    });
}); 

// If you want to upload file on button click, then use below button click event
$("#btnUpload").on('click',function(){
   // add jQuery ajax code to upload
});

Poznámka:Ujistěte se, že vlastnost processData a contentType je nastavena na hodnotu false.

Závěr: Pomocí IFromfile a jQuery ajax jsme byli schopni nahrávat soubory na server. Také z bezpečnostních důvodů na ochranu před útoky CSRF jsme přidali AddAntiforgery do našeho souboru startup.cs.

Článek původně publikovaný na Codepedia.info Asp.net Core:Nahrání souboru ajax jQuery na Razor Pages (bez odeslání formuláře)