http://codepen.io/anon/pen/ZWXmpd
<div class="upload-image">
<div class="upload-image-preview"></div>
<input type="file" name="file" value="Upload Image" />
</div>
If you want to showcase an image before uploading it, you can utilize the following code snippet.
var _URL = window.URL || window.webkitURL;
$("#file").change(function(e) {
var image, file;
if ((file = this.files[0])) {
image = new Image();
image.onload = function() {
src = this.src;
$('#uploadPreview').html('<img src="'+ src +'"></div>');
e.preventDefault();
}
};
image.src = _URL.createObjectURL(file);
});#uploadPreview {
border: 1px solid red;
width: 200px;
height: 200px;
overflow: hidden;
}
#uploadPreview img {
min-width: 100%;
min-height: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="file"/>
<div id="uploadPreview">
</div>One efficient way to achieve this is by using jQuery.
$("input[name=file]").change(function () {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
var img = $('<img>').attr('src', e.target.result);
$('.upload-image-preview').html(img);
};
reader.readAsDataURL(this.files[0]);
}
});
To ensure the image size matches that of the preview div, apply this CSS code:
.upload-image-preview img{
width: 100%;
height: 100%;
}
Upon successful image upload, the path of the image is returned. Utilizing JavaScript, you can display the uploaded image using an ajax call.
Is there a way to eliminate an empty array from within a parent array prior to adding a new element? In the structure provided, it appears as follows: var parentArray = [ ['123', '345'], [], ['12'] ] The goal is to remove t ...
I'm facing an issue where the descendant selector is overriding my .red_p class. Is there a way to prevent this from happening without having to assign a class to each p element individually? HTML: <html> <head> <style> ...
I am encountering a JSONDecodeError when attempting to send a POST request from AJAX to Django's views.py. The POST request sends an array of JSON data which will be used to create a model. I would greatly appreciate any helpful hints. Error: Except ...
Attempting to implement this plugin in my Ionic 5 application: https://www.npmjs.com/package/cordova-plugin-k-nfc-acr122u I have added the plugin using cordova plugin add cordova-plugin-k-nfc-acr122u but I am unsure of how to use it. The plugin declares: ...
I am faced with the following scenario where I need to filter an array of objects based on lineId, subFamily, and status. My current code successfully filters based on lineId, but now I also need to include a condition for subFamilyId. I have two specifi ...
Before we dive in, a quick disclaimer: My knowledge of JS is limited, and I typically learn on the go when creating scripts. However, my usual method didn't work this time. Currently, I'm working on a small JS script that will function as a book ...
Is there a way to incorporate jquery.multiselect.js into the db.auth_user table or default/user/register page? I have been trying to figure it out, but not sure how to modify the html page or controller to make it work. auth.settings.extra_fields['au ...
While working on implementing the search functionality with AJAX and PHP, I encountered an issue where displaying the search results breaks the navbar layout. https://i.sstatic.net/FctpA.png this is the navigation bar code <nav class="navbar ...
Exploring material-ui, I have implemented two themes: const darkTheme = createMuiTheme({ palette: { type: "dark" } }); const lightTheme = createMuiTheme({ palette: { type: "light" } }); However, when utilizing the Typography component, t ...
Is there a way to generate a JSON object only with the input fields that have been modified before submitting the form? How can I capture and store each changed value in the form as JSON data? $(document).ready(function() { $('#save').clic ...
My Application consists of two main components: Button and Input Upon clicking the Click to update state button, the input value initially set as May should be updated to May New. However, I noticed that this change is not taking place. Upon inspecting t ...
My goal is to become proficient in React, so I decided to install Node.js (v 10.16.0 LTS) and run the following commands using Windows Powershell: npx create-react-app my-app cd my-app npm start However, after making changes to the code (such as modifyin ...
In my project using Laravel Blade, I am currently in the process of converting some blade files to Vue components. One challenge I encountered is trying to display a dynamically created page title on the screen from the Vue component rather than the blade ...
In my asp.net mvc project, I am dealing with numerous checkboxes. The client has provided me with a PSD file in which the checkboxes are either white or black. In the absence of any check mark indicator, I assume the black ones are checked. My goal is to r ...
Would it be feasible to style an unordered list to resemble a dropdown menu using only CSS, without relying on external libraries like jQuery or MooTools? Appreciate your insights. Warm regards, Neil. ...
In my code, there are two pushStates that I need to read separately and execute different functions for. However, when the form is not submitted, the related pushState does not trigger and results in this error: Uncaught TypeError: Cannot read property &ap ...
Currently, I am involved in a project using AngularJS where we have implemented a .constant() provider to define some fundamental details that are utilized throughout the entire project. An example of this would be specifying a cookie name like so: .const ...
When making a post request, I need to include an array with an object inside. I have observed that adding new properties inside an object works fine. However, when attempting to add properties while the object is inside an array, it does ...
I am facing a React.js task that involves sending a POST request to the server. I need to trigger this POST request when a user clicks on the submit button. However, I keep encountering two specific errors: App.js:19 POST http://localhost:3001/ net::ERR_CO ...
Hello everyone, I've encountered an issue that has me a bit stumped. I recently took over a project and found a problem in which the previous developer was attempting to join an array of strings. Unfortunately, when I try to build the project, I keep ...