آپلود فایل در php با اژاکس بدون action

PHP -
2 هفته پیش
توسط Davood آپدیت شد
میثم ( 1800 تجربه )
2 هفته پیش

سلام.
توی تمامی آپلودرهایی که با آژاکس کار می کنن باید توی فرم عبارت action="upload.php" قید بشه که در اون upload.php اسم فایل php هست که عملیات چک کردن فایل و آپلود روی سرور رو انجام میده.
من فکر میکنم این یه جورایی باگ هست و کاربران اسم فایل php درگیر رو پیدا می کنن و احتمالا برای حملات هک راحتتر باشن.
مثلا این یه آموزش در مورد نحوه آپلود فایل با آژاکس هست :
https://daskhat.ir/upload-file-in-php/
کسی روشی به ذهنش میرسه که بتونیم فایل رو با آژاکس ارسال کنیم اما اسمی از تگ اکشن توی فرم نباشه؟؟؟؟؟
منظورم اینه که بتونیم درصد پیشرفت آپلود رو به کاربر نشون بدیم.

سیدعلی موسوی ( 86456 تجربه )
2 هفته پیش
تخصص : سی شارپ و پی اچ پی

به نظرم من سه کار رو باید قبل از دریافت فایل انجام بدین
یکی فرم تون باید توکن داشته باشه و دومی کاربر احراز هویت شده باشه و سومی هدر درخواست رو بررسی کنید

برای ارسال یک فرم بدون نوشتن action در فرم تون اول باس برای فرم تون یک ID تعریف کنین سپس با جیکوری اون تگ رو بگیرین و دکمه SUBMIT اون فرم رو اجرا کنید برای اینکه بدون ریفرش انجام بشه میتونین e.preventDefault(); براش تویی کد جیکوری تون ست کنین

یعنی به فرض مثال من چنین فرمی دارم

<form id="formUpload" enctype="multipart/form-data">
  <div class="form-group">
    <label>عکس</label>
    <input type="file" class="form-control">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

بعدش با کدهای جیکوری اینجوری سلکتش میکنم و کار رو انجام میدم اگر هم اوکی بود تویی رسپانس دریافتی هرکاری که بخوام میکنم صفحه رو ریلود میکنم یا تگ IMG رو میگریم و توش عکس رو لود میکنم و ..

$(document).ready(function() {
    $("formUpload").on('submit', (function(e) {
        e.preventDefault();
        $.ajax({
            type: "post",
            url: "/upload",
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData: false,
            success: function(data) {

            },
            error: function(error) {

            }

        });

    }));
});
میثم ( 1800 تجربه )
2 هفته پیش

سلام.
جناب @juza66
عزیز متشکرم . اما این وسط یه مسئله دیگه هم به وجود میاد و اطلاع کاربر از محل آپلود فایل هست. url: "/upload"
این قضیه رو چطور حل کنیم.
الان من میتونم فرم با فیلد اپلود درست کنم و در اون هیچ تگ action یا .... وجود نداشته باشه که اطلاعاتی در اختیار کاربر قرار بده. اما مشکلش اینه که امکان نمایش درصد پیشرفت آپلود و چک کردن فرمت فایل قبل آپلود رو نداره.
حالا طوری که تحقیق کردم نیاز هست برای داشتن دو مورد ذکر شده از آژاکس استفاده کنیم که مشکلات بالا رو داره.
.......
راستی کار e.preventDefault() دقیقا چی هست؟
نوشتین بدون رفرش فرم ارسال میشه. آیا این برای تمام فرمها قابل استفاده هست؟

سیدعلی موسوی ( 86456 تجربه )
2 هفته پیش
تخصص : سی شارپ و پی اچ پی

اما این وسط یه مسئله دیگه هم به وجود میاد و اطلاع کاربر از محل آپلود فایل هست

خب گفتم : یکی فرم تون باید توکن داشته باشه و دومی کاربر احراز هویت شده باشه و سومی هدر درخواست رو بررسی کنید
اینجوری هرکسی هم ادرس یا فایل رو بدونه نمیتونه کاری کنه چون شما اول احراز هویت کردین، برای فرم تون csrf توکن در نظر گرفتین و سوما هدر درخواست رو چک میکنین که حتمن از سایت خودتون این درخواست داره انجام میشه و ولیدکردن عکس و .. رو هم انجام بدین.

نمایش درصد پیشرفت آپلود و چک کردن فرمت فایل قبل آپلود رو نداره

برای نمایش درصد آپلود کلا باید xhr رو تویی دریافت دیتا از کاربر استفاده کنید سرچ کنید راحت پیدا میکنین

$.ajax({
        type:'POST',
        url: 'ajax/uploadImages',
        data:formData,
        xhr: function() {
                var myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload){
                    myXhr.upload.addEventListener('progress',progress, false);
                }
                return myXhr;
        },
        cache:false,
        contentType: false,
        processData: false,

        success:function(data){
            console.log(data);

          alert('data returned successfully');

        },

        error: function(data){
            console.log(data);
        }
    });

    e.preventDefault();

});

function progress(e){

    if(e.lengthComputable){
        var max = e.total;
        var current = e.loaded;

        var Percentage = (current  100)/max;
        console.log(Percentage);

        if(Percentage >= 100)
        {
           // process completed  
        }
    }  
 }

چک کردن فرمت فایل قبل آپلود رو نداره

خب باید شما سمت سرور فرمت فایل آپلودی رو چک کنین بعدش اگر درست بود ادامه ی کار رو انجام میدین در غیر اینصورت یک error برمیگردونین و تویی error های ایجکس میگیری و به کاربر نشون میدی

راستی کار e.preventDefault() دقیقا چی هست؟

از عملی که به صورت دیفالت و پیش فرض بعد یک رویداد بر روی یک المان باید انجام شه => جلوگیری می کنه

آیا این برای تمام فرمها قابل استفاده هست؟

متوجه نشدم، این برای فرمی هست که id رو گرفتین ، میتونین برای هر فرم این کد رو بنویسین.

Davood ( 24520 تجربه )
2 هفته پیش
تخصص : کارآموز PHP

@adoniya.ir
سلام
سال نو مبارک
اگه مشکلتون از مسیر آپلود همون پوشه ای هست که عکسا توش ریخته میشه اینو رو میتونید با فایل htaccess برا کاربر غیرفعال کنید فایل htaccess رو باز میکنید و داخلش این رو مینویسید

Options -Indexes

این باعث میشه اگر کسی آدرس پوشه رو مستقیما تو url زد فوربیدن براش بیاد

یعنی کلا دایرکتوری لیست رو میبندید

e.preventDefault هم برای جلوگیری از ریلود شدن صفحه بعد از زدن دکمه سابمیت هست زمانی که شما با ajax کار میکنی چون کلا ما از ajax استفاد میکنیم برای جلوگیری از رفرش شدن صفحه زمان سابمیت فرم

برای ارسال پاسخ باید وارد سایت شوید