J'ai étudié les scénarios métiers rencontrés au travail avec mes collègues, principalement pour la compatibilité avec les versions d'IE.
En fait, j'ai collecté quelques points de connaissances et solutions triviales sur Internet, puis je les ai intégrés. Les points principaux sont les suivants :
1. Type d'entrée IE = l'aperçu de l'image du fichier nécessite un filtre CSS IE
progid:DXImageTransform.Microsoft.AlphaImageLoader
chrome/firefox utilise le lecteur de fichiers de File api
2. Pour faire pivoter l'image, IE utilise le filtre de progid:DXImageTransform.Microsoft.Matrix (les filtres peuvent être utilisés en combinaison et séparés par des espaces)
Chrome/Firefox utilise Canvas
3. Pour télécharger des images, j'utilise le formulaire dans l'iframe invisible pour ajouter dynamiquement input[type=file] pour y parvenir. Chrome/Firefox peut utiliser xhr, mais je suis trop paresseux pour le modifier.
4. Afin de télécharger des images sans actualiser la page et de pouvoir sélectionner des fichiers à plusieurs reprises, une iframe est utilisée pour maintenir une liste d'entrée[type=file], ce qui est assez astucieux.
Vous pouvez vous référer au code ci-dessous, qui est principalement un HTML principal, puis deux HTML iframe. Les données renvoyées par le serveur téléchargé sont le nom de fichier du fichier téléchargé avec succès, qui est utilisé pour supprimer l'image d'aperçu.
Copiez le code comme suit :
// Télécharger le rappel
// resultList -> ['file1', 'file2'] est le nom du fichier qui a été téléchargé avec succès
var uploadCallback = function(resultList){
console.log(JSON.stringify(resultList));
var je = 0;
pour(; je < resultList.length; i++){
var index = resultList[i].substr('file'.length);
$(':checkbox[value=' + index + ']').parent().parent().remove();
}
} ;
$(fonction(){
//Enregistre l'angle de rotation de l'image afin qu'elle puisse être soumise au serveur pour traitement
var rotationAng = {};
// Numéro de série utilisé pour nommer le suffixe
varcc = 0 ;
// S'il s'agit de chrome/ff, vous devez utiliser l'API de fichier pour générer img
var genImgTpl = fonction (entrée, index) {
return '<img src="/webx/public/1.png" id="img' + index + '" />';
} ;
var readImgFromInput = fonction(_input, index){
var inputDom = _input[0];
//chrome/ff
if(inputDom['fichiers']){
var lecteur = new FileReader();
lecteur.onload = fonction(e){
$('img.main:last').attr({src : e.target.result});
}
reader.readAsDataURL(inputDom['files'][0]);
}autre{
var src = _input[0].value;
var imgDom = $('#img' + index);
imgDom.attr('src-old', src);
imgDom.css({
float : 'gauche',
position : 'relative',
débordement : 'caché',
largeur : '195px',
hauteur : '195px'
});
imgDom.css({'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=/"" + src + "/")"});
}
} ;
var showImg = fonction(_input){
var index = ++cc;
_input.addClass('masquer');
_input.attr('nom', 'fichier' + index);
_input.attr('data-index', index);
var iframeWin = $('#choose')[0].contentWindow;
iframeWin.addInput(_input);
var tpl = '<div>' + genImgTpl(_input, index) +
'<span><input type="checkbox" value="' + index + '" vérifié="true" /></span>' +
'<span><img src="img/rightBtn.png" /></span>' +
'</div>';
$('#imgDiv').append(tpl);
readImgFromInput(_input, index);
} ;
var addAnother = fonction(){
$('#uploadBtn').before('<input type="file" name="file" />');
} ;
// Événement de liaison de input[type=file]
$('#uploadDiv input').live('change', function(){
var chemin = this.value;
si(!chemin){
retour;
}
showImg($(this));
addAnother();
});
// Vous pouvez supprimer l'entrée pendant la case à cocher
// $('#imgDiv input:checkbox').live('change', function(){
// var isChecked = $(this).is(':checked');
// console.log(isChecked);
// });
$('#imgDiv span.turn-right').live('clic', function(){
//L'angle de la dernière rotation
var index = $(this).siblings('span.choose').find('input').val();
var oldAng = rotationAng[index] || 0;
var newAng = oldAng + 90 ;
rotateAng[index] = newAng;
$('#img' + index).rotate(90);
});
// Lorsque le formulaire est soumis, supprimez l'entrée[type=file] non choisie selon la case à cocher
$('#uploadBtn').click(function(){
var selectedNum = $('#imgDiv input:checkbox').filter(':checked').length;
si(!chooseNum){
alert('Veuillez sélectionner un fichier à télécharger !');
renvoie faux ;
}
// Tableau de numéros de série sélectionné
varchoseIndexList = $('#imgDiv input:checkbox').filter(':checked').map(function(){
renvoie this.value ;
}).obtenir();
// Deux iframes, un input[type=file] pour sauvegarder la sélection
// Un pour le téléchargement du formulaire
var uploadIframe = $('#upload')[0].contentWindow;
var choisirIframe = $('#choose')[0].contentWindow;
var je = 0;
pour(; i <choseIndexList.length; i++){
var index =choseIndexList[i];
var inputFile = ChooseIframe.$('#uploadDiv input').filter('[data-index=' + index + ']');
uploadIframe.$('#uploadForm').append(inputFile);
//Degrés de rotation
var ang = rotationAng[index] || 0;
si(ang % 360 != 0){
var tplInput = '<input type="hide" name="ang' + index + '" value="' + ang + '" />';
uploadIframe.$('#uploadForm').append(tplInput);
}
}
uploadIframe.doUpload();
renvoie faux ;
});
});
Il n'y a aucun problème lors des tests sous IE7, 8, 9 et Chrome