Saya mempelajari skenario bisnis yang saya temui di tempat kerja dengan rekan-rekan saya, terutama untuk kompatibilitas dengan versi IE.
Sebenarnya saya mengumpulkan beberapa poin pengetahuan sepele dan solusinya di Internet, lalu mengintegrasikannya. Poin utamanya adalah sebagai berikut:
1. Jenis input IE=pratinjau gambar file memerlukan filter IE css
progid:DXImageTransform.Microsoft.AlphaImageLoader
chrome/firefox menggunakan pembaca file File api
2. Untuk memutar gambar, IE menggunakan filter progid:DXImageTransform.Microsoft.Matrix (filter dapat digunakan secara kombinasi dan dipisahkan dengan spasi)
chrome/firefox menggunakan kanvas
3. Untuk mengunggah gambar, saya menggunakan formulir di iframe tak kasat mata untuk menambahkan input[type=file] secara dinamis untuk mencapai hal ini. Chrome/firefox bisa pakai xhr, tapi saya malas memodifikasinya.
4. Untuk mengunggah gambar tanpa menyegarkan halaman, dan agar dapat memilih file berulang kali, iframe digunakan untuk menyimpan daftar input[type=file], yang cukup pintar.
Anda dapat merujuk ke kode di bawah ini, yang sebagian besar berupa html utama, dan kemudian dua html iframe. Data yang dikembalikan oleh server yang diunggah adalah nama file dari file yang berhasil diunggah, yang digunakan untuk menghapus gambar pratinjau.
Copy kode kodenya sebagai berikut:
// Unggah panggilan balik
// resultList -> ['file1', 'file2'] adalah nama file yang berhasil diupload
var uploadCallback = fungsi(Daftar Hasil){
console.log(JSON.stringify(resultList));
var saya = 0;
for(; i < hasilDaftar.panjang; i++){
var indeks = Daftarhasil[i].substr('file'.panjang);
$(':kotak centang[nilai=' + indeks + ']').parent().parent().remove();
}
};
$(fungsi(){
//Simpan sudut rotasi gambar agar dapat dikirimkan ke server untuk diproses
var memutarAng = {};
// Nomor seri yang digunakan untuk akhiran penamaan
varcc = 0;
// Jika chrome/ff, Anda perlu menggunakan file api untuk menghasilkan img
var genImgTpl = fungsi(masukan, indeks){
kembalikan '<img src="/webx/public/1.png" id="img' + indeks + '" />';
};
var readImgFromInput = fungsi(_input, indeks){
var masukanDom = _input[0];
//chrome/ff
if(inputDom['file']){
var pembaca = FileReader baru();
pembaca.onload = fungsi(e){
$('img.main:last').attr({src : e.target.result});
}
reader.readAsDataURL(inputDom['file'][0]);
}kalau tidak{
var src = _input[0].nilai;
var imgDom = $('#img' + indeks);
imgDom.attr('src-lama', src);
imgDom.css({
melayang: 'kiri',
posisi: 'relatif',
meluap: 'tersembunyi',
lebar: '195 piksel',
tinggi: '195 piksel'
});
imgDom.css({'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=/"" + src + "/")"});
}
};
var showImg = fungsi(_input){
var indeks = ++cc;
_input.addClass('sembunyikan');
_input.attr('nama', 'file' + indeks);
_input.attr('indeks-data', indeks);
var iframeWin = $('#choose')[0].contentWindow;
iframeWin.addInput(_input);
var tpl = '<div>' + genImgTpl(_input, indeks) +
'<span><input type="checkbox" value="' + indeks + '" dicentang="benar" /></span>' +
'<span><img src="img/rightBtn.png" /></span>' +
'</div>';
$('#imgDiv').append(tpl);
readImgFromInput(_input, indeks);
};
var addAnother = fungsi(){
$('#uploadBtn').before('<input type="file" name="file" />');
};
// Peristiwa pengikatan input[type=file]
$('#uploadDiv masukan').live('perubahan', fungsi(){
var jalur = ini.nilai;
jika(!jalur){
kembali;
}
showImg($(ini));
tambahkanLain();
});
// Anda dapat menghapus input pada kotak centang
// $('#imgDiv masukan:kotak centang').live('ubah', fungsi(){
// var isChecked = $(ini).is(':diperiksa');
// console.log(diperiksa);
// });
$('#imgDiv span.belok kanan').live('klik', function(){
//Sudut putaran terakhir
var indeks = $(ini).siblings('span.choose').find('input').val();
var oldAng = putarAng[indeks] ||.
var newAng = oldAng + 90;
memutarAng[index] = newAng;
$('#img' + indeks).putar(90);
});
// Saat formulir dikirimkan, hapus input[type=file] yang tidak dipilih sesuai dengan kotak centang
$('#uploadBtn').klik(fungsi(){
var angka yang dipilih = $('#imgDiv masukan:kotak centang').filter(':dicentang').panjang;
jika(!angka yang dipilih){
alert('Silakan pilih file yang akan diupload!');
kembali salah;
}
//Array nomor seri yang dipilih
var dipilihIndexList = $('#imgDiv masukan:kotak centang').filter(':diperiksa').map(fungsi(){
kembalikan ini.nilai;
}).mendapatkan();
// Dua iframe, satu input[type=file] untuk menyimpan pilihan
// Satu untuk unggahan formulir
var uploadIframe = $('#upload')[0].contentWindow;
var pilihIframe = $('#pilih')[0].contentWindow;
var saya = 0;
for(; i <selectIndexList.length; i++){
var indeks = DaftarIndeks yang dipilih[i];
var inputFile = pilihIframe.$('#uploadDiv input').filter('[data-index=' + indeks + ']');
uploadIframe.$('#uploadForm').append(inputFile);
// Derajat rotasi
var ang = putarAng[indeks] ||.
jika(ang % 360 != 0){
var tplInput = '<input type="hide" name="ang' + indeks + '" value="' + ang + '" />';
uploadIframe.$('#uploadForm').append(tplInput);
}
}
uploadIframe.doUpload();
kembali salah;
});
});
Tidak ada masalah dalam pengujian di IE7, 8, 9 dan chrome