الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

لدي مشكلة في كود تحميل صورة

بدأه Mouhamed Saleem Zayat في 8 أكتوبر 2010 · 4 رد · 773 مشاهدة · في قسم البرمجة بــ Javascript
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

السلام عليكم ورحمة الله وبركاته,,,

إخوتي أعضاء الفريق العربي للبرمجة.

أعمل على تطبيق يعمل على الإنترنت يتطلب هذا التطبيق إظهار الصورة التي قام المستخدم بتحميلها في إحدى مراحله قمت بكتابة الكود التالي, حيث يقوم هذ الكود بفحص نوع الملف ومن ثم إسناد قيمته إلى كائن الصورة الذي قمت بتخصيصه في الصفحة.

الكود يعمل حتى لحظة الإنساد لكن الصفحة لا تقوم بإظهار أي شيء, أرجو المساعدة.

السكريبت الخاص بتحميل الصورة:

<script type="text/javascript">
var fileTypes=["bmp","gif","png","jpg","jpeg"];
var imageName = "centerimg";
var globalPic;
var defaultPic="/Kassarlogy/img/CPanel/Calender_128.png";
var maxWidth=250;
var maxHeight=250;

function preview(what){
  var source=what.value;
  var ext=source.substring(source.lastIndexOf(".")+1,source.length).toLowerCase();

  for (var i=0; i<fileTypes.length; i++) if (fileTypes==ext) break;

  globalPic = new Image(); 
  if (i < fileTypes.length) {
   globalPic.src = source;
   //alert("تم تحميل الملف\n\n");
  }
  else {
  //globalPic.src=defaultPic;
  alert("لن تستطيع تحميل هذا الملف\n:رجاء قم بتحميل الصور ذات الإمتدادات التالية\n\n"+fileTypes.join(", "));
  }
   setTimeout("applyChanges()",200);
}
function applyChanges(){
  //alert("بداية تابع التحميل\n\n");
  //var field=document.getElementById(outImage);
    var imageField = document.images[imageName];
  if(imageField != null){
   var x=parseInt(globalPic.width);
   var y=parseInt(globalPic.height);

   if (x>maxWidth) {
    y*=maxWidth/x;
    x=maxWidth;
   }
   if (y>maxHeight) {
    x*=maxHeight/y;
    y=maxHeight;
   }

   //field.style.display=( x < 1 || y < 1 )?"none":"";
   imageField.style.display=( x < 1 || y < 1 )?"none":"";
   //field.src = globalPic.src;
   //field.width=x;
   //field.height=y;
   imageField.srd = globalPic.src; 
   document.images[imageName].src = globalPic.src;
   //document.images[imageName].refresh(); 
  }
}
</script>

الكود الخاص بنموذج الصفحة:

<input style="width:256px" type="file" name="img" id="picField"  onchange="preview(this)" />
<div align=\"center\">صورة المركز<br /><img  name="centerimg" id="centerimg" src="Calender_128.png" border="1" width="250" height="250"> </div>

موقع قصة الإسلام17043_image002.jpg

#2

السلام عليكم ورحمة الله

المشكلة التي تواجهها أخي واجهتها سابقا و هي بحسب ما اذكر موجودة مع FireFox (باصدار معين أو بجميع اصداراته)

المشكلة هي أنه عند عرض الـ Value لـ input من نوع file

لا يعرض المسار الكامل و إنما يعرض فقط اسم الملف (و تم جعلها هكذا لأمور الحماية بحسب ما اذكر أني ذلك قرأت في موقع mozilla)

بالتالي فأنت في الكود الخاص بك يضع فقط اسم الملف في الـ Src الخاص بالصورة و الصورة لا تكون موجودة في نفس الدليل (المجلد) مما يسبب عدم ظهورها

الآن دعنا نتطرق لحل هذه المشكلة

عليك بالعمل مع : getAsDataURL

أي أبقي على الكود الخاص بك كما هو ولكن اضف هذا السطر :

