ASP.NET файл загрузки и отображения на той же странице .NET Core 2.1

Question

Я новичок в asp.net, и мне просто нужно отобразить элемент управления file upload (для загрузки PDF), из которого после выбора пользователем файла та же страница отображает PDF прямо под файлом загрузкиконтроль.Мне удалось многому научиться, настраивая основы самостоятельно.Но по какой-то причине я не могу отобразить загруженный файл PDF в элементе object, который я установил на странице.Я уверен, что я сделал много других вещей неправильно в своем коде, поэтому, пожалуйста, посоветуйте улучшения.Обратитесь к ниже.

Пожалуйста, простите наивность в этом коде:

Файл бритвы cshtml:

@using (Html.BeginForm("PickPdf", "EditPdf", FormMethod.Post, new { id = "fileUploadControl", enctype = "multipart/form-data" }))
{
    <input type="file" name="file" class="chooseFileButton" />

    <input type="submit"
           name="Upload"
           id="Submit"
           value="View PDF"
           class="chooseFileButton"
           onclick="Validation" />
    <br><br>

    <p>@ViewBag.Message</p>

    <object id="pdfObject" name="pdfObject" data=@ViewData["FormFile"] type="application/pdf" width="400" height="200"></object>
}

C # Контроллер:

    public IActionResult Index()
    {
        return this.CustomView("");
    }    

    [HttpPost]
    public ActionResult PickPdf(){
        var files = Request.Form.Files;

        if(files != null && files.Count > 0)
        {
            IFormFile selectedFile = files[0];
            return this.CustomView(selectedFile.FileName, selectedFile);
        }

        return this.CustomView("File could not be processed");
    }



    private ActionResult CustomView(string message, IFormFile formFile = null){
        var returnView = View("Index");
        returnView.ViewData["Message"] = message;

        if(formFile != null){
            var readStream = formFile.OpenReadStream();
            byte[] bytes = new byte[readStream.Length];
            readStream.Read(bytes, 0, Convert.ToInt32(readStream.Length));
            returnView.ViewData["FormFile"] = bytes;
        }

        return returnView;
    }

Answer 1

Если вы хотите, чтобы PDF-файл отображался сразу после того, как пользователь выбрал файл, для этого вам нужен JavaScript.Привязать обработчик событий к событию onchange ввода вашего файла, используя что-то вроде следующего кода:

$('#MyFileInput').on('change', function () {
    var file = this.files[0];

    if (file.type === 'application/pdf') {
        var reader = new FileReader();
        reader.onload = function(e) {
            $('MyObjectTag').data = e.target.result;
        }
        reader.readAsDataURL(file);
    }
});

При этом используется API-интерфейс файла JavaScript для чтения содержимого выбранного пользователем файла, изатем создает URL-адрес данных, который затем можно присвоить тегу объекта data.Важно, чтобы вы проверили MIME-тип, чтобы кто-то не мог просто загрузить что-либо в ваш тег объекта.

Также обратите внимание, что на самом деле это ничего не «загружает».Пользователю все еще нужно будет отправить форму (или вам нужно будет отправить данные формы через AJAX), чтобы получить актуальный файл на ваш сервер.Однако это позволяет им предварительно просмотреть то, что они собираются загрузить, не вызывая обновления страницы или фактически делая что-либо необратимое (если это не тот файл, который они на самом деле хотели, они могут просто выбрать снова).Кроме того, поскольку требуется File API, он будет работать только в современных браузерах (IE 10+ и практически во всех других браузерах на планете).

Answer 2

Попробуйте изменить метод следующим образом.Надеюсь на помощь, дружище :))

private ActionResult CustomView(string message, IFormFile formFile = null)
        {
            var returnView = View("Contact");
            returnView.ViewData["Message"] = message;

            if (formFile != null)
            {
                var readStream = formFile.OpenReadStream();
                byte[] bytes = new byte[readStream.Length];                
                readStream.Read(bytes, 0, Convert.ToInt32(readStream.Length));
                var strBase64 = Convert.ToBase64String(bytes);
                var content = string.Format("data:application/pdf;base64,{0}", strBase64);
                ViewData["FormFile"] = content;
            }

            return returnView;
        }