Здесь фрагмент кода, который я использую сейчас, для загрузки нескольких изображений с использованием API файлов HTML5:
/**
* @param {FileList} files
*/
upload: function(files){
nfiles = files.length;
for (var i = 0; i < nfiles; i++) {
/** @var file File **/
var file = files[i];
var xhr = new XMLHttpRequest();
xhr.open("POST", settings.post_upload, true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.upload.filenumb = i;
xhr.filenumb = i;
xhr.upload.filename = file.name;
var nef = new FormData();
nef.append("folder", settings.folder);
nef.append("file_element", settings.file_elem);
nef.append("udata", settings.user_data);
nef.append(settings.file_elem, file);
xhr.send(nef);
}
}
Я хотел бы изменить размер изображений перед загрузкой с использованием объекта canvas, но не имея опыта с этим, я не уверен, как можно обновить код с помощью методов, например. описанный здесь: HTML5 Предварительный просмотр изображений перед загрузкой
canvas.toDataURL("image/png");
вернет закодированную строку. Но мне нужно отправить объект File
.
Изменить
Как бы вы писали (разумно) функцию перекрестного браузера для большинства современных браузеров для изменения размера файла перед загрузкой, обработки jpg, png и gif с прозрачностью:
/**
* @param {File} file
* @param int max_width
* @param int max_height
* @param float compression_ratio
* @returns File
*/
function resize(file, max_width, max_height, compression_ratio){}