Using the given form, I first click on "Choose File", open the file,its name comes next to it and then I click on "Upload" button" to upload the image.What I want to do is click on "Choose File", open the file but the name should not appear next to it and the image should get uploaded without clicking the "Upload button" after this.How can this be achieved?
- <div id="image_container" name="image_container">
- <img src="../image/ab.jpg" alt="Cover" width="900px" height="500px">
- <div class="btn-group" id="cov" name="cov" >
- <button class="btn dropdown-toggle" data-toggle="dropdown" id="mybtn" onclick="dropdown()">Action</button>
- <ul class="dropdown-menu" id="dropdown-menu" style="display:none">
- <!-- dropdown menu links -->
- <li><form action="upload.php" method="post" enctype="multipart/form-data" id="MyUploadForm">
- <input name="ImageFile" id="imageInput" type="file" />
- <label id="fileup" for="imageInput">Upload File</label>
- <input type="submit" id="submit-btn" value="Upload" />
- <img src="img/loader.gif" id="loading-img" style="display:none;" alt="Please Wait"/>
- </form>
- <div id="output"></div>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a href="#">Another link</a></li>
- </ul>
- </div>
- </div>
- $(document).ready(function() {
- var options = {
- target: '#output', // target element(s) to be updated with server response
- beforeSubmit: beforeSubmit, // pre-submit callback
- success: afterSuccess, // post-submit callback
- resetForm: true // reset the form after successful submit
- };
-
- $('#MyUploadForm').submit(function() {
- $(this).ajaxSubmit(options);
- // always return false to prevent standard browser submit and page navigation
- return false;
- });
- });