var sourcee=what.files[0].getAsDataURL();

و عدل هذا السطر :

globalPic.src = source;

ليصبح هكذا :

globalPic.src = sourcee;

وهذا هو الكود الخاص بك كاملا بعد التعديل :

<html>
<head>
<script type="text/javascript">
var fileTypes=["bmp","gif","png","jpg","jpeg"];
var imageName = "centerimg";
var globalPic;
var defaultPic="/Kassarlogy/img/CPanel/Calender_128.png";
var maxWidth=250;
var maxHeight=250;

function preview(what){
  var source=what.value;
  var sourcee=what.files[0].getAsDataURL();
  var ext=source.substring(source.lastIndexOf(".")+1,source.length).toLowerCase();

  for (var i=0; i<fileTypes.length; i++) if (fileTypes==ext) break;

  globalPic = new Image(); 
  if (i < fileTypes.length) {
   globalPic.src = sourcee;
   //alert("تم تحميل الملف\n\n");
  }
  else {
  //globalPic.src=defaultPic;
  alert("لن تستطيع تحميل هذا الملف\n:رجاء قم بتحميل الصور ذات الإمتدادات التالية\n\n"+fileTypes.join(", "));
  }
   setTimeout("applyChanges()",200);
}
function applyChanges(){
  //alert("بداية تابع التحميل\n\n");
  //var field=document.getElementById(outImage);
	var imageField = document.images[imageName];
  if(imageField != null){
   var x=parseInt(globalPic.width);
   var y=parseInt(globalPic.height);

   if (x>maxWidth) {
	y*=maxWidth/x;
	x=maxWidth;
   }
   if (y>maxHeight) {
	x*=maxHeight/y;
	y=maxHeight;
   }

   //field.style.display=( x < 1 || y < 1 )?"none":"";
   imageField.style.display=( x < 1 || y < 1 )?"none":"";
   //field.src = globalPic.src;
   //field.width=x;
   //field.height=y;
   imageField.srd = globalPic.src; 
   document.images[imageName].src = globalPic.src;
   //document.images[imageName].refresh(); 
  }
}
</script>
</head>
<body>

<input style="width:256px" type="file" name="img" id="picField"  onchange="preview(this)" />
<div align=\"center\">صورة المركز<br /><img  name="centerimg" id="centerimg" src="02.jpg" border="1" width="250" height="250"> </div>
</body>
</html>

جربه و أخبرنا بالنتيجة

بتوفيق الله..

تم تعديل هذه المشاركة بواسطة MoHaMMaD Pro في 10 أكتوبر 2010 في 00:40

Everything will be fine when we TALK LESS, DO MORE


#3

أخي العزيز MoHaMMaD Pro شكراً لك على معلوماتك القيمة, لكن للتوضيح فإنني أتعامل مع متصفح IE8 على نظام تشغيل Widows 7 ومن أجل زيادة التأكد أن الموضوع ليس له علاقة بالمتصفح قمت بتنزيل بتجربة الكود على متصفح Opera 10.61 لكن النتيجة كما هي يقوم المتصفح من خلال الكود القديم بمسح الصورة الإفتراضية أما من خلال الكود الذي قمت فاضلاً بكتابته فليس له أي تأثير على الصفحة .:wacko:. :blink:.:unsure:.

موقع قصة الإسلام17043_image002.jpg

#4

أخي أنا لم اتطرق للـ IE ﻷن الكود الخاص بك من المفترض أنه يعمل عليه بشكل جيد ولكنه لن يعمل على Firefox ولا على Chrome باصداراتهم الحديثة

بالنسبة لعدم عمله على الـ IE

فهل الصفحة لديك موجودة ضمن apache server و تقوم باستدعائها هكذا مثلا: 

http://localhost/test.html

إن كان كذلك فمشكلتك هي في اعدادات الـ Security الخاصة بالمتصفح (IE)

