কোনও চিত্র দ্বারা ইনপুট প্রকার = ফাইল প্রতিস্থাপন করুন

Question 1

অনেক লোকের মতো, আমি কুরুচিপূর্ণ কাস্টমাইজ করতে চাই input type=fileএবং আমি জানি যে এটি কিছু হ্যাক এবং / অথবা ছাড়া করা সম্ভব না javascript। তবে, জিনিসটি আমার ক্ষেত্রে আপলোড ফাইল বোতামগুলি কেবল চিত্র আপলোড করার জন্য ( jpeg | jpg | png | gif ), তাই আমি ভাবছিলাম যে আমি কোনও " clickable" চিত্র ব্যবহার করতে পারি যা ইনপুট টাইপ ফাইল হিসাবে ঠিক কাজ করবে ( কথোপকথন বাক্স এবং জমা দেওয়া পৃষ্ঠায় একই F _FILE) প্রদর্শন করুন।
আমি কিছু কার্যসংক্রান্ত পাওয়া এখানে , এবং এই আকর্ষণীয় এক খুব (কিন্তু ক্রোম = / এ কাজ করে না)।

আপনি যখন আপনার ফাইল বোতামগুলিতে কিছু স্টাইল যুক্ত করতে চান তখন ছেলেরা কী করবেন? যদি আপনার এ সম্পর্কে কোনও মতামত থাকে তবে কেবল উত্তর বোতামটি চাপুন;)

Question 2

এটি আমার পক্ষে সত্যই ভাল কাজ করে:

.image-upload>input {
  display: none;
}

<div class="image-upload">
  <label for="file-input">
    <img src="https://icon-library.net/images/upload-photo-icon/upload-photo-icon-21.jpg"/>
  </label>

  <input id="file-input" type="file" />
</div>

স্নিপেট প্রসারিত করুন

মূলত জন্য লেবেল অ্যাট্রিবিউট এটা তোলে যাতে ট্যাগ ক্লিক নির্দিষ্ট ইনপুট ক্লিক হিসাবে একই ।

এছাড়াও, কোনওটিতে সেট করা ডিসপ্লে সম্পত্তি এটিকে তোলে যাতে ফাইল ইনপুটটি একেবারেই রেন্ডার না হয়, এটিকে সুন্দর এবং পরিষ্কার করে আড়াল করে।

ক্রোমে পরীক্ষিত তবে ওয়েব অনুসারে সমস্ত বড় ব্রাউজারে কাজ করা উচিত। :)

সম্পাদনা: এখানে জেএসফিডেল যুক্ত হয়েছে: https://jsfiddle.net/c5s42vdz/

Question 3

আসলে এটি খাঁটি CSS এ করা যায় এবং এটি বেশ সহজ ...

এইচটিএমএল কোড

<label class="filebutton">
Browse For File!
<span><input type="file" id="myfile" name="myfile"></span>
</label>

সিএসএস স্টাইলস

label.filebutton {
    width:120px;
    height:40px;
    overflow:hidden;
    position:relative;
    background-color:#ccc;
}

label span input {
    z-index: 999;
    line-height: 0;
    font-size: 50px;
    position: absolute;
    top: -2px;
    left: -700px;
    opacity: 0;
    filter: alpha(opacity = 0);
    -ms-filter: "alpha(opacity=0)";
    cursor: pointer;
    _cursor: hand;
    margin: 0;
    padding:0;
}

ধারণাটি হ'ল আপনার লেবেলের ভিতরে একেবারে ইনপুটটি রাখা position ইনপুটটির ফন্টের আকারটি বড় কিছুতে সেট করুন যা "ব্রাউজ" বোতামের আকার বাড়িয়ে তুলবে। এরপরে আপনার লেবেলের পিছনে ইনপুট ব্রাউজ বোতামটি স্থাপন করতে নেতিবাচক বাম / শীর্ষস্থানীয় বৈশিষ্ট্যগুলি ব্যবহার করে কিছু পরীক্ষা এবং ত্রুটি লাগে takes

বোতামটি অবস্থিত করার সময়, আলফাটিকে 1 এ সেট করুন আপনি যখন এটি 0 এ সেট করে শেষ করেছেন (যাতে আপনি কী করছেন তা দেখতে পারেন!)

