ฉันศึกษาสถานการณ์ทางธุรกิจที่ฉันพบในที่ทำงานกับเพื่อนร่วมงาน โดยหลักๆ แล้วคือความเข้ากันได้กับเวอร์ชัน IE
อันที่จริง ฉันรวบรวมประเด็นความรู้เล็กๆ น้อยๆ และแนวทางแก้ไขบนอินเทอร์เน็ต แล้วรวมประเด็นหลักๆ เข้าด้วยกัน
1. IE input type=ภาพตัวอย่างไฟล์ต้องใช้ IE filter css
progid: DXImageTransform.Microsoft.AlphaImageLoader
chrome/firefox ใช้ตัวอ่านไฟล์ของ File api
2. ในการหมุนรูปภาพ IE จะใช้ตัวกรองของ progid:DXImageTransform.Microsoft.Matrix (ตัวกรองสามารถใช้ร่วมกันและคั่นด้วยช่องว่าง)
chrome/firefox ใช้ canvas
3. ในการอัปโหลดภาพ ฉันใช้แบบฟอร์มใน iframe ที่มองไม่เห็นเพื่อเพิ่ม input[type=file] แบบไดนามิกเพื่อให้บรรลุเป้าหมายนี้ Chrome/firefox สามารถใช้ xhr ได้ แต่ฉันขี้เกียจเกินกว่าจะแก้ไขมัน
4. ในการอัปโหลดภาพโดยไม่ต้องรีเฟรชหน้า และเพื่อให้สามารถเลือกไฟล์ซ้ำๆ ได้ iframe จะถูกนำมาใช้เพื่อรักษารายการอินพุต[type=file] ซึ่งค่อนข้างฉลาด
คุณสามารถอ้างอิงถึงโค้ดด้านล่างนี้ ซึ่งส่วนใหญ่เป็น html หลัก จากนั้น iframe html สองตัวที่ส่งคืนโดยเซิร์ฟเวอร์ที่อัปโหลดคือชื่อไฟล์ของไฟล์ที่อัปโหลดสำเร็จ ซึ่งใช้ในการลบภาพตัวอย่าง
คัดลอกรหัสรหัสดังต่อไปนี้:
// อัปโหลดการโทรกลับ
// resultList -> ['file1', 'file2'] คือชื่อไฟล์ที่อัพโหลดสำเร็จ
var uploadCallback = ฟังก์ชั่น (รายการผลลัพธ์) {
console.log(JSON.stringify(รายการผลลัพธ์));
วาร์ i = 0;
สำหรับ(; i < resultList.length; i++){
ดัชนี var = resultList[i].substr('file'.length);
$(':ช่องทำเครื่องหมาย[value=' + ดัชนี + ']').parent().parent().remove();
-
-
$(ฟังก์ชั่น(){
//บันทึกมุมการหมุนของภาพเพื่อให้สามารถส่งไปยังเซิร์ฟเวอร์เพื่อประมวลผลได้
varrotAng = {};
// Serial Number ที่ใช้สำหรับการตั้งชื่อต่อท้าย
วาร์ซี = 0;
// ถ้าเป็น chrome/ff คุณต้องใช้ไฟล์ api เพื่อสร้าง img
var genImgTpl = ฟังก์ชั่น (อินพุต, ดัชนี) {
กลับ '<img src="/webx/public/1.png" id="img' + ดัชนี + '" />';
-
var readImgFromInput = ฟังก์ชั่น (_input, ดัชนี) {
var inputDom = _input[0];
//โครเมี่ยม/ff
ถ้า(inputDom['ไฟล์']){
var reader = new FileReader();
reader.onload = ฟังก์ชั่น (e) {
$('img.main:last').attr({src : e.target.result});
-
reader.readAsDataURL(inputDom['ไฟล์'][0]);
}อื่น{
var src = _input[0].ค่า;
var imgDom = $('#img' + ดัชนี);
imgDom.attr('src-old', src);
imgDom.css({
ลอย: 'ซ้าย'
ตำแหน่ง: 'ญาติ',
ล้น: 'ซ่อน',
ความกว้าง: '195px',
ความสูง: '195px'
-
imgDom.css({'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=/"" + src + "/")"});
-
-
var showImg = ฟังก์ชั่น (_input) {
ดัชนี var = ++cc;
_input.addClass('ซ่อน');
_input.attr('ชื่อ', 'ไฟล์' + ดัชนี);
_input.attr('ดัชนีข้อมูล', ดัชนี);
var iframeWin = $('#choose')[0].contentWindow;
iframeWin.addInput(_input);
var tpl = '<div>' + genImgTpl(_input, ดัชนี) +
'<span><input type="ช่องทำเครื่องหมาย" value="' + ดัชนี + '" ตรวจสอบแล้ว = "true" /></span>' +
'<span><img src="img/rightBtn.png" /></span>' +
'</div>';
$('#imgDiv').ผนวก(tpl);
readImgFromInput(_input, ดัชนี);
-
var addAnother = ฟังก์ชั่น(){
$('#uploadBtn').before('<input type="file" name="file" />');
-
// การเชื่อมโยงเหตุการณ์ของอินพุต [type=file]
$('#uploadDiv input').live('change', function(){
เส้นทาง var = this.value;
ถ้า(!เส้นทาง){
กลับ;
-
showImg($(นี้));
เพิ่มอีกหนึ่ง();
-
// คุณสามารถลบอินพุตระหว่างช่องทำเครื่องหมายได้
// $('#imgDiv input:checkbox').live('change', function(){
// var isChecked = $(this).is(':checked');
// console.log(isChecked);
-
$('#imgDiv span.turn-right').live('คลิก', function(){
//มุมของการหมุนครั้งล่าสุด
ดัชนี var = $(นี้).siblings('span.choose').find('input').val();
var oldAng = หมุน [ดัชนี] ||. 0;
var newAng = oldAng + 90;
RotAng[ดัชนี] = newAng;
$('#img' + ดัชนี).หมุน(90);
-
// เมื่อส่งแบบฟอร์มแล้ว ให้ลบอินพุตที่ไม่ได้เลือก [type=file] ตามช่องทำเครื่องหมาย
$('#uploadBtn').คลิก(ฟังก์ชั่น(){
var ที่เลือกNum = $('#imgDiv input:checkbox').filter(':checked').length;
ถ้า(!choosedNum){
alert('กรุณาเลือกไฟล์ที่จะอัพโหลด!');
กลับเท็จ;
-
//อาร์เรย์หมายเลขซีเรียลที่เลือก
var ที่เลือกIndexList = $('#imgDiv input:checkbox').filter(':checked').map(function(){
ส่งคืน this.value;
}).รับ();
// สอง iframe หนึ่งอินพุต [type=file] เพื่อบันทึกการเลือก
// หนึ่งอันสำหรับการอัพโหลดแบบฟอร์ม
var uploadIframe = $('#upload')[0].contentWindow;
var chooseIframe = $('#choose')[0].contentWindow;
วาร์ i = 0;
สำหรับ(; i < chooseIndexList.length; i++){
ดัชนี var = เลือกIndexList[i];
var inputFile = chooseIframe.$('#uploadDiv input').filter('[data-index=' + ดัชนี + ']');
uploadIframe.$('#uploadForm').append(inputFile);
// องศาการหมุน
var ang = rotAng [ดัชนี] ||. 0;
ถ้า(อ่าง% 360 != 0){
var tplInput = '<input type="hide" name="ang' + index + '" value="' + ang + '" />';
uploadIframe.$('#uploadForm').ผนวก(tplInput);
-
-
uploadIframe.doUpload();
กลับเท็จ;
-
-
ไม่มีปัญหาในการทดสอบใน IE7, 8, 9 และ chrome