2015-09-06 10 views
5

Ich habe diese Bootstrap-Datei Eingang Plugin zu entfernen, die hier gefunden werden kann: http://plugins.krajee.com/file-basic-usage-demoWie Upload-Button in Bootstrap-Datei Eingang

Dieses Plugin wie unten aussieht:

enter image description here

Nun, was ich will zu tun ist, diese Upload-Schaltfläche dieses Plugins zu entfernen. Weiß jemand, wie man das macht? Oder hat jemand schon versucht? Danke vielmals.

+0

Ich glaube nicht, dass Sie auf diese Schaltfläche entfernen sollte. Die Datei wird nur an Server * gesendet, nachdem Sie auf die Schaltfläche 'Hochladen' geklickt haben. Die 'Durchsuchen'-Schaltfläche ist nicht genug, sie wird nur für die Dateiauswahl verwendet. –

+0

Ich wollte nur den Upload-Button entfernen und stattdessen den Submit-Button hinzufügen, weil ich dieses Bild in db speichern möchte. – Makudex

+1

Sie können nur das 'uploadLabel' ändern. Weitere Informationen finden Sie in der Dokumentation unter https://github.com/kartik-v/bootstrap-fileinput. –

Antwort

11

fand schließlich die Antwort, indem man einfach die Bearbeitung diesen Code hier aus fileinput.js:

$.fn.fileinput.defaults = { 
    language: 'en', 
    showCaption: true, 
    showPreview: true, 
    showRemove: true, 
    showUpload: false, // <------ just set this from true to false 
    showCancel: true, 
    showUploadedThumbs: true, 
    // many more below 
}; 
+0

Beachten Sie, dass sich in der letzten Version wahrscheinlich einige Standardeinstellungen geändert haben, da Ihr Code eine Ausnahme verursacht. Verwenden Sie es jedoch wie folgt: "$ .fn.fileinput.defaults.showUpload = false;" funktioniert. Vielen Dank! –

+0

Die Antwort von Hanny Setiawan wird überleben, wenn Sie oder ein anderer Entwickler die Version der Bootstrap-Dateiupload-Bibliothek aktualisieren, die Sie in Ihrem Projekt verwenden. Diese Änderung geht verloren. –

15

Sie können nur diese folgenden Schnipsel verwenden

$("#your-input-type-file-ID").fileinput({ 
    'showUpload': false 
}); 
+1

Dies ist richtigere Antwort dann gewählt, da ausgewählte Antwort Bibliothek Einstellungen direkt ändert :) –

+1

Hi @ StrahinjaDjurić für mich Ich mag einfach nicht "nicht native" Lösungen. Also für Programmierer schlage ich immer "native" Lösungen für alles vor. Danke sowieso Bruder. –

4

Sie es auf einfache Art und Weise tun, können auch einfach schreiben in einem Attribut data-show-upload="false" und es werde ich auch arbeiten !!

0

 <!-- bootstrap 4.x is supported. You can also use the bootstrap css 3.3.x versions --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"> 
 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" /> 
 
    <!-- if using RTL (Right-To-Left) orientation, load the RTL CSS file after fileinput.css by uncommenting below --> 
 
    <!-- link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/css/fileinput-rtl.min.css" media="all" rel="stylesheet" type="text/css" /--> 
 
    <!-- optionally uncomment line below if using a theme or icon set like font awesome (note that default icons used are glyphicons and `fa` theme can override it) --> 
 
    <!-- link https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css media="all" rel="stylesheet" type="text/css" /--> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
    <!-- piexif.min.js is only needed for restoring exif data in resized images and when you 
 
     wish to resize images before upload. This must be loaded before fileinput.min.js --> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/plugins/piexif.min.js" type="text/javascript"></script> 
 
    <!-- sortable.min.js is only needed if you wish to sort/rearrange files in initial preview. 
 
     This must be loaded before fileinput.min.js --> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/plugins/sortable.min.js" type="text/javascript"></script> 
 
    <!-- purify.min.js is only needed if you wish to purify HTML content in your preview for 
 
     HTML files. This must be loaded before fileinput.min.js --> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/plugins/purify.min.js" type="text/javascript"></script> 
 
    <!-- popper.min.js below is needed if you use bootstrap 4.x. You can also use the bootstrap js 
 
     3.3.x versions without popper.min.js. --> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script> 
 
    <!-- bootstrap.min.js below is needed if you wish to zoom and preview file content in a detail modal 
 
     dialog. bootstrap 4.x is supported. You can also use the bootstrap js 3.3.x versions. --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" type="text/javascript"></script> 
 
    <!-- the main fileinput plugin file --> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/fileinput.min.js"></script> 
 
    <!-- optionally uncomment line below for loading your theme assets for a theme like Font Awesome (`fa`) --> 
 
    <!-- script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/themes/fa/theme.min.js"></script --> 
 
    <!-- optionally if you need translation for your language then include locale file as mentioned below --> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.5/js/locales/LANG.js"></script> 
 
    
 
    
 
    
 
     <script src="http://goanyone.com/js/fileinput.js" type="text/javascript"></script> 
 

 

 

 
     <div class="file-loading"> 
 
     <input id="input-44" type="file" class="file" data-preview-file-type="text"> 
 
    </div> 
 
    <script> 
 
    $(document).on('ready', function() { 
 
     $("#input-44").fileinput({ 
 
      uploadUrl: 'file-upload-batch', 
 
      maxFilePreviewSize: 10240 
 
     }); 
 

 

 
    }); 
 
    </script> 
 
    <div id="errorBlock" class="help-block"></div>