Статьи

Перетаскивание файла HTML5 с помощью jQuery и ASP.NET

Октябрь 21, 2018

Я наткнулся на статью на Tutorialzine, в которой демонстрируется загрузка файлов с помощью jQuery и PHP . Как любопытный читатель, я скачал примеры файлов, посмотрел и запустил их на моей LINUX VM. Оно работало завораживающе. Но я пользователь Windows и программист .NET, поэтому вопрос в том, как я могу сделать то же самое в ASP.NET?

Если кто-то может что-то сделать в PHP, то я могу сделать это в .NET!

Кто сказал вышеупомянутую строку ?? ….. Я !! ?? ….. о да !!! Итак, для начала я использовал те же загруженные файлы, что и для проверки версии перетаскивания файлов в PHP. Единственное, что мы не собираемся повторно использовать из этих файлов, это файл php . Вы можете удалить его, если хотите или сохранить, это не повредит нашему приложению ASP.NET.

Обновление части JQuery

В этом примере используется замечательный плагин от Weixi Yen, и вы можете найти плагин и его пример использования (документацию) на GitHub . Основная или, я должен сказать, функциональность по умолчанию, предоставляемая этим плагином, состоит в том, чтобы позволить пользователям перетаскивать файлы с рабочего стола в браузер. Но прежде чем вы начнете работать с плагином, я настоятельно рекомендую вам ознакомиться с параметрами и настройками плагина.

Откройте файл script.js и измените URL-адрес, чтобы он указывал на веб-службу или страницу, на которой будет загружен опубликованный файл. Здесь я хочу, чтобы вы обратили внимание на функцию javascript с именем  createImage . Этот метод принимает файл в качестве параметра и возвращает изображение или данные файла в формате Base64  . Это данные, которые фактически публикуются, когда пользователь помещает файл в область загрузки на веб-странице. Все зависит от вас, хотите ли вы использовать веб-сервис или обычную веб-страницу, чтобы принять опубликованный файл / данные. Вот мой файл script.js выглядит после изменений.

$(function () {
 
    var dropbox = $('#dropbox'),
        message = $('.message', dropbox);
 
    dropbox.filedrop({
        paramname: 'pic',
        maxfiles: 5,
        maxfilesize: 100,
        //url: '/Uploader.asmx/Upload',
        url: '/Default.aspx',
 
        uploadFinished: function (i, file, response) {
            $.data(file).addClass('done');
        },
 
        error: function (err, file) {
            switch (err) {
                case 'BrowserNotSupported':
                    showMessage('Your browser does not support HTML5 file uploads!');
                    break;
                case 'TooManyFiles':
                    alert('Too many files! Please select 5 at most! (configurable)');
                    break;
                case 'FileTooLarge':
                    alert(file.name + ' is too large! Please upload files up to 2mb (configurable).');
                    break;
                default:
                    break;
            }
        },
 
        // Called before each upload is started
        //        beforeEach: function (file) {
        //            if (!file.type.match(/^image\//)) {
        //                alert('Only images are allowed!');
 
        //                // Returning false will cause the
        //                // file to be rejected
        //                return false;
        //            }
        //        },
 
        uploadStarted: function (i, file, len) {
            createImage(file);
        },
 
        progressUpdated: function (i, file, progress) {
            $.data(file).find('.progress').width(progress);
        }
 
    });
 
    var template = '<div class="preview">' +
                        '<span class="imageHolder">' +
                            '<img />' +
                            '<span class="uploaded"></span>' +
                        '</span>' +
                        '<div class="progressHolder">' +
                            '<div class="progress"></div>' +
                        '</div>' +
                    '</div>';
 
 
    function createImage(file) {
 
        var preview = $(template),
            image = $('img', preview);
 
        var reader = new FileReader();
 
        image.width = 100;
        image.height = 100;
 
        reader.onload = function (e) {
 
            // e.target.result holds the DataURL which
            // can be used as a source of the image:
            //alert(e.target.result);
            image.attr('src', e.target.result);
        };
 
        // Reading the file as a DataURL. When finished,
        // this will trigger the onload function above:
        reader.readAsDataURL(file);
 
        message.hide();
        preview.appendTo(dropbox);
 
        // Associating a preview container
        // with the file, using jQuery's $.data():
 
        $.data(file, preview);
    }
 
    function showMessage(msg) {
        message.html(msg);
    }
 
});

