jQuery फ़ाइल अपलोड अपलोड को ट्रिगर नहीं कर रहा है

Question

मैं फ़ाइलें अपलोड करने के लिए इस कोड का उपयोग कर रहा हूँ:

<form>
<script src="/static/js/vendor/jquery.ui.widget.js"></script>
<script src="/static/js/jquery.iframe-transport.js"></script>
<script src="/static/js/jquery.fileupload.js"></script>

<p>
    <input id="fileupload" type="file" name="files[]" data-url="/upload-files/" multiple="multiple">
</p>

<p>
    <button id="upload-images-button" class="upload-images btn btn-success btn-large">Add images</button>
</p>
</form>

<script>

$(document).ready(function() {
    $('.upload-images').click(function() {
        $('#fileupload').trigger('click');
    });
});

$(function () {
    $('#fileupload').fileupload({
        autoUpload: true,
        dataType: 'json',
        done: function (e, data) {
            alert('uploaded');
        }
    });
});

</script>

#fileupload पर क्लिक करना ठीक काम करता है: यह ब्राउज़र फ़ाइल चयन विंडो खोलता है, और एक बार जब मैं एक फ़ाइल का चयन करता हूं, तो यह data-url के लिए अनुरोध करता है और alert('uploaded') को ट्रिगर करता है।

लेकिन #upload-images-button पर क्लिक करने से काम नहीं चलता: यह ब्राउज़र फ़ाइल चयन विंडो खोलता है, लेकिन मेरे द्वारा किसी फ़ाइल का चयन करने के बाद, कुछ नहीं होता है।

javascript jquery file-upload browser image-uploading

1

Joe Mornin 16 नवम्बर 2015, 05:46

Answer 1

मुझे अंत में यह समझ आ गया। <button> सबमिट बटन के रूप में कार्य कर रहा था—इसलिए fileupload() को ट्रिगर करने के बजाय, वह फ़ॉर्म सबमिट करने का प्रयास कर रहा था। type="button" को <button> में जोड़ने से बटन को एक साधारण बटन की तरह व्यवहार करने से हल हो गया।

0

Joe Mornin 21 नवम्बर 2015, 23:09

Answer 2

अगर कोई और इसे ढूंढ रहा है

यहां विकी दस्तावेज़ से: https://github.com/blueimp/jQuery-File-Upload/wiki/Multiple-File-Input-Fields-in-One-Form

उदाहरण के लिए एक अतिरिक्त फ़ाइल इनपुट फ़ील्ड जोड़ने के तरीके पर एक संक्षिप्त तरीका निम्नलिखित है: index.html में इस तरह "fileinput-button" वर्ग के साथ स्पैन टैग को डुप्लिकेट करें:

<form id="fileupload" action="php/index.php" method="POST" enctype="multipart/form-data">
<div class="row">
    <div class="span16 fileupload-buttonbar">
        <div class="progressbar fileupload-progressbar"><div style="width:0%;"></div></div>
        <span class="btn success fileinput-button">
            <span>Add files...</span>
            <input type="file" name="files[]" multiple>
        </span>
        <!-- Extra file input start /-->
        <span class="btn fileinput-button">
            <span>Other...</span>
            <input type="file" name="files2[]" multiple>
        </span>
        <!--/ Extra file input stop -->
        <button type="submit" class="btn primary start">Start upload</button>
        <button type="reset" class="btn info cancel">Cancel upload</button>
        <button type="button" class="btn danger delete">Delete selected</button>
        <input type="checkbox" class="toggle">
    </div>
</div>
<br>
<div class="row">
    <div class="span16">
        <table class="zebra-striped"><tbody class="files"></tbody></table>
    </div>
</div>

इसलिए fileinput-button वर्ग का उपयोग करने से मुझे मदद मिली।

0

Janspeed 2 जिंदा 2017, 16:23

Answer 3

यह प्रश्न एक संभावित डुप्लिकेट है Jquery फ़ाइल अपलोड .

लेकिन अपने प्रश्न का उत्तर देने के लिए आप इसे इस तरह कर सकते हैं:

$(function () {
    $('#fileupload').fileupload({
        autoUpload: true,
        dataType: 'json',
        add: function (e, data) {            
            $(".upload-images").unbind('click').on('click', function() {
                data.submit();
            });
        },
        done: function (e, data) {
             alert('uploaded');
        }
    });
});

ऐसा करने से डबल-पोस्टिंग बंद हो जाएगी

-1

Community 23 मई 2017, 15:01

jQuery फ़ाइल अपलोड अपलोड को ट्रिगर नहीं कर रहा है

3 जवाब

संबंधित सवाल

जुड़े हुए प्रश्न

नए सवाल