Бизнес-сценарии, с которыми я сталкивался на работе, я изучал вместе с коллегами, в основном на предмет совместимости с версиями IE.
Фактически, я собрал в Интернете некоторые тривиальные знания и решения, а затем объединил их. Основные моменты заключаются в следующем:
1. Тип ввода IE = для предварительного просмотра изображения файла требуется фильтр CSS IE.
progid:DXImageTransform.Microsoft.AlphaImageLoader
chrome/firefox использует программу чтения файлов File API
2. Чтобы повернуть изображение, IE использует фильтр progid:DXImageTransform.Microsoft.Matrix (фильтры можно использовать в комбинации и разделять пробелами).
Chrome/Firefox использует холст
3. Чтобы загрузить изображения, я использую форму в невидимом iframe, чтобы динамически добавлять input[type=file] для достижения этой цели. Chrome/Firefox может использовать xhr, но мне лень его изменять.
4. Чтобы загружать изображения без обновления страницы и иметь возможность многократно выбирать файлы, используется iframe для ведения списка ввода[type=file], что довольно умно.
Вы можете обратиться к приведенному ниже коду, который в основном представляет собой основной HTML-код, а затем два HTML-кода iframe. Данные, возвращаемые загруженным сервером, представляют собой имя успешно загруженного файла, который используется для удаления изображения предварительного просмотра.
Скопируйте код кода следующим образом:
// Загрузка обратного вызова
// resultList -> ['file1', 'file2'] — имя файла, который был успешно загружен
вар uploadCallback = функция (resultList) {
console.log(JSON.stringify(resultList));
вар я = 0;
for(; я <resultList.length; я++){
var index = resultList[i].substr('file'.length);
$(':checkbox[value=' + index + ']').parent().parent().remove();
}
};
$(функция(){
//Сохраняем угол поворота изображения, чтобы его можно было отправить на сервер для обработки
вар RotateAng = {};
// Серийный номер, используемый в качестве суффикса имени
варкк = 0;
// Если это chrome/ff, вам нужно использовать файл API для создания img
вар genImgTpl = функция (вход, индекс) {
return '<img src="/webx/public/1.png" id="img' + index + '" />';
};
вар readImgFromInput = функция (_input, индекс) {
вар inputDom = _input[0];
//хром/фф
если (inputDom['файлы']){
вар читатель = новый FileReader ();
reader.onload = функция (е) {
$('img.main:last').attr({src: e.target.result});
}
readAsDataURL(inputDom['files'][0]);
}еще{
вар src = _input[0].value;
вар imgDom = $('#img' + index);
imgDom.attr('src-old', src);
imgDom.css({
плавать: 'влево',
позиция: 'родственник',
переполнение: «скрыто»,
ширина: '195 пикселей',
высота: '195 пикселей'
});
imgDom.css({'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=/"" + src + "/")"});
}
};
вар showImg = функция (_input) {
индекс вар = ++cc;
_input.addClass('скрыть');
_input.attr('имя', 'файл' + индекс);
_input.attr('индекс-данных', индекс);
вар iframeWin = $('#choose')[0].contentWindow;
iframeWin.addInput(_input);
var tpl = '<div>' + genImgTpl(_input, index) +
'<span><input type="checkbox" value="' + index + '"checked="true" /></span>' +
'<span><img src="img/rightBtn.png" /></span>' +
'</div>';
$('#imgDiv').append(tpl);
readImgFromInput (_input, индекс);
};
вар addAnother = функция(){
$('#uploadBtn').before('<input type="file" name="file" />');
};
// Событие привязки input[type=file]
$('#uploadDiv input').live('change', function(){
вар путь = this.value;
если(!путь){
возвращаться;
}
showImg($(это));
добавитьДругой();
});
// Вы можете удалить ввод во время флажка
// $('#imgDiv input:checkbox').live('change', function(){
// var isChecked = $(this).is(':checked');
// console.log(isChecked);
// });
$('#imgDiv span.turn-right').live('click', function(){
//Угол последнего поворота
var index = $(this).siblings('span.choose').find('input').val();
вар oldAng = RotateAng[индекс] || 0;
вар newAng = oldAng + 90;
RotateAng[индекс] = новыйAng;
$('#img' + index).rotate(90);
});
// Когда форма отправлена, удаляем невыбранный input[type=file] согласно флажку
$('#uploadBtn').click(function(){
var selectedNum = $('#imgDiv input:checkbox').filter(':checked').length;
если(!выбранныйNum){
alert('Пожалуйста, выберите файл для загрузки!');
вернуть ложь;
}
//Выбранный массив серийных номеров
var selectedIndexList = $('#imgDiv input:checkbox').filter(':checked').map(function(){
вернуть это.значение;
}).получать();
// Два iframe, один input[type=file] для сохранения выбора
// Один для загрузки формы
вар uploadIframe = $('#upload')[0].contentWindow;
var ChooseIframe = $('#choose')[0].contentWindow;
вар я = 0;
for(; я < selectedIndexList.length; я++){
индекс вар = выбранныйIndexList[i];
var inputFile = ChooseIframe.$('#uploadDiv input').filter('[data-index=' + index + ']');
uploadIframe.$('#uploadForm').append(inputFile);
//Градусы поворота
вар анг = RotateAng[индекс] || 0;
если(анг % 360 != 0){
var tplInput = '<input type="hide" name="ang' + index + '" value="' + ang + '" />';
uploadIframe.$('#uploadForm').append(tplInput);
}
}
uploadIframe.doUpload();
вернуть ложь;
});
});
Проблем с тестированием в IE7, 8, 9 и Chrome нет.