আপনি ব্রাউজারগুলি জুড়ে পরীক্ষা করেছেন তা নিশ্চিত করুন কারণ তারা সকলেই ইনপুট বোতামটি কিছুটা ভিন্ন আকারের করে দেবে।

Question 4

@ হার্টসেটিংয়ের মাধ্যমে দুর্দান্ত সমাধান, তবে আমি উইন্ডোতে সাফারি (৫.১. with) দিয়ে এটি কাজ করার জন্য কিছু উন্নতি করেছি

.image-upload > input {
  visibility:hidden;
  width:0;
  height:0
}

<div class="image-upload">
  <label for="file-input">
    <img src="https://placehold.it/100/000000/ffffff?text=UPLOAD" style="pointer-events: none"/>
  </label>

  <input id="file-input" type="file" />
</div>

স্নিপেট প্রসারিত করুন

আমি সাফারি ইস্যুটির visibility: hidden, width:0পরিবর্তে ব্যবহার করেছি এবং ট্যাগ display: noneযুক্ত pointer-events: noneকরে imgইনপুট ফাইলের টাইপ ট্যাগটি যদি ফরমে ট্যাগে থাকে তবে তা কাজ করে তোলে।

সমস্ত বড় ব্রাউজারে আমার জন্য কাজ করছে বলে মনে হচ্ছে।

আশা করি এটি কাউকে সাহায্য করবে।

Question 5

আমি যদি আপনার কথাটি পাই তবে এটি আমার পদ্ধতি

এইচটিএমএল

<label for="FileInput">
    <img src="tools/img/upload2.png" style="cursor:pointer" onmouseover="this.src='tools/img/upload.png'" onmouseout="this.src='tools/img/upload2.png'" alt="Injaz Msila" style="float:right;margin:7px" />
</label>
<form action="upload.php">
    <input type="file" id="FileInput" style="cursor: pointer;  display: none"/>
    <input type="submit" id="Up" style="display: none;" />
</form>

jQuery

<script type="text/javascript">
    $( "#FileInput" ).change(function() {
      $( "#Up" ).click();
    });
</script>

Question 6

আমি ব্যবহার করেন SWFUpload বা Uploadify । তাদের ফ্ল্যাশ দরকার তবে ঝামেলা ছাড়াই আপনি যা চান তা করেন।

যে কোনও <input type="file">ভিত্তিযুক্ত কাজ যা "ওপেন ফাইল" ডায়ালগটি ট্রিগার করতে চেষ্টা করে প্রকৃত নিয়ন্ত্রণের পরিবর্তে অন্য কোনও কারণে সুরক্ষা কারণে যে কোনও সময় ব্রাউজারগুলি থেকে সরানো যেতে পারে। (আমি এফএফ এবং আইই এর বর্তমান সংস্করণগুলিতে মনে করি , প্রোগ্রামটি প্রোগ্রামিকভাবে সেই ইভেন্টটি আরম্ভ করা আর সম্ভব নয়))

Question 7

এটি সত্যিই সহজ আপনি এটি চেষ্টা করতে পারেন:

$("#image id").click(function(){
    $("#input id").click();
});

Question 8

পরিবর্তে আপনি একটি চিত্র রাখতে পারেন এবং এটি এর মতো করুন:

এইচটিএমএল:

<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1"  name="file1" style="display:none" />

জিকুয়েরি:

$("#upfile1").click(function () {
    $("#file1").trigger('click');
});

কায়েট : আইই 9 এবং আই 10 তে যদি আপনি জাভাস্ক্রিপ্টের মাধ্যমে কোনও ফাইল ইনপুটটিতে অনক্লিকটি ট্রিগার করেন তবে ফর্মটি 'বিপজ্জনক' হিসাবে চিহ্নিত হবে এবং জাভাস্ক্রিপ্টের সাথে জমা দেওয়া যাবে না, এটি নিশ্চিত নয় যে এটি traditionতিহ্যগতভাবে জমা দেওয়া যায় কিনা no

Question 9

সিএসএস দৃশ্যমানতার সাথে ইনপুটটি নিজেই আড়াল।

