<ইনপুট টাইপ = 'ফাইল' /> jQuery ব্যবহার করে সাফ করা হচ্ছে


উত্তর:


529

সহজ: আপনি <form>উপাদানটির চারপাশে মোড়ানো , ফর্মটিতে রিসেট কল করুন, তারপরে ব্যবহার করে ফর্মটি সরিয়ে ফেলুন .unwrap().clone()অন্যথায় এই থ্রেডের সমাধানগুলির বিপরীতে , আপনি শেষে একই উপাদানটি দিয়ে শেষ করুন (এতে সেট করা কাস্টম বৈশিষ্ট্যগুলি সহ)।

অপেরা, ফায়ারফক্স, সাফারি, ক্রোম এবং আই 6 + এ পরীক্ষিত এবং কাজ করছে। ব্যতিক্রম বাদে অন্য ধরণের ফর্ম উপাদানগুলিতেও কাজ করে type="hidden"

window.reset = function(e) {
  e.wrap('<form>').closest('form').get(0).reset();
  e.unwrap();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <input id="file" type="file">
  <br>
  <input id="text" type="text" value="Original">
</form>

<button onclick="reset($('#file'))">Reset file</button>
<button onclick="reset($('#text'))">Reset text</button>

JSFiddle

টিমো নীচের নোট অনুসারে, আপনার যদি ক্ষেত্রের অভ্যন্তরে রিসেটটি ট্রিগার করার জন্য বোতামগুলি থাকে তবে জমাটি ট্রিগার করা থেকে বিরত রাখতে আপনার ইভেন্টটি <form>কল করতে হবে ।.preventDefault()<button>


সম্পাদনা

অপরিশোধিত ত্রুটির কারণে আইই 11 এ কাজ করে না। পাঠ্য (ফাইলের নাম) ইনপুটটিতে সাফ করা হয়েছে, তবে এর Fileতালিকাটি জনবসতি থেকে যায়।


14
বিজয়ী! প্রতিটি ব্রাউজারে কাজ করে এবং ইনপুট ক্ষেত্রে ক্লোনিং এড়ানো avo কিন্তু যদি স্পষ্ট বোতাম ফর্ম ভিতরে হয়, নামান্তর দয়া reset()যেমন হয়। reset2(), কারণ কমপক্ষে ক্রোমে সমস্ত ক্ষেত্র যদি তা থাকে তবে তা সাফ হয়ে যায় reset()। জমা দেওয়া রোধ করার জন্য কল সাফ করার পরে ইভেন্ট.প্রিভেন্টডেফল্ট () যুক্ত করুন। এই পদ্ধতি: <button onclick="reset2($('#file'));event.preventDefault()">Reset file</button>। কার্যকারী উদাহরণ: jsfiddle.net/rPaZQ/23
টিমো কাহকেনেন

28
সমস্যাটি হ'ল এটি অন্তত অস্থায়ীভাবে দস্তাবেজটিকে অবৈধ করে তোলে। (ফর্মগুলিতে অন্য ফর্মগুলি থাকতে পারে না currently) এটি বর্তমানে কাজ করে বা না করুক, যে কোনও সময় তা ভাঙ্গতে মুক্ত free
সিএইচও

6
@ সিএইচও, অবশ্যই এটি কেবল সত্য যদি ইনপুট উপাদানটি কোনও ফর্মে থাকে যা এটি হতে হবে না।
নিনজাকাননন

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

4
আমি সবেমাত্র পেয়েছি যে এটি আইই ১১ তে কাজ করে না We আমরা পিক্সেলফিলি ইনপুট ব্যবহার করছি - যা এই পদ্ধতির ব্যবহার করে। এবং পাঠ্য এবং থাম্বনেল সাফ করার সময়, অবজেক্টের ফাইলগুলির তালিকা একই থাকে :(
ইয়ান গ্রেনার

434

দ্রুত উত্তর: এটি প্রতিস্থাপন।

নীচের replaceWithকোডটিতে আমি নিজের ক্লোন দিয়ে নিয়ন্ত্রণটি প্রতিস্থাপন করতে jQuery পদ্ধতি ব্যবহার করি । এই নিয়ন্ত্রণে ইভেন্টগুলির সাথে আপনার যদি কোনও হ্যান্ডলার আবদ্ধ থাকে তবে আমরা সেগুলিও সংরক্ষণ করতে চাই। এটি করার জন্য আমরা পদ্ধতির trueপ্রথম পরামিতি হিসাবে পাস করি clone

<input type="file" id="control"/>
<button id="clear">Clear</button>
var control = $("#control");

$("#clear").on("click", function () {
    control.replaceWith( control = control.clone( true ) );
});

ফিডল: http://jsfiddle.net/jonathansampson/dAQVM/

যদি ক্লোনিং, ইভেন্ট হ্যান্ডলারগুলি সংরক্ষণ করার সময়, কোনও অভিভাবক উপাদান থেকে এই নিয়ন্ত্রণে ক্লিকগুলি পরিচালনা করতে ইভেন্ট ডেলিগেশন ব্যবহার করার বিষয়টি বিবেচনা করতে পারে এমন কোনও সমস্যা উপস্থাপন করে:

$("form").on("focus", "#control", doStuff);

এটি নিয়ন্ত্রণটি রিফ্রেশ করার সময় কোনও হ্যান্ডলারের উপাদানটির সাথে ক্লোন করার প্রয়োজনকে বাধা দেয়।


50
আপনি মাঠে cl ('# ক্লোন')। (ক্লোন () #। ক্লোন () পদ্ধতিটিও ব্যবহার করতে পারেন this
মেট্রিক 152

4
এটি ঠিক কিছু করতে পারে না - ফায়ারব্যাগে কোনও ত্রুটি নেই। আমাকে কন্ট্রোল.ওল ('') যোগ করতে হয়েছিল; ফাইল ইনপুট বাক্স সাফ করার জন্য। আপনার কোডটি ক্রোমে এবং ie9 তে যেমন কাজ করেছে।
Mnsr

10
এটি এখনও কাজ করে না। এটি প্রতিস্থাপনের আগে সাফ করা দরকার। সুতরাং আপনি .আরপ্লেস উইথ () এর আগে .val () চাইবেন। সুতরাং এটি নিয়ন্ত্রণ হবে। '(' ')। প্রতিস্থাপনের সাথে (...);
এমএনএসআর

6
আমি যে নীচে একটি সমাধান এই তুলনায় অনেক ক্লিনার এর আছে: stackoverflow.com/a/13351234/909944
slipheed

2
এই উত্তরটি এখানে historicalতিহাসিক কারণে রয়েছে। আধুনিক ব্রাউজারগুলি সমর্থন করেinput.value = null;
আন্ড্রে ওয়ার্ল্যাং

113

আপনার জন্য ক্র্যাক ব্রাউজার / পুরানো ব্রাউজার ইস্যুগুলির যত্ন নেওয়ার কথা জ্যাকুরির।

এটি আমি যে আধুনিক ব্রাউজারগুলি পরীক্ষা করেছি সেগুলিতে কাজ করে: ক্রোমিয়াম ভি 25, ফায়ারফক্স ভি 20, অপেরা ভি 12.14

Jquery ব্যবহার করে 1.9.1

এইচটিএমএল

<input id="fileopen" type="file" value="" />
<button id="clear">Clear</button>

jQuery

$("#clear").click(function () {
    $("#fileopen").val("");
});

উপর jsfiddle

উপরের উল্লিখিত ব্রাউজারগুলিতে নিম্নলিখিত জাভাস্ক্রিপ্ট সমাধানটি আমার জন্যও কাজ করেছিল।

document.getElementById("clear").addEventListener("click", function () {
    document.getElementById("fileopen").value = "";
}, false);

উপর jsfiddle

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

অন্য উত্তরে উল্লিখিত মত, jquery ফোরামে একটি পোস্ট

 if ($.browser.msie) {
      $('#file').replaceWith($('#file').clone());
 } else {
      $('#file').val('');
 }

তবে jquery ব্রাউজার পরীক্ষার জন্য সমর্থন, jquery.browser সরিয়ে ফেলেছে

এই জাভাস্ক্রিপ্ট সমাধানটি আমার পক্ষেও কাজ করেছিল, এটি jquery.replaceWith পদ্ধতির ভ্যানিলা সমতুল্য ।

document.getElementById("clear").addEventListener("click", function () {
    var fileopen = document.getElementById("fileopen"),
        clone = fileopen.cloneNode(true);

    fileopen.parentNode.replaceChild(clone, fileopen);
}, false);

উপর jsfiddle

গুরুত্বপূর্ণ বিষয়টি লক্ষ্যণীয় হ'ল ক্লোননোড পদ্ধতি সম্পর্কিত ইভেন্ট হ্যান্ডলারের সংরক্ষণ করে না।

এই উদাহরণটি দেখুন।

document.getElementById("fileopen").addEventListener("change", function () {
    alert("change");
}, false);

document.getElementById("clear").addEventListener("click", function () {
    var fileopen = document.getElementById("fileopen"),
        clone = fileopen.cloneNode(true);

    fileopen.parentNode.replaceChild(clone, fileopen);
}, false);

উপর jsfiddle

তবে jquery.clone এটি অফার করে [* 1]

$("#fileopen").change(function () {
    alert("change");
});

$("#clear").click(function () {
    var fileopen = $("#fileopen"),
        clone = fileopen.clone(true);

    fileopen.replaceWith(clone);
});

উপর jsfiddle

[* 1] jquery এটি করতে সক্ষম হয় যদি ইভেন্টগুলি jquery এর পদ্ধতি দ্বারা যুক্ত করা হত কারণ এটি jquery.data তে একটি অনুলিপি রাখে , অন্যথায় এটি কাজ করে না, সুতরাং এটি কিছুটা প্রতারণা / কাজ এবং এর অর্থ জিনিসগুলি না বিভিন্ন পদ্ধতি বা গ্রন্থাগারের মধ্যে সামঞ্জস্যপূর্ণ।

document.getElementById("fileopen").addEventListener("change", function () {
    alert("change");
}, false);

$("#clear").click(function () {
    var fileopen = $("#fileopen"),
        clone = fileopen.clone(true);

    fileopen.replaceWith(clone);
});

উপর jsfiddle

আপনি সংযুক্ত ইভেন্ট হ্যান্ডলারটি উপাদানটি থেকে সরাসরি পাবেন না।

এখানে ভ্যানিলা জাভাস্ক্রিপ্টের সাধারণ নীতিটি দেওয়া হল, অন্য সমস্ত লাইব্রেরি এটি প্রায় জিকিউরিটি করে (মোটামুটিভাবে)।

(function () {
    var listeners = [];

    function getListeners(node) {
        var length = listeners.length,
            i = 0,
            result = [],
            listener;

        while (i < length) {
            listener = listeners[i];
            if (listener.node === node) {
                result.push(listener);
            }

            i += 1;
        }

        return result;
    }

    function addEventListener(node, type, handler) {
        listeners.push({
            "node": node,
                "type": type,
                "handler": handler
        });

        node.addEventListener(type, handler, false);
    }

    function cloneNode(node, deep, withEvents) {
        var clone = node.cloneNode(deep),
            attached,
            length,
            evt,
            i = 0;

        if (withEvents) {
            attached = getListeners(node);
            if (attached) {
                length = attached.length;
                while (i < length) {
                    evt = attached[i];
                    addEventListener(clone, evt.type, evt.handler);

                    i += 1;
                }
            }
        }

        return clone;
    }

    addEventListener(document.getElementById("fileopen"), "change", function () {
        alert("change");
    });

    addEventListener(document.getElementById("clear"), "click", function () {
        var fileopen = document.getElementById("fileopen"),
            clone = cloneNode(fileopen, true, true);

        fileopen.parentNode.replaceChild(clone, fileopen);
    });
}());

উপর jsfiddle

অবশ্যই jquery এবং অন্যান্য গ্রন্থাগারগুলিতে এই জাতীয় তালিকা বজায় রাখার জন্য প্রয়োজনীয় অন্যান্য সমস্ত সমর্থন পদ্ধতি রয়েছে, এটি কেবল একটি প্রদর্শনী।


এইটা কাজ করে! (ভাল উত্তর অন্তত কমপক্ষে ভ্যানিলা জেএস বিট) আমি এটি সর্বশেষতম ক্রোম, ফায়ারফক্স এবং আইই (11) এ পরীক্ষা করেছি।
ফিলিটি

4
আমি আপনার খুব একই উত্তর কিছু যোগ করতে চলেছি, কিন্তু প্রধানত যে .val('')। এটি আপলোড উপাদানটির ক্লোনিং বা নেস্টেড ফর্ম যুক্ত করার চেয়ে সহজ নয়? +1 টি।
এরেনর পাজ

3
প্রথম JQuery সমাধান (ব্যবহার করে .val("")) নিখুঁতভাবে কাজ করেছে, ধন্যবাদ। ইনপুট ক্লোনিং করা এবং এটি প্রতিস্থাপনের চেয়ে অনেক সহজ।
হুগো জিঙ্ক

51

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

আপনাকে যা করতে হবে তা সেই ক্ষেত্রটি পুনরায় সেট করতে হবে যেখানে আপনি কেবল অন্য ক্ষেত্র যুক্ত ফর্মের ফাইল ইনপুটটিকে পুনরায় সেট করতে চান, এটি ব্যবহার করুন:

function reset_field (e) {
    e.wrap('<form>').parent('form').trigger('reset');
    e.unwrap();
}​

এখানে একটি উদাহরণ: http://jsfiddle.net/v2SZJ/1/


6
আইই তে সঠিকভাবে কাজ করে না। দৃষ্টিভঙ্গিটির মানটি পুনরায় সেট করা হয়েছে তবে el.value এখনও পূর্ববর্তী সংস্করণটির প্রতিবেদন করে। এটি el.value পুনরায় নির্ধারণ করতে সহায়তা করে তবে কেবলমাত্র আইই 10 + তে। jsfiddle.net/9uPh5/2
গ্রেগর

2
উপরের মতো একই সমাধান
ফিল্ট

2
এটি ভুল, আমরা ক্ষেত্রটি একটি নির্দিষ্ট মান হিসাবে সেট করতে পারি না তবে আশা করি, আমরা এটি সাফ করতে পারি।
fralbo

44

এটি আমার পক্ষে কাজ করে।

$("#file").replaceWith($("#file").clone());

http://forum.jquery.com/topic/how-to-clear-a-file-input-in-ie

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


1
আমার জন্য কাজ কর! এটি লক্ষণীয় যে আপনার যদি কোনও ইভেন্ট শ্রোতা যদি ফাইল ইনপুট পরিবর্তনের দ্বারা ট্রিগার করে থাকে তবে একবার ইনপুট প্রতিস্থাপন করার পরে আপনাকে সেগুলি পুনরায় নিয়োগ করা দরকার।
জোলক্লারটন

20

আইই 8-তে তারা সুরক্ষার জন্য ফাইল আপলোড ক্ষেত্রটিকে কেবল পঠনযোগ্য করে তুলেছে। দেখুন ইন্টারনেট দল ব্লগ পোস্টে :

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

"চুরি" কীস্ট্রোকের উপর নির্ভর করে এমন আক্রমণগুলি আটকে রাখার জন্য যা ব্যবহারকারীকে অনিয়মিতভাবে নিয়ন্ত্রণে একটি স্থানীয় ফাইল পাথ টাইপ করতে প্ররোচিত করে, ফাইল পাথ সম্পাদনা বাক্সটি এখন কেবল পঠনযোগ্য। ব্যবহারকারীকে অবশ্যই ফাইল ব্রাউজ ডায়ালগটি ব্যবহার করে আপলোডের জন্য স্পষ্টভাবে একটি ফাইল নির্বাচন করতে হবে।

অতিরিক্ত হিসাবে, "ফাইলগুলি আপলোড করার সময় স্থানীয় ডিরেক্টরি পথ অন্তর্ভুক্ত করুন" ইউআরএলএক্স ইন্টারনেট অঞ্চলের জন্য "অক্ষম" সেট করা হয়েছে। এই পরিবর্তনটি ইন্টারনেটে সম্ভাব্য সংবেদনশীল স্থানীয় ফাইল-সিস্টেমের তথ্য ফাঁস রোধ করে। উদাহরণস্বরূপ, পুরো পাথ সি: \ ব্যবহারকারীদের এরিক্লো \ নথি \ গোপন \ চিত্র.png জমা দেওয়ার পরিবর্তে, ইন্টারনেট এক্সপ্লোরার 8 এখন কেবল ফাইলের নাম চিত্র.পিএনজি জমা দেবে।


16

$("#control").val('')আপনার যা দরকার! JQuery 1.11 ব্যবহার করে ক্রোমে পরীক্ষিত

অন্যান্য ব্যবহারকারীরা ফায়ারফক্সেও পরীক্ষা করেছেন।


2
এখানে অন্যান্য অনেক পোস্ট যেমন ব্যাখ্যা করে, এটি ক্রস ব্রাউজার বান্ধব নয়।
তিশ্চ

আমার বোঝার জন্য কোন ব্রাউজারে এটি ব্যর্থ হয়?
দ্য হ্যামস্ট্রিং

1
ইনপুট টাইপ ফাইল হিসাবে ইন্টারনেট এক্সপ্লোরারে ব্যর্থতা IE>
লাকি

4
ক্রোম এবং ফায়ারফক্সে কাজ করে। যথেষ্ট.
naimul64

12

আমি এখানে সমস্ত অপশন সঙ্গে আটকে গিয়েছিলাম। এখানে একটি হ্যাক যা আমি তৈরি করেছি যা কাজ করেছে:

<form>
 <input type="file">
 <button type="reset" id="file_reset" style="display:none">
</form>

এবং আপনি এর অনুরূপ কোড সহ jQuery ব্যবহার করে রিসেটটি ট্রিগার করতে পারেন:

$('#file_reset').trigger('click');

(জেএসফিডাল: http://jsfiddle.net/eCbd6/ )


3
ঠিক আছে তবে এটি পুরো ফর্মটি সাফ করবে .. নির্দিষ্ট ফাইল ইনপুট নয়
আশীষ রতন

8

আমি এটি দিয়ে শেষ করেছি:

if($.browser.msie || $.browser.webkit){
  // doesn't work with opera and FF
  $(this).after($(this).clone(true)).remove();  
}else{
  this.setAttribute('type', 'text');
  this.setAttribute('type', 'file'); 
}

সর্বাধিক মার্জিত সমাধান নাও হতে পারে তবে আমি যতদূর বলতে পারি এটি কার্যকর work



ক্রোম 34 (লিনাক্স) এ কাজ করে না। প্রতিস্থাপনের সাথে () পদ্ধতি উভয় ব্রাউজারে (ক্রোম, ফায়ারফক্স) কাজ করে
গৌরব শর্মা

প্রথমে আমি অবশ্যই লক্ষ্য করব ""। ব্রাউজারটি jquery 1.9 থেকে অপসারণ করা হয়েছে "তবে শেষ দুটি লাইন (লেখার ক্ষেত্রে টাইপ বৈশিষ্ট্য পরিবর্তন করে তারপরে এটিকে ফাইলে সেট করে) কাজ করেছে। অতিরিক্তভাবে আমি $ ('# নিয়ন্ত্রণ') সেট করার চেষ্টা করেছি val ভাল (''); বা জাভাস্ক্রিপ্ট ডকুমেন্টে .getElementById (নিয়ন্ত্রণ)। মূল্য = ''; এবং খুব কাজ করেছে এবং কেন আমাদের এই পদ্ধতিকে ব্যবহার করা উচিত নয় জানি না !? অবশেষে, আমি উভয় ব্যবহার করার সিদ্ধান্ত নিয়েছে।
কিউমাস্টার

8

আমি https://github.com/malsup/form/blob/master/jquery.form.js ব্যবহার করেছি , যার একটি ফাংশন রয়েছে clearInputs()যা ক্রসব্রোজার, ভাল পরীক্ষিত, ব্যবহার করা সহজ এবং আইই ইস্যু এবং গোপন ক্ষেত্রগুলি সাফ করার জন্য পরিচালনা করে প্রয়োজন হলে. কেবলমাত্র ফাইল ইনপুট সাফ করার জন্য কিছুটা দীর্ঘ সমাধান হতে পারে তবে আপনি যদি ক্রসব্রোজার ফাইল আপলোডগুলি নিয়ে কাজ করে থাকেন তবে এই সমাধানটি প্রস্তাবিত।

ব্যবহার সহজ:

// সমস্ত ফাইল ক্ষেত্র সাফ করুন:
$ ( "ইনপুট: ফাইল") clearInputs ();।

// লুকানো ক্ষেত্রগুলি সাফ করুন:
$ ( "ইনপুট: ফাইল") clearInputs (সত্য);।

// নির্দিষ্ট ক্ষেত্র সাফ করুন:
$ ( "# Myfilefield1, # ​​myfilefield2") clearInputs ()।
/ **
 * নির্বাচিত ফর্ম উপাদানগুলি সাফ করে।
 * /
f .fn.cियरFields = $ .fn.cियरInputs = ফাংশন (অন্তর্ভুক্তহীন) {
    var re = / ^ (?: রঙ | তারিখ | তারিখের সময় | ইমেল | মাস | নম্বর | পাসওয়ার্ড | পরিসর | অনুসন্ধান | টেল | পাঠ্য | সময় | url | সপ্তাহ) $ / i; // 'লুকানো' এই তালিকায় নেই
    এটিকে ফিরিয়ে দিন (ফাংশন ())
        var t = this.type, ট্যাগ = this.tagName.toLowerCase ();
        যদি (পুনরায় পরীক্ষা (টি) || ট্যাগ == 'টেক্সারিয়া') {
            this.value = '';
        }
        অন্যথায় যদি (t == 'চেকবাক্স' || টি == 'রেডিও') {
            this.checked = false;
        }
        অন্যথায় যদি (ট্যাগ == 'নির্বাচন করুন') {
            this.selectedIndex = -1;
        }
        অন্যথায় যদি (t == "ফাইল") {
            যদি (/MSIE/.test(navigator.userAgent)) {
                $ (এই) .replaceWith ($ (এই) .clone (সত্য));
            } অন্য {
                $ (এই) .val ( '');
            }
        }
        অন্যথায় যদি (অন্তর্ভুক্তকৃত) {
            // অন্তর্ভুক্তটি লুকানো মানটি সত্য হতে পারে, বা এটি নির্বাচক স্ট্রিং হতে পারে
            // একটি বিশেষ পরীক্ষার ইঙ্গিত; উদাহরণ স্বরূপ:
            // $ ('# মাইফর্ম') clear ক্লিয়ারফর্ম ('। বিশেষ: লুকানো')
            // উপরে বর্ণিত লুকানো ইনপুটগুলি পরিষ্কার করবে যাগুলির 'বিশেষ' শ্রেণি রয়েছে
            যদি ((অন্তর্ভুক্তহীন === সত্য &&hhid/.test(t)) ||
                 (টাইপযুক্ত অন্তর্ভুক্তহীন == 'স্ট্রিং' && $ (এটি) is
                this.value = '';
        }
    });
};

আমি বুঝতে পারছি না কেন এই উত্তরটি বেশি প্রচারিত হয় না ?!
আলেক্সবি

1
@ অ্যালেক্সবি: কারণ, টিমো যেমন ব্যাখ্যা করেছিলেন, কেবলমাত্র একটি ফাইল ইনপুট ক্ষেত্র সাফ করার জন্য ওভারকিল।
TheCarver

জানেন না যে এটি কাজ করেছে তবে এফএফ 45.0.2 :( এ আর নেই
fralbo

5

ফাইল ইনপুটগুলির মানটি কেবলমাত্র (সুরক্ষার কারণে) পঠিত হয়। আপনি এটিকে প্রোগ্রাম্যাটিকভাবে ফাঁকা রাখতে পারবেন না (ফর্মটির রিসেট () পদ্ধতিটি কল করে ছাড়া, যার কেবলমাত্র ক্ষেত্রের চেয়ে বিস্তৃত সুযোগ রয়েছে)।


16
আমি বিভ্রান্ত হয়ে পড়েছি - আমি tried ("# ইনপুটকন্ট্রোল") চেষ্টা করেছি val ("") এবং এটি ক্ষেত্রটি ফাঁকা করে দিয়েছে। আমি কিছু অনুপস্থিত করছি?
সাম্পসন

1
@ জোনাথন, আমার পক্ষেও কাজ করে তবে আপনি যদি এটি অন্য কোনও কিছুতে সেট করেন তবে এটি একটি সুরক্ষা ত্রুটি। এফএফ 4 এ পরীক্ষিত।
ব্রেন্ডেন

রিসেট () হ'ল একটি জেএস নেটিভ পদ্ধতি তাই আপনি যদি jQuery এর মাধ্যমে ফর্মটি নির্বাচন করেন তবে আপনাকে উপাদানটি jQuery সুযোগের বাইরে নিয়ে যেতে হবে। $ ( "ফর্ম # myForm") [0] .reset ();
ক্রিস স্টিফেন্স

4
@ জোনাথন এটি আপনার পক্ষে কাজ করে কারণ আপনি এটি আইতে করেন নি। এই সুরক্ষা ইস্যু এমন কিছু যা কেবল আইই বন্ধ করে দেয়। মান সাফ করা ক্রম এবং ফায়ারফক্স উভয় ক্ষেত্রেই নিয়মিত কাজ করে তবে আইই নয়
15:

5

আমি নিম্নলিখিত কোডটি দিয়ে আমার কাজ করতে সক্ষম হয়েছি:

var input = $("#control");    
input.replaceWith(input.val('').clone(true));

5

আমি এইচটিএমএল ফাইল ইনপুট সাফ করার সহজ এবং পরিষ্কার উপায়ের সন্ধান করছিলাম, উপরের উত্তরগুলি দুর্দান্ত, তবে আমি যা খুজছি তার কোনও উত্তর সত্যই নেই, যতক্ষণ না আমি ওয়েবে এটির সহজ সরল উপায়টি না পেয়ে এসেছি:

var $input = $("#control");

$input.replaceWith($input.val('').clone(true));

সব ক্রেডিট চলতে চলতে এর ক্রিস Coyier

// Referneces
var control = $("#control"),
    clearBn = $("#clear");

// Setup the clear functionality
clearBn.on("click", function(){
    control.replaceWith( control.val('').clone( true ) );
});

// Some bound handlers to preserve when cloning
control.on({
    change: function(){ console.log( "Changed" ) },
     focus: function(){ console.log(  "Focus"  ) }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" id="control">
<br><br>
<a href="#" id="clear">Clear</a>


4

.clone()জিনিস নেই না অপেরা (এবং সম্ভবত অন্যান্য) কাজ করে। এটি বিষয়বস্তু রাখে।

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

এই জাতীয় কিছু ভাল কাজ করতে পারে (কুইন্টিনকেও ধন্যবাদ):

function clearInput($source) {
    var $form = $('<form>')
    var $targ = $source.clone().appendTo($form)
    $form[0].reset()
    $source.replaceWith($targ)
}

এটি কি সমস্ত বড় ব্রাউজারে পরীক্ষা করা হয়েছে?
শোক

এটি Chrome / FF / Opera এর সর্বশেষতম সংস্করণে এবং IE8 এ দুর্দান্ত কাজ করছে বলে মনে হচ্ছে। এটি কোনও কারণেই কাজ করবে না এমন কোনও কারণ আমি দেখতে পাচ্ছি না - ফর্মগুলিতে রিসেট বিকল্পটি দীর্ঘ সময় ধরে চলেছে।
চামচ NZ

4

আমি নিম্নলিখিতটি ব্যবহার করে এটি কাজ করতে সক্ষম হয়েছি ...

function resetFileElement(ele) 
{
    ele.val(''); 
    ele.wrap('<form>').parent('form').trigger('reset');   
    ele.unwrap();
    ele.prop('files')[0] = null;
    ele.replaceWith(ele.clone());    
}

এটি IE10, এফএফ, ক্রোম এবং অপেরাতে পরীক্ষা করা হয়েছে।

দুটি ক্যাভেট রয়েছে ...

  1. এখনও এফএফ-তে সঠিকভাবে কাজ করে না, আপনি পৃষ্ঠাটি রিফ্রেশ করলে ফাইল উপাদানটি নির্বাচিত ফাইলটির সাথে পুনরায় জনবহুল হয়। এটি কোথা থেকে এই তথ্যটি পাচ্ছে তা আমার বাইরে। একটি ফাইল ইনপুট উপাদান সম্পর্কিত আরও কি আমি সাফ করার চেষ্টা করতে পারি?

  2. আপনি ফাইল ইনপুট উপাদানটির সাথে সংযুক্ত থাকা যে কোনও ইভেন্টে প্রতিনিধি ব্যবহারের কথা মনে রাখবেন, তাই ক্লোনটি তৈরি হওয়ার পরে তারা এখনও কাজ করে।

আমি যা বুঝতে পারি না সে পৃথিবীতে কে আপনাকে একটি অবৈধ অগ্রহণযোগ্য ফাইল নির্বাচন থেকে কোনও ইনপুট ক্ষেত্র সাফ করার অনুমতি দিচ্ছে না তা ভাল ধারণা ছিল?

ঠিক আছে, আমাকে গতিরূপে এটি একটি মান দিয়ে সেট করবেন না যাতে আমি ব্যবহারকারীর ওএস থেকে ফাইলগুলি ফাঁস করতে পারি না, তবে পুরো ফর্মটি পুনরায় সেট না করে আমাকে একটি অবৈধ নির্বাচন সাফ করতে দিন let

এটি 'মেনে নেওয়ার মতো নয়' কোনওভাবেই ফিল্টার ব্যতীত অন্য কিছু করে এবং আইই 10 তে এটি এমএস ওয়ার্ড মাইম প্রকারগুলি বুঝতে পারে না, এটি একটি রসিকতা!


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

2

আমার ফায়ারফক্সে 40.0.3 এ শুধুমাত্র এটির সাথে কাজ করে work

 $('input[type=file]').val('');
 $('input[type=file]').replaceWith($('input[type=file]').clone(true));

1
। $ ( 'ইনপুট [টাইপ = ফাইল]') replaceWith (। $ ( 'ইনপুট [টাইপ = ফাইল]') ক্লোন (সত্য) .val ( ''));
Andrei

2

এটি প্রতিটি ব্রাউজারে আমার জন্য কাজ করে।

        var input = $(this);
        var next = this.nextSibling;
        var parent = input.parent();
        var form = $("<form></form>");
        form.append(input);
        form[0].reset();
        if (next) {
            $(next).before(input);
        } else {
            parent.append(input);
        }

1

ব্যবহারকারীরা উল্লিখিত বেশিরভাগ কৌশল নিয়ে চেষ্টা করেছি, তবে সেগুলির কোনওটিই সমস্ত ব্রাউজারে কাজ করেনি। যেমন: ক্লোন () ফাইল ইনপুটগুলির জন্য এফএফ তে কাজ করে না। আমি ফাইল ইনপুটটি ম্যানুয়ালি অনুলিপি করে শেষ করেছি এবং তারপরে অনুলিপিটি অনুলিপিটি দিয়ে rep এটি সমস্ত ব্রাউজারে কাজ করে।

<input type="file" id="fileID" class="aClass" name="aName"/>

var $fileInput=$("#fileID");
var $fileCopy=$("<input type='file' class='"+$fileInput.attr("class")+" id='fileID' name='"+$fileInput.attr("name")+"'/>");
$fileInput.replaceWith($fileCopy);

0

$("input[type=file]").wrap("<div id='fileWrapper'/>");
$("#fileWrapper").append("<div id='duplicateFile'   style='display:none'>"+$("#fileWrapper").html()+"</div>");
$("#fileWrapper").html($("#duplicateFile").html());

1
হাই নিরাজ। স্বাগত. এই উত্তরটি সঠিক হতে পারে তবে এটি কিছু ব্যাখ্যা ব্যবহার করতে পারে।
tomfanning

0

এটি ক্রোম, এফএফ এবং সাফারি দিয়ে কাজ করে

$("#control").val("")

আইই বা অপেরার সাথে কাজ করতে পারে না


1
ওপি
তে

1
একটি বাস্তু স্ক্রিপ্ট মান নয়, ইনপুট টাইপ ফাইলটির মান সুরক্ষার কারণে একটি সুরক্ষিত সম্পত্তি।
ই তথ্য 128

0

এটিকে অ্যাসিঙ্ক্রোনাস করুন এবং বোতামের পছন্দসই কাজ শেষ হওয়ার পরে এটি পুনরায় সেট করুন।

    <!-- Html Markup --->
    <input id="btn" type="file" value="Button" onchange="function()" />

    <script>
    //Function
    function function(e) {

        //input your coding here           

        //Reset
        var controlInput = $("#btn");
        controlInput.replaceWith(controlInput = controlInput.val('').clone(true));
    } 
    </script>


0

এটি আমার পক্ষে কাজ করে না:

$('#Attachment').replaceWith($(this).clone());
or 
$('#Attachment').replaceWith($('#Attachment').clone());

সুতরাং এসপি এমভিসি তে আমি ফাইল ইনপুট প্রতিস্থাপনের জন্য রেজার বৈশিষ্ট্যগুলি ব্যবহার করি। প্রথমে আইডি এবং নাম দিয়ে ইনপুট স্ট্রিংয়ের জন্য একটি ভেরিয়েবল তৈরি করুন এবং তারপরে এটি পৃষ্ঠাতে দেখানোর জন্য এবং রিসেট বোতামটি ক্লিক করে প্রতিস্থাপনের জন্য ব্যবহার করুন:

@{
    var attachmentInput = Html.TextBoxFor(c => c.Attachment, new { type = "file" });
}

@attachmentInput

<button type="button" onclick="$('#@(Html.IdFor(p => p.Attachment))').replaceWith('@(attachmentInput)');">--</button>

0

একটি সহজ উপায় হ'ল ইনপুট ধরণের পরিবর্তন করে আবার এটিকে পরিবর্তন করুন।

এটার মতো কিছু:

var input = $('#attachments');
input.prop('type', 'text');
input.prop('type', 'file')

-1

আপনি এটির মতো এর ক্লোন দিয়ে এটি প্রতিস্থাপন করতে পারেন

var clone = $('#control').clone();

$('#control').replacewith(clone);

তবে এর মান সহ এই ক্লোনগুলিও তাই আপনার মতো ভাল হয়েছিল

var emtyValue = $('#control').val('');
var clone = emptyValue.clone();

$('#control').replacewith(clone);

-4

এটি সহজ লওল (সমস্ত ব্রাউজারে [অপেরা বাদে] কাজ করে):

$('input[type=file]').each(function(){
    $(this).after($(this).clone(true)).remove();
});

জেএস ফিডল: http://jsfiddle.net/cw84x/1/


আমি অপেরা সম্পর্কে কম যত্ন করি না। আপনি যদি যত্ন নেন তবে কেবল এটি ফর্মটিতে মুড়িয়ে দিন। আমি ব্যক্তিগতভাবে যত্ন করি না এবং আমি আমার পদ্ধতিটি ব্যবহার করব।
বেনামে

2
এটি মোটেই ভাল উত্তর নয় তবে মূল সমস্যাটি ছিল সত্যই খারাপ মনোভাব
স্যাম পি

-5

কি? আপনার বৈধতা ফাংশনে, কেবল রাখুন

document.onlyform.upload.value="";

ধরে নিচ্ছি আপলোডের নাম:

<input type="file" name="upload" id="csv_doc"/>

আমি জেএসপি ব্যবহার করছি, নিশ্চিত না যে এটির কোনও পার্থক্য রয়েছে কিনা ...

আমার জন্য কাজ করে এবং আমি মনে করি এটি সহজতর উপায়।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.