Ich habe die Geschäftsszenarien, denen ich bei der Arbeit begegnet bin, mit meinen Kollegen untersucht, hauptsächlich im Hinblick auf die Kompatibilität mit IE-Versionen.
Tatsächlich habe ich einige triviale Wissenspunkte und Lösungen im Internet gesammelt und sie dann integriert. Die wichtigsten Punkte sind wie folgt:
1. IE-Eingabetyp = Dateibildvorschau erfordert IE-Filter-CSS
progid:DXImageTransform.Microsoft.AlphaImageLoader
Chrome/Firefox verwendet den Dateireader der Datei-API
2. Um das Bild zu drehen, verwendet IE den Filter von progid:DXImageTransform.Microsoft.Matrix (Filter können in Kombination verwendet und durch Leerzeichen getrennt werden).
Chrome/Firefox verwendet Canvas
3. Um Bilder hochzuladen, verwende ich das Formular im unsichtbaren Iframe, um Eingabe[Typ=Datei] dynamisch hinzuzufügen, um dies zu erreichen. Chrome/Firefox kann xhr verwenden, aber ich bin zu faul, es zu ändern.
4. Um Bilder hochzuladen, ohne die Seite zu aktualisieren, und um Dateien wiederholt auswählen zu können, wird ein Iframe verwendet, um eine Liste von Eingaben [Typ = Datei] zu verwalten, was ziemlich clever ist.
Sie können sich auf den folgenden Code beziehen, bei dem es sich hauptsächlich um einen Haupt-HTML-Code und dann um zwei Iframe-HTML-Codes handelt. Die vom hochgeladenen Server zurückgegebenen Daten sind der Dateiname der erfolgreich hochgeladenen Datei, der zum Löschen des Vorschaubilds verwendet wird.
Kopieren Sie den Codecode wie folgt:
// Rückruf hochladen
// resultList -> ['file1', 'file2'] ist der Dateiname, der erfolgreich hochgeladen wurde
var uploadCallback = function(resultList){
console.log(JSON.stringify(resultList));
var i = 0;
for(; i < resultList.length; i++){
var index = resultList[i].substr('file'.length);
$(':checkbox[value=' + index + ']').parent().parent().remove();
}
};
$(Funktion(){
//Speichern Sie den Drehwinkel des Bildes, damit es zur Verarbeitung an den Server gesendet werden kann
var rotationAng = {};
// Seriennummer, die für das Namenssuffix verwendet wird
varcc = 0;
// Wenn es chrome/ff ist, müssen Sie die Datei-API verwenden, um img zu generieren
var genImgTpl = function(input, index){
return '<img src="/webx/public/1.png" id="img' + index + '" />';
};
var readImgFromInput = function(_input, index){
var inputDom = _input[0];
//chrom/ff
if(inputDom['files']){
var reader = new FileReader();
reader.onload = function(e){
$('img.main:last').attr({src : e.target.result});
}
reader.readAsDataURL(inputDom['files'][0]);
}anders{
var src = _input[0].value;
var imgDom = $('#img' + index);
imgDom.attr('src-old', src);
imgDom.css({
float: 'links',
Position: 'relativ',
Überlauf: 'versteckt',
Breite: '195px',
Höhe: '195px'
});
imgDom.css({'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=/"" + src + "/")"});
}
};
var showImg = function(_input){
var index = ++cc;
_input.addClass('hide');
_input.attr('name', 'file' + 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 + '" geprüft="true" /></span>' +
'<span><img src="img/rightBtn.png" /></span>' +
'</div>';
$('#imgDiv').append(tpl);
readImgFromInput(_input, index);
};
var addAnother = function(){
$('#uploadBtn').before('<input type="file" name="file" />');
};
// Bindungsereignis von input[type=file]
$('#uploadDiv input').live('change', function(){
var path = this.value;
if(!path){
zurückkehren;
}
showImg($(this));
addAnother();
});
// Sie können die Eingabe während des Kontrollkästchens entfernen
// $('#imgDiv input:checkbox').live('change', function(){
// var isChecked = $(this).is(':checked');
// console.log(isChecked);
// });
$('#imgDiv span.turn-right').live('click', function(){
//Der Winkel der letzten Drehung
var index = $(this).siblings('span.choose').find('input').val();
var oldAng = rotationAng[index] ||.
var newAng = oldAng + 90;
rotierenAng[index] = newAng;
$('#img' + index).rotate(90);
});
// Wenn das Formular gesendet wird, löschen Sie die nicht ausgewählte Eingabe[Typ=Datei] gemäß dem Kontrollkästchen
$('#uploadBtn').click(function(){
var selectedNum = $('#imgDiv input:checkbox').filter(':checked').length;
if(!choosedNum){
Alert('Bitte wählen Sie eine Datei zum Hochladen aus!');
return false;
}
//Ausgewähltes Seriennummern-Array
var selectedIndexList = $('#imgDiv input:checkbox').filter(':checked').map(function(){
return this.value;
}).erhalten();
// Zwei Iframes, eine Eingabe[Typ=Datei] zum Speichern der Auswahl
// Eine für den Formular-Upload
var uploadIframe = $('#upload')[0].contentWindow;
var ChooseIframe = $('#choose')[0].contentWindow;
var i = 0;
for(; i < selectedIndexList.length; i++){
var index = selectedIndexList[i];
var inputFile = ChooseIframe.$('#uploadDiv input').filter('[data-index=' + index + ']');
uploadIframe.$('#uploadForm').append(inputFile);
//Rotationsgrade
var ang = rotationAng[index] ||.
if(ang % 360 != 0){
var tplInput = '<input type="hide" name="ang' + index + '" value="' + ang + '" />';
uploadIframe.$('#uploadForm').append(tplInput);
}
}
uploadIframe.doUpload();
return false;
});
});
Das Testen in IE7, 8, 9 und Chrome ist kein Problem