তারপরে আপনার পছন্দসই উপাদান থাকতে পারে - অ্যাঙ্কর বা চিত্র .., যখন অ্যাঙ্কর / চিত্র ক্লিক করা হবে, লুকানো ইনপুট ক্ষেত্রে ক্লিক করুন - কোনও ফাইল নির্বাচনের জন্য ডায়ালগ বক্স উপস্থিত হবে।

সম্পাদনা: প্রকৃতপক্ষে এটি ক্রোম এবং সাফারিতে কাজ করে, আমি কেবল লক্ষ্য করেছি যে এফএফ 4 বিটাতে এটি হয় না

Question 10

কাজের কোড:

কেবল ইনপুট অংশটি লুকান এবং এটি করুন।

<div class="ImageUpload">
   <label for="FileInput">
      <img src="../../img/Upload_Panel.png" style="width: 18px; margin-top: -316px; margin-left: 900px;"/>
   </label>

  <input id="FileInput" type="file" onchange="readURL(this,'Picture')" style="cursor: pointer;  display: none"/>
</div>

Question 11

        form input[type="file"] {
          display: none;
        }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
  <title>Simple File Upload</title>
  <meta name="" content="">
</head>

<body>
  <form action="upload.php" method="post" enctype="multipart/form-data">
    Select image to upload:
    <label for="fileToUpload">
      <img src="http://s3.postimg.org/mjzvuzi5b/uploader_image.png" />
    </label>
    <input type="File" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
  </form>
</body>

</html>

স্নিপেট প্রসারিত করুন

RN SNIPPET বা কেবল উপরের কোডটি অনুলিপি করুন এবং সম্পাদন করুন। আপনি যা চেয়েছিলেন তা পাবেন। জাভাস্ক্রিপ্ট ছাড়া খুব সহজ এবং কার্যকর। উপভোগ করুন !!!

Question 12

গত দশকে আমার লুকানো এবং দৃশ্যমান ইনপুটগুলির সাথে প্রচুর সমস্যা ছিল কখনও কখনও আমাদের বিষয়গুলির চেয়ে বিষয়গুলি সহজতর হয়।

অস্বচ্ছতা সমর্থন না করার জন্য IE 5,6,7,8 এবং 9 এর সাথে আমার একটু ইচ্ছা ছিল এবং এইভাবে ফাইল ইনপুটটি আপলোড চিত্রটি কভার করবে তবে নিম্নলিখিত সিএসএস কোডটি সমস্যার সমাধান করেছে।

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);

নিম্নলিখিত স্নিপড ক্রোমে পরীক্ষা করা হয়েছে, IE 5,6,7,8,9,10 আই 5 এর একমাত্র সমস্যা হ'ল এটি অটো মার্জিন সমর্থন করে না।

স্নিপেটটি কেবল অনুলিপি করুন এবং সিএসএস এবং এইচটিএমএল আপনার পছন্দ মতো আকার পরিবর্তন করুন paste

.file-upload{
	height:100px;
	width:100px;
	margin:40px auto;
	border:1px solid #f0c0d0;
	border-radius:100px;
	overflow:hidden;
	position:relative;
}
.file-upload input{
	position:absolute;
	height:400px;
	width:400px;
	left:-200px;
	top:-200px;
	background:transparent;
	opacity:0;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);  
}
.file-upload img{
	height:70px;
	width:70px;
	margin:15px;
}

<div class="file-upload">
<!--place upload image/icon first !-->
<img src="https://i.stack.imgur.com/dy62M.png" />
<!--place input file last !-->
<input type="file" name="somename" />
</div>

স্নিপেট প্রসারিত করুন

Question 13

জেএস লেখার চেয়ে আরও ভাল উপায় হ'ল নেটিভ ব্যবহার করা এবং এটি যেভাবে পরামর্শ দেওয়া হয়েছিল তার চেয়ে হালকা হয়ে যায়:

<label>
  <img src="my-image.png">
  <input type="file" name="myfile" style="display:none">
</label>

এইভাবে labelলুকানো থাকা ইনপুটটিতে স্বয়ংক্রিয়ভাবে সংযুক্ত হয়ে গেছে। লেবেলে ক্লিক করা ফিল্ডে ক্লিক করার মতো।