آموزش های این وب سایت به صورت رایگان در دسترس است. اطلاعات بیشتر
بروز خطا
   [message]
اشتراک در سوال
رای ها
[dataList]

آپلود عکس با جاوا اسکریپت

perin  9 سال پیش  9 سال پیش
0 0

سلام وقتتون بخیر دوستان و اساتید گرامی

من میخوام  امکان آپلود چنتا عکس و تو سایت بزارم با جاوا اسکریپت از کد های زیر استفاده کردم که عکس و قبل آپلود نمایش بده.

الان نمیدونم این فایله کجا میره و چطوری بهش  دسترسی پیدا کنم وچطوری آپلودش کنم.

ممنون میشم اگه کسی بتونه راهنماییم کنه.

 <img class="upload-pic" src="" style="width: 100px;height: 100px" />
<div class="upload-button">Upload Image</div>
<input class="file-upload" type="file" accept="image/*"/>


  <script>
 $(function(){

        var readURL = function(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                   $('.upload-pic').attr('src', e.target.result);

                }
                reader.readAsDataURL(input.files[0]);
         
            }
        }

        $(".file-upload").on('change', function(){
            readURL(this);

        });

        $(".upload-button").on('click', function() {
            $(".file-upload").click();
        });
</script>
+1 0
لینک (9 سال پیش)
 برای این سوال 1 پاسخ وجود دارد. مشاهده پاسخ صحیح
پاسخ به سوال 
gadolf  9 سال پیش
+1 0
 پاسخ صحیح

این کد HTMl:

<!DOCTYPE html>
<html>
<head>
   <link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
   <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
   <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
   <meta charset=utf-8 />
<title>JS Bin</title>

<style>
   article, aside, figure, footer, header, hgroup, 
   menu, nav, section { display: block; }
</style>
</head>

<body>
   <input type='file' onchange="readURL(this);" />
   <img id="blah" src="آدرس عکسی که قراره عکس شما قبل از آپلود شدن نمایش داده بشه" alt="your image" />
</body>

</html>

اینم کد جاوااسکریپت:

function readURL(input) {
 if (input.files && input.files[0]) {
  var reader = new FileReader();

  reader.onload = function (e) {
   $('#blah')
   .attr('src', e.target.result)
   .width(150)
   .height(200);
   };

  reader.readAsDataURL(input.files[0]);
  }
}

منبع و دمو

0 0
این کد فقط نمایش میده نه؟ آپلود نمیکنه ؟ من میخوام عکس و آپلود کنم. (9 سال پیش)
0 0
دوستان و اساتید لطفا راهنماییم کنید کد های بالا فقط عکس و نمایش میدهند من میخوام عکس و آپلود بشه و امکان حذف هم داشته باشه پلاگین های مختلفی و نگاه کردم ولی نتونستم استفاده کنم یکیش fine-uploader بود.ممنون میشم راهنماییم کنید. (9 سال پیش)
+1 0
سلام از کتاب خونه های اماده استفاده کن خیلی زیباتر راحتر و پر از امکانات هستند. (9 سال پیش)
پاسخگویی و مشاهده پاسخ های این سوال تنها برای اعضای ویژه سایت امکان پذیر است .
چنانچه تمایل دارید به همه بخش ها دسترسی داشته باشید میتوانید از این بخش لایسنس این آموزش را خریداری نمایید .