Проверьте строки № 10 и 11. Я изменил параметр url на тот, где будут публиковаться мои файлы. Это может быть веб-сервис или просто обычная веб-страница. Два других параметра maxfiles и maxfilesize определяют количество файлов, которые могут быть загружены асинхронно, и максимальный размер файла, который может быть загружен в МБ соответственно. Также обратите внимание, что демонстрационная версия, которую вы загружаете из исходного источника, будет иметь проверку того, что файлы, загружаемые пользователем, должны быть только изображениями. Если вы хотите переопределить это правило, раскомментируйте строки из 33-42. Это из части jQuery / script. Теперь пришло время перейти на серверный код.

Код на стороне сервера

Напоминаю вам еще раз, что мы публикуем файл на веб-сервис или веб-страницу, и поэтому этот код для нашего веб-сервиса или на нашей странице будет выглядеть примерно так:

Если вы используете веб-сервис для загрузки опубликованного файла:

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string Upload()
{
       HttpContext postedContext = HttpContext.Current;
       HttpPostedFile file = postedContext.Request.Files[0];
       string name = file.FileName;
       byte[] binaryWriteArray = new
       byte[file.InputStream.Length];
       file.InputStream.Read(binaryWriteArray, 0,
       (int)file.InputStream.Length);
       FileStream objfilestream = new FileStream(Server.MapPath("uploads//" + name), FileMode.Create, FileAccess.ReadWrite);
       objfilestream.Write(binaryWriteArray, 0,
       binaryWriteArray.Length);
       objfilestream.Close();
       string[][] JaggedArray = new string[1][];
       JaggedArray[0] = new string[] { "File was uploaded successfully" };
       JavaScriptSerializer js = new JavaScriptSerializer();
       string strJSON = js.Serialize(JaggedArray);
       return strJSON;
}

Ничего особенного или сложного в приведенном выше коде. Помните, что файлы будут отправляться в веб-службу один за другим, а не в коллекции, и именно поэтому я работаю с одним файлом за раз, а не с коллекциями файлов. В моем случае я использовал веб-сервис, который возвращает мне результат JSON, который я могу показать его пользователю, хотя это и не обязательно, но на всякий случай, если вы хотите иметь один для вашего веб-сервиса, вам нужно использовать 2 с помощью операторов :

  • использование System.Web.Script.Serialization;
  • использование System.Web.Script.Services;

Если вы используете веб-страницу для загрузки опубликованного файла:

HttpContext postedContext = HttpContext.Current;
HttpPostedFile file = postedContext.Request.Files[0];
string name = file.FileName;
byte[] binaryWriteArray = new
byte[file.InputStream.Length];
file.InputStream.Read(binaryWriteArray, 0,
(int)file.InputStream.Length);
FileStream objfilestream = new FileStream(Server.MapPath("uploads//" + name), FileMode.Create, FileAccess.ReadWrite);
objfilestream.Write(binaryWriteArray, 0,
binaryWriteArray.Length);
objfilestream.Close();
string[][] JaggedArray = new string[1][];
JaggedArray[0] = new string[] { "File was uploaded successfully" };
JavaScriptSerializer js = new JavaScriptSerializer();
string strJSON = js.Serialize(JaggedArray);
Response.Write(strJSON);
Response.End();

Тот же код, что и для веб-службы, поместите приведенный выше код в событие page_load.

Внимание !!

Пока я работал с приведенным выше кодом и подтверждением плагина, я столкнулся с ошибкой, которая не позволяет мне загружать тяжелые файлы или я должен сказать большие файлы. Ошибка, которую я получил:

System.Web.HttpException: превышена максимальная длина запроса

Чтобы преодолеть эту ошибку, вы должны выполнить приведенную ниже конфигурацию в файле web.config внутри <system.web>


1

<httpRuntime maxRequestLength = «102400» executeTimeout = «1200» />

Слово предостережения здесь, хотя это решит вашу проблему, но:

  • Если maxrequestLength СЛИШКОМ БОЛЬШОЙ, то вы будете открыты для DOS-атак.
  • Время выполнения по умолчанию составляет 360 секунд. Измените его соответственно и только если вы работаете на очень медленных соединениях.

Вот и все, если вы выполнили действия, описанные выше, попробуйте загрузить какой-нибудь файл. А если вам не лень собирать все кусочки, скачайте код ниже и попробуйте.

Загрузить:  HTML5DragNDrpFileUpload.zip (58,15 КБ)

 

Источник: http://midnightprogrammer.net/post/HTML5-File-Drag-and-Drop-Upload-With-jQuery-and-ASPNET.aspx

38
Share: