আমি কীভাবে স্বয়ংক্রিয়ভাবে আপলোড বোতাম টিপানোর চেয়ে ফাইল নির্বাচনে চিত্রগুলি আপলোড করতে পারি?

Question

ব্যবহারকারীদের ছবি আপলোড করার অনুমতি দেওয়ার জন্য আমার কাছে একটি কাস্টম সামগ্রী রয়েছে। আমি ইন্টারফেসটি যতটা সম্ভব সহজ করার চেষ্টা করছি।

সামগ্রীর ধরণে একটি একক চিত্র ক্ষেত্র রয়েছে। এটি কাজ করে, তবে কিছু ব্যবহারকারী বুঝতে পারে না যে চিত্রটি আপলোড করা হয়েছে কারণ তারা নির্বাচনের পরে তা দেখে না (আপলোডের পূর্বরূপ দেখতে, আপলোড বোতামটি টিপতে হবে)। আপলোড বাটনটি এড়িয়ে যাওয়ার / স্বয়ংক্রিয়ভাবে চাপ দেওয়ার কোনও উপায় আছে যাতে কোনও ফাইল বাছাইয়ের সাথে সাথে কোনও চিত্র প্রদর্শিত হয়?

অন্য কথায়, নিম্নলিখিত চিত্রের পরিবর্তে (যেখানে পথ দেখানো হয়েছে তবে ফায়ারফক্সে পড়ার পক্ষে কঠিন) ফাইল নির্বাচন করার সাথে সাথে:

আমি চাই প্রাকদর্শন প্রদর্শনটি এভাবে প্রদর্শিত হোক:

Answer 1

আপনি থিম স্তরের চেয়ে মডিউল স্তরে এটি করা ভাল, কারণ জেএস প্রশাসক পৃষ্ঠাগুলির জন্য অন্যথায় কার্যকর হবে না (অবশ্যই আপনি উভয়ের জন্য একই থিম ব্যবহার করছেন)।

সিস্টেম-বিস্তৃত এই কার্যকারিতাটি সরবরাহ করতে এখানে একটি ছোট মডিউল রয়েছে:

ফাইল: auto_upload.info

name = Auto Upload
description = Removes the need for users to press the 'Upload' button for AJAX file uploads.
core = 7.x
dependencies[] = file

ফাইল: অটো_আপলোড.জেএস:

(function ($) {
  Drupal.behaviors.autoUpload = {
    attach: function (context, settings) {
      $('form', context).delegate('input.form-file', 'change', function() {  
        $(this).next('input[type="submit"]').mousedown();
      }); 
    }
  };
})(jQuery);

ফাইল: অটো_আপলোড.মডিউল

function auto_upload_init() {
  drupal_add_js(drupal_get_path('module', 'auto_upload') . '/auto_upload.js');
}

একবার আপনি অ্যাজ্যাক্স-আইআইডিযুক্ত সমস্ত ফাইল ইনপুটগুলি মডিউল ইনস্টল করলে (যেমন 'আপডেট' বোতাম রয়েছে তাদের) প্রভাবিত হবে ... ফাইলটি নির্বাচনের পরে আপনাকে আর 'আপলোড' বোতাম টিপতে হবে না ।

delegate()পদ্ধতিটি ব্যবহার করে এটি একাধিক আপলোডের অনুমতি দেয় এমন ফাইল ক্ষেত্রগুলির জন্য এবং অ্যাজেএক্স অনুরোধের ফলাফল হিসাবে পৃষ্ঠাতে লোড হওয়া ক্ষেত্রগুলির জন্যও পুরোপুরি কাজ করবে।

আমি এটি ক্রোম, সাফারি এবং ফায়ারফক্সে পরীক্ষা করেছি এবং এটি একটি ট্রিট কাজ করে :)

পাদটীকা : আপনার সাইটটি jQuery 1.7 ব্যবহার করছে (সম্ভবত খুব সম্ভবত সম্ভাব্য) ইভেন্টে আপনার সেই on()পদ্ধতিটি ব্যবহার করা উচিত , যা ছাড়িয়ে গেছে delegate()।

আপডেট করুন আমি এই মডিউলটির জন্য একটি স্যান্ডবক্স প্রকল্প তৈরি করেছি ।

Comments

প্রতিনিধি () সম্পর্কে বিটের জন্য ধন্যবাদ, খুব দরকারী জ্ঞান!

— জনাথন এলমোর

@ ক্লাইভ সত্যিই দুর্দান্ত! আপনি কি এটি স্যান্ডবক্স হিসাবে প্রকাশের বিষয়টি বিবেচনা করবেন? যদি না হয়, আমি যদি কিছু মনে করি?

— লেথেরিয়ান

আমি যদি আবার সক্ষম হয়ে উঠতে পারি তবে) অপ্রয়োজনীয় সদৃশ প্রচেষ্টা রোধ করতে আমি কেবল এটিই উল্লেখ করতে চাই যে আজাক্স এবং অ্যাজাক্স যে কোনও ফর্মের জন্য জমা দেয় , উভয়ই কিছু সম্পর্কিত যা related

— লেথারিয়ন

@ ক্লাইভ কোডটি পুরোপুরি কার্যকর হয় যদি আমার কাছে jQuery আপডেট মডিউল ইনস্টল থাকে (এমনকি jQuery সংস্করণটি 1.7 তে সেট করা আছে তবে এখনও 'অন'-এর পরিবর্তে' প্রতিনিধি 'রয়েছে)। তবে আমি যদি jQuery আপডেট মডিউলটি অক্ষম করি তবে স্বয়ংক্রিয় আপলোড শুরু হয় তবে শেষ হয় না, এটি অফুরন্ত আপলোড প্রক্রিয়াতে চলে যায়। আপনি কি নিশ্চিত করতে পারেন যে jQuery আপডেট প্রয়োজন?

— deinqwertz

@ দেইনকোয়ার্টজ হওয়া উচিত নয়, ১.৪.২ delegate()এবং ড্রুপাল sh টি জাহাজকে ১.৪.৪ সহ যুক্ত করা হয়েছিল। আমি নিশ্চিত যে স্টক jQuery ইনস্টল করা সহ বেশ কয়েকটি পুরানো সাইটগুলিতে আমার এই কাজটি ঠিক আছে

— ক্লাইভ

Answer 2

এই পরিস্থিতিতে যে কারও জন্য, অটোআপলোড মডিউলটি ব্যবহার করে দেখুন ।

অটোআপলোড হ'ল একটি ইউজার ইন্টারফেস (ইউআই) বর্ধন যা কোনও ব্যবহারকারী দ্বারা প্রয়োজনীয় ক্লিকের সংখ্যা হ্রাস করে ফাইলগুলির স্বয়ংক্রিয় আপলোড শুরু করে।

বর্তমানে, ব্যবহারকারীদের অবশ্যই ফাইলগুলি নির্বাচন করতে হবে, তারপরে "আপলোড" বোতামটি টিপুন। আমরা দেখতে পেয়েছি যে ব্যবহারকারীরা প্রায়শই বুঝতে পারবেন না যে একটি বোতাম টিপুন প্রয়োজনীয় এবং ভুলক্রমে তাদের চিত্রটি যখন তা না হয় তখন আপলোড করা হবে।

এটি বর্তমানে ডি 6 এবং ডি 7 এর জন্য উপলব্ধ

Answer 3

দ্রুপাল ঘ

প্রস্তুত আপনার jQuery ডকুমেন্ট এ জাতীয় কিছু চেষ্টা করুন

jQuery('.form-file').change( function() {   
  jQuery(this).next('.ahah-processed').click();
}); 

পেজ.টিপিএল বা নোড.টিপিএলে নিম্নলিখিতটি আটকে দিন

drupal_add_js("jQuery(document).ready(function() {
  jQuery('.form-file').change( function() { 
    jQuery(this).next('.ahah-processed').click();
  });   
});", 'inline');

