لقد قمت بدراسة سيناريوهات العمل التي واجهتها في العمل مع زملائي، وذلك بشكل أساسي من أجل التوافق مع إصدارات IE.
في الواقع، قمت بجمع بعض النقاط والحلول المعرفية التافهة على الإنترنت، ثم قمت بدمجها وأهمها ما يلي:
1. نوع إدخال IE = تتطلب معاينة صورة الملف مرشح IE CSS
progid:DXImageTransform.Microsoft.AlphaImageLoader
يستخدم chrome/firefox قارئ الملفات الخاص بـ File api
2. لتدوير الصورة، يستخدم IE مرشح progid:DXImageTransform.Microsoft.Matrix (يمكن استخدام عوامل التصفية معًا وفصلها بمسافات)
يستخدم الكروم/فايرفوكس قماش
3. لتحميل الصور، أستخدم النموذج الموجود في إطار iframe غير المرئي لإضافة الإدخال[type=file] ديناميكيًا لتحقيق ذلك. يمكن لـ Chrome/firefox استخدام xhr، لكنني كسول جدًا بحيث لا يمكنني تعديله.
4. من أجل تحميل الصور دون تحديث الصفحة، وللتمكن من تحديد الملفات بشكل متكرر، يتم استخدام iframe للاحتفاظ بقائمة الإدخال[type=file]، وهو أمر ذكي للغاية.
يمكنك الرجوع إلى الكود أدناه، وهو في الأساس ملف html رئيسي، ثم البيانات التي يرجعها الخادم الذي تم تحميله هي اسم الملف الذي تم تحميله بنجاح، والذي يستخدم لحذف صورة المعاينة.
انسخ رمز الكود كما يلي:
// تحميل رد الاتصال
// resultList -> ['file1', 'file2'] هو اسم الملف الذي تم تحميله بنجاح
فار تحميلCallback = وظيفة(resultList){
console.log(JSON.stringify(resultList));
فار ط = 0؛
for(;i <resultList.length;i++){
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 = function(_input, Index){
var inputDom = _input[0];
//الكروم/وما يليها
إذا(inputDom['ملفات']){
قارئ var = new FileReader();
قارئ.onload = وظيفة(ه){
$('img.main:last').attr({src : e.target.result});
}
Reader.readAsDataURL(inputDom['files'][0]);
}آخر{
var src = _input[0].value;
var 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('hide');
_input.attr('name', 'file' + Index);
_input.attr('فهرس البيانات', فهرس);
var iframeWin = $('#choose')[0].contentWindow;
iframeWin.addInput(_input);
var tpl = '<div>' + genImgTpl(_input, Index) +
'<span><input type="checkbox" value="' + Index + '" check="true" /></span>' +
'<span><img src="img/rightBtn.png" /></span>' +
'</div>';
$('#imgDiv').append(tpl);
readImgFromInput(_input, Index);
};
فار addAnother = وظيفة(){
$('#uploadBtn').before('<input type="file" name="file" />');
};
// حدث ربط الإدخال[type=file]
$('#uploadDiv input').live('change', function(){
مسار فار = this.value;
إذا (! المسار) {
يعود؛
}
showImg($(هذا));
addAnother();
});
// يمكنك إزالة الإدخال أثناء خانة الاختيار
// $('#imgDiv input:checkbox').live('change', function(){
// var isChecked = $(this).is(':checked');
// console.log(isChecked);
// });
$('#imgDivspan.turn-right').live('click', function(){
// زاوية الدوران الأخير
var Index = $(this).siblings('span.choose').find('input').val();
var oldAng = RotateAng[index] ||0;
فار newAng = oldAng + 90;
RotateAng[index] = newAng;
$('#img' + Index).rotate(90);
});
// عند إرسال النموذج، احذف الإدخال غير المحدد [نوع = ملف] وفقًا لمربع الاختيار
$('#uploadBtn').click(function(){
varchooseNum = $('#imgDiv input:checkbox').filter(':checked').length;
إذا (! تم اختيار الرقم) {
تنبيه ("الرجاء تحديد ملف للتحميل!")؛
عودة كاذبة.
}
// مجموعة الأرقام التسلسلية المحددة
var ChoseIndexList = $('#imgDiv input:checkbox').filter(':checked').map(function(){
إرجاع هذه القيمة؛
}).يحصل()؛
// إطاران iframe، إدخال واحد[type=file] لحفظ التحديد
// واحد لتحميل النموذج
var uploadIframe = $('#upload')[0].contentWindow;
var ChooseIframe = $('#choose')[0].contentWindow;
فار ط = 0؛
for(;i <chooseIndexList.length;i++){
var Index = ChoseIndexList[i];
var inputFile = ChooseIframe.$('#uploadDiv input').filter('[data-index=' + Index + ']');
uploadIframe.$('#uploadForm').append(inputFile);
// درجات الدوران
var ang = RotateAng[index] ||0;
إذا (انج % 360 != 0){
var tplInput = '<input type="hide" name="ang' + Index + '" value="' + ang + '" />';
uploadIframe.$('#uploadForm').append(tplInput);
}
}
uploadIframe.doUpload();
عودة كاذبة.
});
});
لا توجد مشكلة في الاختبار في IE7، 8، 9 والكروم