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

Question

perin 9 سال پیش

آخرین تغییر: 9 سال پیش

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

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

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

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

 <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>

نظرات

MOJTABA 9 سال پیش

لینک

Answer 1

gadolf 9 سال پیش

پاسخ صحیح

این کد 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]);
  }
}

منبع و دمو

نظرات

perin 9 سال پیش

این کد فقط نمایش میده نه؟ آپلود نمیکنه ؟ من میخوام عکس و آپلود کنم.

perin 9 سال پیش

دوستان و اساتید لطفا راهنماییم کنید کد های بالا فقط عکس و نمایش میدهند من میخوام عکس و آپلود بشه و امکان حذف هم داشته باشه پلاگین های مختلفی و نگاه کردم ولی نتونستم استفاده کنم یکیش fine-uploader بود.ممنون میشم راهنماییم کنید.

محمدرضا 9 سال پیش

سلام از کتاب خونه های اماده استفاده کن خیلی زیباتر راحتر و پر از امکانات هستند.

شخصی‌سازی ظاهر

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

نظرات

پاسخ‌ها 1

نظرات