<input type=file />পাঠ্যক্ষেত্র ছাড়াই কেবল "ব্রাউজ" বোতামটি দৃশ্যমান করার স্টাইলের (বা স্ক্রিপ্ট) কোনও উপায় আছে ?
ধন্যবাদ
সম্পাদনা করুন : আমার কেন এটি প্রয়োজন তা কেবল পরিষ্কার করতে to আমি http://www.momingz.com/?p=5 থেকে মাল্টি ফাইল আপলোড কোড ব্যবহার করছি এবং এর ইনপুট পাঠ্য ক্ষেত্রের প্রয়োজন নেই কারণ এর কোনও মূল্য নেই। স্ক্রিপ্ট সবেমাত্র নতুন নির্বাচিত ফাইলটি পৃষ্ঠায় সংগ্রহ করতে যুক্ত করে। যদি এটি সম্ভব হয় তবে এটি পাঠ্য ক্ষেত্র ছাড়াই আরও ভাল দেখাচ্ছে।
উত্তর:
<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />এটি অবশ্যই আমার প্রকল্পগুলিতে এটি ব্যবহার করে কাজ করবে I আমি আশা করি এটি সাহায্য করবে :)
আমি এটি সম্পাদন করার চেষ্টা করছিলাম। আমি কোনও ফ্ল্যাশ সমাধান ব্যবহার করতে চাইনি এবং আমি যে jQuery লাইব্রেরি দেখেছি সেগুলির মধ্যে একটিও সমস্ত ব্রাউজার জুড়ে নির্ভরযোগ্য ছিল না।
আমি আমার নিজস্ব সমাধান নিয়ে এসেছি, যা সিএসএসে সম্পূর্ণভাবে প্রয়োগ করা হয়েছে (বোতামটি 'ক্লিক করা' প্রদর্শিত করতে অনক্লিক স্টাইল পরিবর্তন ব্যতীত)।
আপনি এখানে একটি কার্যকারী উদাহরণ চেষ্টা করতে পারেন: http://jsfiddle.net/VQJ9V/307/ (এফএফ 7, আই 9, সাফারি 5, অপেরা 11 এবং ক্রোম 14 এ পরীক্ষিত)
এটি একটি বড় ফাইল ইনপুট তৈরি করে (হরফ-আকার: 50px সহ) তৈরি করে কাজ করে, তারপরে এটিকে একটি ডিভের মধ্যে আবৃত করে নির্দিষ্ট আকার এবং ওভারফ্লো: লুকানো থাকে। ইনপুটটি কেবলমাত্র এই "উইন্ডো" ডিভের মাধ্যমে দৃশ্যমান। ডিভকে একটি পটভূমি চিত্র বা রঙ দেওয়া যেতে পারে, পাঠ্য যুক্ত করা যায় এবং ডিভ ব্যাকগ্রাউন্ড প্রকাশ করতে ইনপুটটি স্বচ্ছ করা যায়:
এইচটিএমএল:
<div class="inputWrapper">
<input class="fileInput" type="file" name="file1"/>
</div>সিএসএস:
.inputWrapper {
height: 32px;
width: 64px;
overflow: hidden;
position: relative;
cursor: pointer;
/*Using a background color, but you can use a background image to represent a button*/
background-color: #DDF;
}
.fileInput {
cursor: pointer;
height: 100%;
position:absolute;
top: 0;
right: 0;
z-index: 99;
/*This makes the button huge. If you want a bigger button, increase the font size*/
font-size:50px;
/*Opacity settings for all browsers*/
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}এটির সাথে কোনও সমস্যা আছে কিনা তা আমাকে জানান এবং আমি সেগুলি সমাধান করার চেষ্টা করব।
আজ আমার কাজটি এই দিনটি নষ্ট করছি। আমার প্রতিটি দৃশ্যের সাথে কাজ করে এমন সমাধানগুলির আমি এখানে পাইনি।
তারপরে মনে পড়ল আমি পাঠ্য বাক্স ছাড়াই JQuery ফাইল আপলোডের জন্য একটি উদাহরণ দেখেছি । সুতরাং আমি যা করেছি তা হ'ল আমি তাদের উদাহরণ নিলাম এবং এটিকে প্রাসঙ্গিক অংশে নামিয়ে দিলাম।
এই সমাধানটি কমপক্ষে আইই এবং এফএফের জন্য কাজ করে এবং পুরোপুরি স্টাইল করা যেতে পারে। নীচের উদাহরণে ফাইল ইনপুট অভিনব "ফাইল যুক্ত করুন" বোতামের নীচে লুকানো আছে।
<html>
<head>
<title>jQuery File Upload Example</title>
<style type="text/css">
.myfileupload-buttonbar input
{
position: absolute;
top: 0;
right: 0;
margin: 0;
border: solid transparent;
border-width: 0 0 100px 200px;
opacity: 0.0;
filter: alpha(opacity=0);
-o-transform: translate(250px, -50px) scale(1);
-moz-transform: translate(-300px, 0) scale(4);
direction: ltr;
cursor: pointer;
}
.myui-button
{
position: relative;
cursor: pointer;
text-align: center;
overflow: visible;
background-color: red;
overflow: hidden;
}
</style>
</head>
<body>
<div id="fileupload" >
<div class="myfileupload-buttonbar ">
<label class="myui-button">
<span >Add Files</span>
<input id="file" type="file" name="files[]" />
</label>
</div>
</div>
</body>
</html>ইনপুট-ফাইল উপাদানটি লুকান এবং একটি দৃশ্যমান বোতাম তৈরি করুন যা সেই ইনপুট-ফাইলের ক্লিক ইভেন্টটিকে ট্রিগার করবে।
এটা চেষ্টা কর:
সিএসএস
#file { width:0; height:0; } এইচটিএমএল:
<input type='file' id='file' name='file' />
<button id='btn-upload'>Upload</button>অবশ্যই JAVASCRIPT (jQuery এর):
$(function(){
$('#btn-upload').click(function(e){
e.preventDefault();
$('#file').click();}
);
});সিএসএস সহ ইনপুট ফাইল ট্যাগটি লুকান, একটি লেবেল যুক্ত করুন এবং এটি ইনপুট বোতামে বরাদ্দ করুন। লেবেল ক্লিকযোগ্য হবে এবং ক্লিক করা হলে এটি ফাইলের ডায়ালগটিকে আগুন ধরিয়ে দেবে।
<input type="file" name="imageUpload" id="imageUpload" class="hide"/>
<label for="imageUpload" class="button-style">Select file</label>স্টাইলটি বোতাম হিসাবে লেবেলে যুক্ত করুন।
সরাসরি নমুনা
onchangeজন্য আমি একটি হ্যান্ডলার যুক্ত করব input।
এটা খুব কঠিন হতে চলেছে। ফাইল ইনপুট প্রকারের সমস্যাটি হ'ল এটিতে সাধারণত দুটি ভিজ্যুয়াল উপাদান থাকে, যখন একক ডিওএম-উপাদান হিসাবে বিবেচিত হয়। এতে যোগ করুন যে বেশ কয়েকটি ব্রাউজারের ফাইলের ইনপুটটির জন্য নিজস্ব স্বতন্ত্র চেহারা এবং অনুভূতি রয়েছে এবং আপনি দুঃস্বপ্নের জন্য প্রস্তুত। এই ফাইলটি ইনপুটটিতে থাকা quirks সম্পর্কে quirksmode.org এ দেখুন । আমি আপনাকে গ্যারান্টি দিচ্ছি এটি আপনাকে খুশি করবে না (আমি অভিজ্ঞতা থেকে বলি)।
[Edit]
আসলে, আমি মনে করি আপনি আপনার ইনপুটটি একটি ধারক উপাদানটিতে (ডিভের মতো) রেখে এবং উপাদানটিতে নেতিবাচক মার্জিন যুক্ত করে পালিয়ে যেতে পারেন। টেক্সটবক্সের অংশটি কার্যকরভাবে স্ক্রিনের বাইরে লুকিয়ে রাখা। আরেকটি বিকল্প হ'ল আমি সংযুক্ত নিবন্ধটিতে কৌশলটি ব্যবহার করব, এটি একটি বোতামের মতো স্টাইল করার চেষ্টা করুন।
পুনরায় সেট করা সমস্ত ব্রাউজারে কাজ করার জন্য স্থির করুন:
<input type = "button" value = "Choose image"
onclick ="javascript:document.getElementById('imagefile').click();">
<input id = "imagefile" type="file" style='visibility: hidden;' name="img"/>আমি এফএফ, ক্রোম এবং আই-তে পরীক্ষা করেছি - খুব ভাল কাজ করছি, প্রয়োগ করা স্টাইলগুলিও: ডি
আমি শীর্ষ দুটি সমাধান বাস্তবায়নের চেষ্টা করেছি এবং এটি আমার জন্য বিশাল সময়ের অপচয় হিসাবে শেষ হয়েছিল। শেষ পর্যন্ত, এই .ssss ক্লাস প্রয়োগ করা সমস্যার সমাধান করে ...
input[type='file'] {
color: transparent;
}সম্পন্ন! সুপার ক্লিন এবং সুপার সিম্পল ...
এটি করার আরও একটি সহজ উপায়। এইচটিএমএলে একটি "ইনপুট টাইপ ফাইল" ট্যাগ তৈরি করুন এবং এটি লুকান। তারপরে একটি বোতামে ক্লিক করুন এবং এটি প্রয়োজন অনুসারে ফর্ম্যাট করুন। এর পরে জাভাস্ক্রিপ্ট / jquery ব্যবহার করার পরে প্রোগ্রাম বোমে ক্লিক করে ইনপুট ট্যাগটি ক্লিক করা হবে।
এইচটিএমএল: -
<input id="file" type="file" style="display: none;">
<button id="button">Add file</button>জাভাস্ক্রিপ্ট: -
document.getElementById('button').addEventListener("click", function() {
document.getElementById('file').click();
});jQuery: -
$('#button').click(function(){
$('#file').click();
});সিএসএস: -
#button
{
background-color: blue;
color: white;
}এটির জন্য এখানে একটি কার্যকরী জেএস ফ্রিডল রয়েছে: - http://jsfiddle.net/32na3/
আমি উপরে প্রস্তাবিত কিছু কোড ব্যবহার করেছি এবং আমার সময়টি অপেক্ষা করার অনেক ঘন্টা পরে, অবশেষে আমি একটি সিএস ব্যাগ বিনামূল্যে সমাধানে এসেছি।
আপনি এটি এখানে চালাতে পারেন - http://jsfiddle.net/WqGph/
তবে তারপরে আরও ভাল সমাধানটি খুঁজে পেয়েছে - http://jsfiddle.net/XMMc4/5/
<input type = "button" value = "Choose image #2"
onclick ="javascript:document.getElementById('imagefile').click();">
<input id = "imagefile" type="file" style='display:none;' name="img" value="none"/>see jsfiddle code for examples<br/>onchangeইভেন্টটি গোপন inputউপাদানগুলির জন্য ট্রিগার হয় না ।
আপনি কোনও চিত্র লেবেল করতে পারেন তাই আপনি এটিতে ক্লিক করলে বাটনের ক্লিক ইভেন্টটি ট্রিগার হয়ে যায়। আপনি কেবল সাধারণ বোতামটি অদৃশ্য করতে পারেন:
<form>
<label for="fileButton"><img src="YourSource"></label> <!--You don't have to put an image here, it can be anything you like-->
<input type="file" id="fileButton" style="display:none;"/>
</form>এটি আমার জন্য সমস্ত ব্রাউজারে কাজ করেছিল এবং এটি ব্যবহার করা খুব সহজ।
আপনি কোনও লুকানো ফাইল ইনপুটটিতে ক্লিক ইভেন্টটি প্রেরণ করতে পারেন:
<form action="#type your action here" method="POST" enctype="multipart/form-data">
<div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" >Click to upload!</div>
<!-- hide input[type=file]!-->
<div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
<input type="submit" value='submit' >
</form>
<script type="text/javascript">
var btn = document.getElementById("yourBtn");
var upfile = document.getElementById("upfile");
btn.addEventListener('click',function(){
if(document.createEvent){
var ev = document.createEvent('MouseEvents');
ev.initEvent('click',true,false);
upfile.dispatchEvent(ev);
}else{
upfile.click();
}
});
</script>var ev = document.createEvent('HTMLEvents'); এইচটিএমলেভেন্টসকে মাউসএভেন্টস-এ পরিবর্তন করুনvar ev = document.createEvent('MouseEvents');
এটির সাথে সত্যিই একটি হ্যাকি সমাধান আমি ...
<style type="text/css">
input[type="file"]
{
width: 80px;
}
</style>
<input id="File1" type="file" />সমস্যাটি হ'ল প্রস্থের বৈশিষ্ট্য যা পাঠ্য ক্ষেত্রটি লুকিয়ে রাখছে ব্রাউজারগুলির মধ্যে প্রচুর পরিমাণে পৃথক হবে, উইন্ডোজ এক্সপি থিমগুলির মধ্যে বিভিন্ন হবে। যদিও এটি এমন কিছু যার সাথে আপনি কাজ করতে পারেন? ...
আমি জানি এটি একটি পুরানো পোস্ট তবে পাঠ্যকে অপসারণ করার একটি সহজ উপায় কেবল আপনার পটভূমির পাঠ্যের রঙ সেট করা।
যেমন আপনার পাঠ্য ইনপুট ব্যাকগ্রাউন্ডটি যদি সাদা হয় তবে:
input[type="file"]{
color:#fff;
}এটি ফাইল চয়ন করুন পাঠ্যটির উপর প্রভাব ফেলবে না যা ব্রাউজারের কারণে এখনও কালো থাকবে।
আমার সমাধানটি কেবলমাত্র "ড্রুভেন" বলে একটি ডিভের মধ্যে সেট করার জন্য, যদিও আমি নিজের বোতামের স্টাইলটি ডিভের সাথে বিজ্ঞাপন করি (এটিকে একটি হোভারের সাথে বোতামের মতো দেখায়) এবং আমি কেবল শৈলীটি "অস্বচ্ছতা: 0;" সেট করেছিলাম; ইনপুট। আমার জন্য একটি মোহন কাজ করে, আশা করি এটি আপনার জন্য একই রকম হয়।
আমি প্রস্থ: 85px সহ একটি ইনপুট ফাইল স্টাইল করেছি এবং পাঠ্য ক্ষেত্রটি একেবারে অদৃশ্য হয়ে গেল
এই এইচটিএমএল কোডটি কেবল আপলোড ফাইল বোতামটি দেখায়
<form action="/action_page.php">
<input type="button" id="id" value="Upload File" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file" onchange="this.form.submit()"/>
</form><a href="#" id="select_logo">Select Logo</a> <input type="file" id="logo">
$("#logo").css('opacity','0');
$("#select_logo").click(function(){
$().trigger('click');
return false;
});আমার জন্য, সহজতম উপায় হ'ল ফন্টের রঙের মতো পটভূমির রঙ। সহজ, মার্জিত নয়, তবে দরকারী use
<div style="color:#FFFFFF"> <!-- if background page is white, of course -->
<input class="fileInput" type="file" name="file1"/></div>সুতরাং সমস্ত ব্রাউজারদের জন্য এটি করার সর্বোত্তম উপায় :
সিএসএস ভুলে যান!
<p>Append Image:</p>
<input type="button" id="clickImage" value="Add Image" />
<input type="file" name="images[]" id="images" multiple />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" charset="utf-8"></script>
<script>
$('#images').hide();
$('#clickImage').click( function() {
$('#images').trigger('click');
});
</script>এই সমস্ত উত্তরগুলি সুন্দর, তবে CSSগুলি কার্যকর হবে না কারণ এটি সমস্ত ব্রাউজার এবং ডিভাইসগুলিতে সমান নয়, আমি যে প্রথম উত্তরটি লিখেছি তা সাফারি বাদে সব কিছুতে কাজ করবে। এটি সমস্ত ব্রাউজার জুড়ে সর্বদা কাজ করার জন্য এটি প্রতিটি সময় ইনপুট পাঠ্য সাফ করতে চাইলে এটি অবশ্যই গতিশীলভাবে তৈরি এবং পুনরায় তৈরি করতে হবে:
var imageDiv = document.createElement("div");
imageDiv.setAttribute("id", "imagediv");
imageDiv.style.cssText = 'position:relative; vertical-align: bottom;';
var imageText = document.createTextNode("Append Image:");
var newLine = document.createElement("br");
var image = document.createElement("input");
image.setAttribute("type", "file");
image.setAttribute("id", "images");
image.setAttribute("name", "images[]");
image.setAttribute("multiple", "multiple");
imageDiv.appendChild(imageText);
imageDiv.appendChild(newLine);
imageDiv.appendChild(image);
questionParagraph.appendChild(imageDiv);তমন্তেয়ের উত্তরটি বেশ ভাল, আপনি ফায়ারফক্স ভি ২০-এ সীমানা-প্রস্থের সাথে খেলতে পারবেন না। যদি আপনি লিঙ্কটি দেখতে পান (ডেমো, এখানে সত্যিই দেখাতে পারে না) তবে তারা ফন্ট-আকার = 23px, রূপান্তর: বোতামটি বড় করার জন্য ফায়ারফক্সের জন্য (-300px, 0px) স্কেল (4) অনুবাদ করুন the
যদি আপনি এটিকে একটি ড্রাগ'অনড্রপ ইনপুট বাক্স করতে চান তবে আলাদা ডিভের উপর .click () ব্যবহার করে অন্যান্য সমাধানগুলি অকেজো।
এখানে বেশ কয়েকটি বৈধ বিকল্প রয়েছে তবে ভেবেছিলাম অনুরূপ সমস্যা সমাধানের চেষ্টা করার সময় আমি যা দিয়ে এসেছি তা দিয়ে যাব। http://jsfiddle.net/5RyrG/1/
<span class="btn fileinput-button">
<span>Import Field(s)</span>
<input id="fileupload" type="file" name="files[]" onchange="handleFiles(this.files)" multiple>
</span>
<div id="txt"></div>
function handleFiles(files){
$('#txt').text(files[0].name);
}আমি এটি লিখেছি:
<form action='' method='POST' name='form-upload-image' id='form-upload-image' enctype='multipart/form-data'>
<div style="width: 0; height: 0; overflow: hidden;">
<input type="file" name="input-file" id="input-file" onchange="this.files.length > 0 ? document.getElementById('form-upload-image').submit():null;" />
</div>
</form>
<img src="image.jpg" style="cursor: pointer;" onclick="document.getElementById('input-file').click();" />সমস্ত ব্রাউজারে দুর্দান্ত কাজ করুন, কোনও জিকুয়েরি নেই, কোনও সিএসএস নেই।
এখানে @ এম্পারস্যান্ড্রের জনপ্রিয় সমাধানের সরলিকৃত সংস্করণ যা সমস্ত বড় ব্রাউজারগুলিতে কাজ করে। Asp.NET মার্কআপ
<asp:TextBox runat="server" ID="FilePath" CssClass="form-control"
style="float:left; display:inline; margin-right:5px; width:300px"
ReadOnly="True" ClientIDMode="Static" />
<div class="inputWrapper">
<div id="UploadFile" style="height:38px; font-size:16px;
text-align:center">Upload File</div>
<div>
<input name="FileUpload" id="FileInput" runat="server"
type="File" />
</div>
</div>
<asp:Button ID="UploadButton" runat="server"
style="display:none" OnClick="UploadButton_Click" />
</div>
<asp:HiddenField ID="hdnFileName" runat="server" ClientIDMode="Static" />JQuery কোড
$(document).ready(function () {
$('#UploadFile').click(function () {
alert('UploadFile clicked');
$('[id$="FileInput"]').trigger('click');
});
$('[id$="FileInput"]').change(function (event) {
var target = event.target;
var tmpFile = target.files[0].name;
alert('FileInput changed:' + tmpFile);
if (tmpFile.length > 0) {
$('#hdnFileName').val(tmpFile);
}
$('[id$="UploadButton"]').trigger('click');
});
});সিএসএস কোড
.inputWrapper {
height: 38px;
width: 102px;
overflow: hidden;
position: relative;
padding: 6px 6px;
cursor: pointer;
white-space:nowrap;
/*Using a background color, but you can use a background image to represent
a button*/
background-color: #DEDEDE;
border: 1px solid gray;
border-radius: 4px;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}স্ট্যান্ডার্ড সহ সার্ভার পোস্টব্যাকের জন্য একটি লুকানো "আপলোডবটন" ক্লিক ট্রিগার ব্যবহার করে। "আপলোড ফাইল" পাঠ্য সহ ওভারফ্লো হয়ে গেলে ইনপুট নিয়ন্ত্রণটিকে ভিড়ের ডিভের বাইরে ধাক্কা দেয় যাতে "ফাইল ইনপুট" নিয়ন্ত্রণ ডিভের জন্য কোনও স্টাইল প্রয়োগ করার প্রয়োজন হয় না। $ ([Id $ = "ফাইলআইপুট"]) নির্বাচনকারী স্ট্যান্ডার্ড এএসপি.নেট প্রিফিক্স প্রয়োগ করে আইডির বিভাগকে অনুমতি দেয়। HdnFileName থেকে সার্ভার কোড থেকে পিছনে সেট করা ফাইলপথ পাঠ্যবাক্স মান। ভ্যালু একবার ফাইল আপলোড হওয়ার পরে।