لقد قمت بتجربة الكود الخاص بك على جهاز عليه Windows 7 و عند فتح الصفحة بالضغط عليها مباشرة (صفحة HTML طبعاً) فإن الكود يعمل على الـ IE بشكل ممتاز أما عند استدعائها تحت localhost

فإنه يحدث كما تذكر أنت يقوم بمسح الصورة ولا يظهر شيء

أخبرني بالطريقة التي تستدعي الصفحة بها

و إن كنت تستدعيها تحت 

http://localhost/

فما عليك إلا الدخول إلى :

Internet options -> Security -> trusted sites

اضغط على زر Site وقم باضافة http://localhost

و سيعمل الكود بشكل جيد بإذن الله

بالنسبة للـ opera فلا أعلم بالضبط ما المشكلة معه قد تكون المشكلة هي ذات المشكلة الموجودة في Firefox و Chrome

قم بطباعة المتحول source في متصفح الـ Opera لترى إن كان يقوم بطباعة المسار كامل أم يطبع فقط اسم الصورة بدون باقي المسار

ليعمل الكود على جميع المصتفحات جرب الكود التالي :

<html>
<head>
<script type="text/javascript">
var fileTypes=["bmp","gif","png","jpg","jpeg"];
var imageName = "centerimg";
var globalPic;
var defaultPic="/Kassarlogy/img/CPanel/Calender_128.png";
var maxWidth=250;
var maxHeight=250;

function preview(what){
  var source=what.value;
 var sourcee=what.files[0].getAsDataURL();
  var ext=source.substring(source.lastIndexOf(".")+1,source.length).toLowerCase();

  for (var i=0; i<fileTypes.length; i++) if (fileTypes==ext) break;

  globalPic = new Image(); 
  if (i < fileTypes.length) {
	try{
	globalPic.src=sourcee;
	}catch(err){
	globalPic.src=source;
	}
   //alert("تم تحميل الملف\n\n");
  }
  else {
  //globalPic.src=defaultPic;
  alert("لن تستطيع تحميل هذا الملف\n:رجاء قم بتحميل الصور ذات الإمتدادات التالية\n\n"+fileTypes.join(", "));
  }
   setTimeout("applyChanges()",200);
}
function applyChanges(){
  //alert("بداية تابع التحميل\n\n");
  //var field=document.getElementById(outImage);
	var imageField = document.images[imageName];
  if(imageField != null){
   var x=parseInt(globalPic.width);
   var y=parseInt(globalPic.height);

   if (x>maxWidth) {
	y*=maxWidth/x;
	x=maxWidth;
   }
   if (y>maxHeight) {
	x*=maxHeight/y;
	y=maxHeight;
   }

   //field.style.display=( x < 1 || y < 1 )?"none":"";
   imageField.style.display=( x < 1 || y < 1 )?"none":"";
   //field.src = globalPic.src;
   //field.width=x;
   //field.height=y;
   imageField.srd = globalPic.src; 
   document.images[imageName].src = globalPic.src;
   //document.images[imageName].refresh(); 
  }
}
</script>
</head>
<body>

<input style="width:256px" type="file" name="img" id="picField"  onchange="preview(this)" />
<div align=\"center\">صورة المركز<br /><img  name="centerimg" id="centerimg" src="02.jpg" border="1" width="250" height="250"> </div>
</body>
</html>

بالتوفيق أخي الكريم..

تم تعديل هذه المشاركة بواسطة MoHaMMaD Pro في 10 أكتوبر 2010 في 00:44

Everything will be fine when we TALK LESS, DO MORE


#5

الأخوة أعضاء الفريق العربي للبرمجة,,,

السلام عليكم ورحمة الله وبركاته:

شكرأ جزيلا على الرد الذي قمت بكتابته حول هذا الموضوع بالفعل المشكلة تكمن في اعدادات الـ Security الخاصة بالمتصفح (IE), قمت بإضافة http://localhost إلى trusted sites وتم حل الموضوع :happy: .

موقع قصة الإسلام17043_image002.jpg

مواضيع مشابهة