I am having a trouble trying to use a JavaScript code for upload files (http://tutorialzine.com/2013/05/mini-ajax-file-upload-form/) in WordPress.
Following the recommendations of WordPress, I have created a plugin that enqueues the scripts and the styles required by the JavaScript code. The appearance of the script is:
function add_mini_ajax_file_upload_scrips() {
wp_enqueue_style('uploadBoxStyleFont', "http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" );
wp_enqueue_style('uploadBoxStyle', "http://localhost/wordpress/assets/MiniAJAX_FileUploader/css/style.css" );
wp_enqueue_script('uploadBoxJquerymin', "https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js");
wp_enqueue_script('uploadBoxJqueryknob', "http://localhost/wordpress/assets/MiniAJAX_FileUploader/js/jquery.knob.js");
wp_enqueue_script('uploadBoxJquerywidget', "http://localhost/wordpress/assets/MiniAJAX_FileUploader/js/jquery.ui.widget.js");
wp_enqueue_script('uploadBoxJqueryiframe', "http://localhost/wordpress/assets/MiniAJAX_FileUploader/js/jquery.iframe-transport.js");
wp_enqueue_script('uploadBoxJqueryupload', "http://localhost/wordpress/assets/MiniAJAX_FileUploader/js/jquery.fileupload.js");
wp_enqueue_script('uploadBoxScript', "http://localhost/wordpress/assets/MiniAJAX_FileUploader/js/script.js");
}
add_action( 'wp_enqueue_scripts', 'add_mini_ajax_file_upload_scrips' );
In this manner, the WordPress page looks as:
As yo can see, a button with the text "Examinar ..." appears very uggly below the "Browse" button.
However, if I paste the following code directly on the WordPress Page:
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel='stylesheet' />
<link href="http://localhost/wordpress/assets/MiniAJAX_FileUploader/css/style.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://localhost/wordpress/assets/MiniAJAX_FileUploader/js/jquery.knob.js"></script>
<script src="http://localhost/wordpress/assets/MiniAJAX_FileUploader/js/jquery.ui.widget.js"></script>
<script src="http://localhost/wordpress/assets/MiniAJAX_FileUploader/js/jquery.iframe-transport.js"></script>
<script src="http://localhost/wordpress/assets/MiniAJAX_FileUploader/js/jquery.fileupload.js"></script>
<script src="http://localhost/wordpress/assets/MiniAJAX_FileUploader/js/script.js"></script>
Obviously, I want the appearance of the second way but WordPress recommends the first way to add JavaScript and styles.
Someone can tell me what is happening and how can I get the correct appearance (removing the uggly "Examinar" button)?
Thank you very much.