بروز خطا
   [message]
اشتراک در سوال
رای ها
[dataList]
پرسش و پاسخ

آپلود عکس با کلیک بر روی دکمه ی open در فولدر File Upload

مشاهده پاسخ‌ها 2
مدیریت گفتگو
perin 9 سال پیش
آخرین تغییر: 9 سال پیش

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

من میخوام عکس آپلود کنم  اینطوری که با کلیک بر روی دکمه ی  open  در فولدر    File Upload  عکس آپلود بشه و لازم نباشه روی  submit  کلیک کنم

و پروسه ی آپلود فایل هم نمایش داده بشه

الان اصلا نمیدونم قسمت آپلود فایل و چطوری بنویسم  چون تا رو submit  کلیک نکنم   $_FILES  ایجاد نمیشه

دوستان و اساتید ا ممنون میشم راهنماییم کنید

با تشکر

نظرات

پاسخ‌ها 2

مشاهده پاسخ صحیح
سجاد عباسی 9 سال پیش

برای این کار میتونید از کتابخانه jquery  به نام http://www.dropzonejs.com/ یا http://jquery.malsup.com/form/  استفاده کنید.

یه مثال:

$(function() {

    var bar = $('.bar');
    var percent = $('.percent');
    var status = $('#status');

    $('form').ajaxForm({
        beforeSend: function() {
            status.empty();
            var percentVal = '0%';
            bar.width(percentVal);
            percent.html(percentVal);
        },
        uploadProgress: function(event, position, total, percentComplete) {
            var percentVal = percentComplete + '%';
            bar.width(percentVal);
            percent.html(percentVal);
        },
        complete: function(xhr) {
            status.html(xhr.responseText);
        }
    });
});

Html:

<form action="file-echo2.php" method="post" enctype="multipart/form-data">
    <input type="file" name="myfile"><br>
    <input type="submit" value="Upload File to Server">
</form>

<div class="progress">
    <div class="bar"></div >
    <div class="percent">0%</div >
</div>

<div id="status"></div>

یه مثال دیگر: http://talkerscode.com/webtricks/file-upload-progress-bar-using-jquery-and-php.php

نظرات

perin 9 سال پیش
خیلی خیلی ممنونم .واقعا لطف کردین.فقط یه سوال اینکه چطور میتونم بدون کلیک روی submit فایل و ارسال کنم؟ ممنون میشم راهنماییم کنید.
سجاد عباسی 9 سال پیش
 پاسخ صحیح

یه راه  دیگر از کتابخانه https://github.com/hayageek/jquery-upload-file استفاده کنید

یه مثال ساده:

 <!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="http://hayageek.github.io/jQuery-Upload-File/4.0.10/uploadfile.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://hayageek.github.io/jQuery-Upload-File/4.0.10/jquery.uploadfile.min.js"></script>
</head>
<body>
<div id="fileuploader">Upload</div>    
<script>
$(document).ready(function()
{
    $("#fileuploader").uploadFile({
    url:"upload-server.php",
    fileName:"myfile"
    });
});
</script>
</body>
</html>

نظرات

پاسخگویی و مشاهده پاسخ های این سوال تنها برای اعضای ویژه سایت امکان پذیر است .
چنانچه تمایل دارید به همه بخش ها دسترسی داشته باشید میتوانید از این بخش لایسنس این آموزش را خریداری نمایید .