Create File Upload Option with jQuery in WordPress

You get a image or file upload option field in your custom post type? Please see & follow our instruction. You can use wordpress default media file uploader by using this code and simply retrieve link of image in jquery. Before you begin, please make sure you make a backup of functions.php and any other files you edit before making changes with your live website.

Copy the below code & paste in to your desire place, where you want to see….

HTML code

<p><strong>Upload Your File Here</strong><br />

<label for=”upload_image”>
<input id=”upload_image” type=”text” size=”36″ name=”ad_image” placeholder=”https//” value=”<?= $custom[“ad_image”][0] ?>” />
<input id=”upload_image_button” class=”button” type=”button” value=”Upload Doc. File” />
<br />Enter a URL or upload your file</label>

jQuery code

<script>
jQuery(document).ready(function($){
var custom_uploader;
$(‘#upload_image_button’).click(function(e) {
e.preventDefault();
//If the uploader object has already been created, reopen the dialog
if (custom_uploader) {
custom_uploader.open();
return;
}
//Extend the wp.media object
custom_uploader = wp.media.frames.file_frame = wp.media({
title: ‘Choose File’,
button: {
text: ‘Choose File’
},
multiple: true
});
//When a file is selected, grab the URL and set it as the text field’s value
custom_uploader.on(‘select’, function() {
console.log(custom_uploader.state().get(‘selection’).toJSON());
attachment = custom_uploader.state().get(‘selection’).first().toJSON();
$(‘#upload_image’).val(attachment.url);
});
//Open the uploader dialog
custom_uploader.open();
});
});
</script>

 

​Leave a Comment

Comment authors age:




How to Create Custom Post Type in WordPress

A Perfect Marketing Strategies Which Developed Your Sales