এটি অর্জনের জন্য কোনও দ্রুপাল উপায় সম্পর্কে আমি অপরিচিত।

বেহালা

Comments

দুর্ভাগ্যক্রমে, আমি jQuery কীভাবে ব্যবহার করব তা জানি না। এই কাজ করার জন্য অন্য উপায় আছে কি?

— প্যাট্রিক কেনি

@ পেট্রিক কেনি, আমার সম্পাদনা দেখুন। এটি অর্জনের জন্য কোনও দ্রুপাল উপায় সম্পর্কে আমি অপরিচিত।

— নিক্সম্যাক

আপনার $ কে jQuery এর সাথে প্রতিস্থাপন করা উচিত ... নীচে ক্লাইভের উত্তরটি দেখুন, বা কেবল উপরের মত পরিবর্তিত করুন: drupal_add_js ("jQuery (দস্তাবেজ)। প্রস্তুতি (ফাংশন () {jQuery ('। ফর্ম-ফাইল')। পরিবর্তন (ফাংশন () {jQuery (এটি)। প্রাক্তন ('আহা-প্রক্রিয়াজাত')। ক্লিক করুন ();});}); ", 'ইনলাইন');

— জনাথন এলমোর

@ জোনাথন এলমোর, হ্যাঁ এটি ডি 7 তে কাজ করবে না। সম্পাদিত

— নিক্সম্যাক

@ নিখিলমোহন আরও কয়েকটি সমস্যা রয়েছে: .ahah-processedএটি একটি দ্রুপাল class শ্রেণির নাম, এবং click()পদ্ধতিটি আসলে কোনও কারণে এই বোতামগুলিতে ক্লিক করার অনুরোধ করে না; mousedown()পরিবর্তে আপনাকে ব্যবহার করতে হবে :)

— ক্লাইভ

Answer 4

আপনি এটি ব্যবহার করে অর্জন করতে পারেন on()। delegate()অবচয় করা হয়েছে।

(function ($) {
  Drupal.behaviors.autoUpload = {
    attach: function (context, settings) {
      $('form', context).on('change', 'input.form-file', function() {  
        $(this).next('input[type="submit"]').mousedown();
      }); 
    }
  };
})(jQuery);

Answer 5

কটাক্ষপাত Plupload ইন্টিগ্রেশন মডিউল।

একাধিক ফাইল এবং দ্রুপাল আপলোড করতে প্লুপলোড লোড উইজেটের মধ্যে সংহতকরণ সরবরাহ করে । প্লুপলোড একটি জিপিএল লাইসেন্সযুক্ত একাধিক ফাইল আপলোড সরঞ্জাম যা ক্লায়েন্ট কম্পিউটারের ক্ষমতার উপর নির্ভর করে ফ্ল্যাশ, গিয়ার্স, এইচটিএমএল 5, সিলভারলাইট, ব্রাউজারপ্লাস এবং এইচটিএমএল 4 এ উইজেট উপস্থাপন করতে পারে।

Answer 6

আপনি যদি এজেএক্স ফর্মটিতে ফাইল আপলোড ক্ষেত্র ব্যবহার করেন - এটি জমা দেওয়ার পরে আপনি অটো-আপলোড কার্যকারিতাটি শিথিল করতে পারেন ( https://drupal.stackexchange.com/a/31453/7313 দেখুন )

ঠিক করতে - এই স্ক্রিপ্টটি ব্যবহার করুন

(function($) {

Drupal.behaviors.autoUpload = {
  attach: function (context, settings) {
    $('input.form-file', context).once(function() {
      $(this).change(function() {
        $(this).parent().find('input[type="submit"]').mousedown();
      });
    });
  }
};

})(jQuery);

Comments

আমার ক্ষেত্রে, এটি ফর্মটির কারণে পটভূমিতে অবিচ্ছিন্নভাবে ফাইল ক্ষেত্রগুলির জন্য এজেএক্স অনুরোধগুলি প্রেরণ করেছিল। এছাড়াও এটি খালি জমিতে একটি লোডিং থ্রোবার দেখায়।

— Елин Й.