Предисловие
Всем привет. О создании загрузчика изображений я уже писал. Сначала — загрузчик на flash, затем — на html5. По большому счёту, этих двух вариантов достаточно. И если вы поклонник рациональности, а сама тема особенного интереса не вызывает, то можете дальше не читать.
Рабочий пример загрузчика на Silverlight 4 привожу здесь же: да вот он.
Напомню задачу. Необходимо реализовать пакетную загрузку изображений, ресайз на клиенте, а также удобное получение файлов на сервере(например, в массив $_FILES в php). Ну и удобный интерфейс, разумеется.
Теперь перейдем к инструментарию. В данном случае мы используем Silverlight 4, а значит у нас есть мощь .Net, статическая типизация(да-да, я знаю, dynamic рулит), классный бесплатный редактор(Microsoft Visual Web Developer 2010 Express).
Работа с изображениями
Итак, C#. Язык мне нравится(даже диплом я на нём писал), однако после javascript, actionscript и php не очень привычно. Впрочем, это быстро проходит.
Чтобы получить список файлов, нам потребуется OpenFileDialog. Загрузить файлы тоже не проблема: через FileStream это легко сделать. Сами данные в Silverlight у нас есть, теперь нужно представить их виде изображений и потом ресайзить.
Удивительно, но представить данные в Bitmap мы можем(WriteableBitmap), но нет встроенных методов для ресайза и тем паче для кодирования обратно в png или jpeg. Всё это, естественно, можно сделать вручную. Но это тема для отдельной статьи, тем более подобные вопросы много раз пережевывались, и на Хабре в том числе. Поэтому возьмем библиотеку, которая даст больше возможностей. Я использовал ImageTools. Для своих нужд написал класс MyImage, который реализует требующийся мне функционал:
using System; using System.Net; using System.Windows; using System.IO; using System.Windows.Media.Imaging; using ImageTools; using ImageTools.IO.Bmp; using ImageTools.IO.Jpeg; using ImageTools.IO.Png; using ImageTools.Helpers; using ImageTools.Filtering; using ImageTools.IO; namespace Uploader.Libs { public class MyImage { private ExtendedImage im; //базовый класс из библиотеки ImageTools public string name { get; set; } public string extension { get; set; } public FileInfo origin { get; set; } public int originSize { get { return origin != null ? Utils.ByteToKB((int)origin.Length) : 0; //Utils - мой класс для всяких доп.функций } } public MyImage(FileInfo fileinfo) { name = fileinfo.Name; extension = fileinfo.Extension; origin = fileinfo; WriteableBitmap bmp = new WriteableBitmap(1, 1); bmp.SetSource(origin.OpenRead()); im = bmp.ToImage(); } public MyImage(ExtendedImage im, string name, string extension) { this.name = name; this.extension = extension; this.im = im; } public MyImage resize(int width, int height) { string prefix = width.ToString() + "_" + height.ToString() + "_"; ExtendedImage rImage = ExtendedImage.Resize(im, width, height, new ImageTools.Filtering.NearestNeighborResizer()); //пользуемся возможностями библиотеки для ресайза return new MyImage(rImage, prefix + name, extension); } //ресайз, сохраняя пропорции public MyImage scale(int value) { double width = im.PixelWidth; double height = im.PixelHeight; double max = width > height ? width : height; double sc = max > value ? value / max : 1; int nWidth = (int)Math.Round(sc * width); int nHeight = (int)Math.Round(sc * height); return resize(nWidth, nHeight); } //метод для получения оригинала изображения public byte[] getOrigin() { byte[] buffer; if (origin != null) { FileStream fStream = origin.OpenRead(); buffer = new byte[fStream.Length]; fStream.Read(buffer, 0, buffer.Length); } else buffer = null; return buffer; } //метод для получения конечного byte-контейнера, именно он нужен для загрузки public byte[] toByte(string extension = "") { MemoryStream mStream = new MemoryStream(); string ext = extension != String.Empty ? extension : this.extension; dynamic encoder; //кодируем изображение в тот формат, который имеет оригинал, поэтому воспользуемся dynamic switch (ext) { case ".png": encoder = new PngEncoder(); break; default: encoder = new JpegEncoder(); break; } encoder.Quality = 100; //кодируем с максимальным качеством encoder.Encode(im, mStream); return mStream.ToArray(); } //base64 нам потребуется для вывода в html превью изображения public string toBase64(byte[] data = null) { byte[] iData = data != null ? data : toByte(); return "data:image/" + extension.Substring(1) + ";base64," + Convert.ToBase64String(iData); } } }
Итак, у нас есть изображения, есть функционал для работы с ними, в итоге есть массив byte[] для отправки на сервер.
Шапка
Вообще взаимодействие с сервером на silverlight тема для отдельной статьи(разберусь побольше и напишу, скорее всего). Достаточно сказать, что просто передать переменные на сервер(без использования веб-сервиса, soap) не так-то просто. В итоге, как и для flash придется формировать шапку запроса самим, эмулируя, таким образом, отправку формы. В итоге получилась очередная реинкарнация моего класса для формирования шапки:
using System; using System.Collections.Generic; using System.Text; using System.Windows.Browser; namespace Uploader.Libs { public class FormBuilder { private string BOUND; private string ENTER = "\r\n"; private string ADDB = "--"; UTF8Encoding encoding; private List<byte> Data; public string bound { get { return BOUND; } } public FormBuilder() { BOUND = getBoundary(); Data = new List<byte>(); encoding = new UTF8Encoding(); } public void addFile(string name, byte[] buffer) { string encode_name = HttpUtility.UrlEncode(name); StringBuilder header = new StringBuilder(); header.Append(ADDB + BOUND); header.Append(ENTER); header.Append("Content-Disposition: form-data; name='" + encode_name + "'; filename='" + encode_name + "'"); header.Append(ENTER); header.Append("Content-Type: application/octet-stream"); header.Append(ENTER); header.Append(ENTER); Data.AddRange(encoding.GetBytes(header.ToString())); Data.AddRange(buffer); Data.AddRange(encoding.GetBytes(ENTER)); } public void addParam(string name, string value) { StringBuilder header = new StringBuilder(); header.Append(ADDB + BOUND); header.Append(ENTER); header.Append("Content-Disposition: form-data; name='" + name + "'"); header.Append(ENTER); header.Append(ENTER); header.Append(value); header.Append(ENTER); Data.AddRange(encoding.GetBytes(header.ToString())); } public byte[] getForm() { StringBuilder header = new StringBuilder(); header.Append(ENTER); header.Append(ENTER); header.Append(ADDB + BOUND + ADDB); Data.AddRange(encoding.GetBytes(header.ToString())); byte[] formData = new byte[Data.Count]; Data.CopyTo(formData); return formData; } private string getBoundary() { string _boundary = ""; Random rnd = new Random(); for (int i = 0; i < 0x20; i++) { _boundary += (char)(97 + rnd.NextDouble() * 25); } return _boundary; } } }
Асинхронность
Вот мы и перешли к самому интересному. Собственно, к механизмам загрузки данных на сервер и получению ответа. В нашем случае понадобится HttpWebRequest. Вообще идеология работы с этим классом и с запросами в silverlight не столь очевидна, поэтому имеет смысл расписать последовательность действий:
1) Создание экземпляра HttpWebRequest, указание url назначения, метода отправки(Post,Get), заголовка(Content-type).
2) Далее вызов метода BeginGetRequestStream. У этого метода 2 параметра. Первый — это делегат функции, которая и будет вызвана. Второй — параметры переданные этой функции. Вообще, зачем нам эта функция? Она нужна для того, чтобы получить доступ к потоку(Stream), записывающему данные на сервер. Поток можно получить методом EndGetRequestStream.
Стоит отметить, что функция вызывается асинхронно и в отдельном потоке(не путать со Stream), то есть доступа к пользовательскому интерфейсу у нас нет. С этим можно побороться двумя путями: через вызов Dispatcher.BeginInvoke(вызов функции в потоке пользовательского интерфейса) или же через SynchronizationContext сначала сохранить контекст синхронизации для потока пользовательского интерфейса, а потом в требуемом месте вызвать функцию, которая асинхронно выполнится в этом потоке.
3) Далее просто записываем через Write данные(тут же можно и отслеживать процент загрузки).
4) Далее вызов метода BeginGetResponse, который запрашивает ответ от сервера. Параметры у метода такие же как и для BeginGetRequestStream, и функция тоже вызывается асинхронно.
5) В этой функции получаем экземпляр HttpWebResponse(методом EndGetResponse объекта HttpWebRequest).
6) Далее получаем поток(Stream) с ответом(вызвав метода GetResponseStream объекта HttpWebResponse). А из потока уже получаем сам ответ(через StreamReader.ReadToEnd).
Я понимаю, что объяснение корявое, но по-другому я не сумел. Надеюсь, пример кода будет наглядней(ну и некоторые комментарии в коде тоже присутствуют):
SynchronizationContext sync; //контекст синхронизации для потока пользовательского интерфейса Dictionary<string, MyImage> images; //собственно коллекция изображений HtmlView mainView; //это мой класс для вывода в представление html string script = "../upload.php"; //php-скрипт, обрабатывающий полученные файлы private void upload() { if (images.Count > 0) { MyImage im = (MyImage)(images.First().Value); MyImage mini = im.scale(300); //ресайзим FormBuilder builder = new FormBuilder(); //класс формирования шапки builder.addFile(im.name, im.getOrigin()); builder.addFile(mini.name, mini.toByte()); byte[] formData = builder.getForm(); Uri uri = new Uri(script, UriKind.Relative); HttpWebRequest request = (HttpWebRequest)WebRequestCreator.BrowserHttp.Create(uri); // здесь мы используем Browser Http Stack для того, чтобы можно было отправлять куки request.Method = "POST"; request.ContentType = "multipart/form-data; boundary=" + builder.bound; request.ContentLength = formData.Length; List<object> uploadState = new List<object>(); //собственно объект, который мы передаем в функцию uploadState.Add(request); uploadState.Add(formData); request.BeginGetRequestStream(new AsyncCallback(GetRequestStream), uploadState); } } private void GetRequestStream(IAsyncResult result) { List<object> state = (List<object>)result.AsyncState; HttpWebRequest request = (HttpWebRequest)state[0]; byte[] data = (byte[])state[1]; int k = 0; int h = data.Length / 100; int ost = data.Length % 100; int dLength = data.Length - ost; Stream writeStream = request.EndGetRequestStream(result); //получаем поток for (int i = 0; i < dLength; i += h) { writeStream.Write(data, i, h); k++; Dispatcher.BeginInvoke(() => { mainView.setPercent(k); //отслеживаем загрузку }); } if (ost > 0) writeStream.Write(data, dLength, ost); writeStream.Close(); request.BeginGetResponse(new AsyncCallback(GetResponse), request); } private void GetResponse(IAsyncResult result) { HttpWebRequest request = (HttpWebRequest)result.AsyncState; HttpWebResponse response = (HttpWebResponse)request.EndGetResponse(result); sync.Post(onComplete, response); //вызываем функцию в потоке пользовательского интерфейса } private void onComplete(object state) { HttpWebResponse response = (HttpWebResponse)state; if (response.StatusCode == HttpStatusCode.OK) { StreamReader reader = new StreamReader(response.GetResponseStream()); string responseText = reader.ReadToEnd(); reader.Close(); } images.Remove(images.First().Key); //удаляем загруженное изображение из коллекции mainView.setRowComplete(); upload(); //переходим к следующему изображению }
Такая вот загрузка. Зато на сервере ничто не мешает нам воспользоваться банальным и знакомым скриптом:
foreach($_FILES as $key => $value){ $filename = substr_replace($key, '.', -4, 1); move_uploaded_file($value['tmp_name'], "upload/". urldecode($filename)); } echo 'complete';
Представление
Остался вопрос, как должен выглядеть интерфейс загрузсика(xaml или html). Тут уж каждый решает, как ему больше нравится. Я сделал в виде html. То есть кнопка вызова диалога выбора файлов, конечно, на silverlight(в силу ограничения безопасности). Зато всё остальное на html(включая и превью изображений, их я выводил в виде base64). В этом мне помогли замечательные классы Html Bridge, позволяющие работать с DOM-деревом прямо из silverlight.
Вот так выглядит демка загрузчика:
За скобками
Хочется сказать спасибо хабраюзеру Demetros за отличные статьи на эту же тему, а также хабраюзерам, кто в комментариях к моим предыдущим статьям давал ссылки на готовые решения. Те, кто заинтересуются этой темой, могут найти что-то для своих задач.
Поздравляю всех с Новым годом и желаю, чтобы ваша работа была продолжением ваших увлечений!
