Upload an image with jquery ajax with a duplicate-able input

Asked
Active3 hr before
Viewed126 times

9 Answers

inputuploadimage
90%

Stack Overflow Public questions & answers ,provide an interface to upload files to server,note: with this, you don't need to duplicate any input form for file upload, as you can upload as many file as you like, as long as your server can handle it ofcourse ;), Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers

It was as simple as adding method="post" action="http://globalgeorgia.co.za/modules/mod_appform/js/mail.php" and then also type="submit" to the submit function and it works perfectly in IE 7 and IE 8 and then also this:

if (isValid) {
    getValues();
    var jsonData = JSON.stringify(result);  

    (function() {
    var bar = jQuery('.bar');
    var percent = jQuery('.percent');
    var status = jQuery('#status');
    jQuery('#spinner').html('<img src="http://globalgeorgia.co.za/modules/mod_appform/js/ajax-loader.gif" />');

    jQuery('#app_form').ajaxForm({
        type: "POST",
        url: "http://globalgeorgia.co.za/modules/mod_appform/js/mail.php",
        dataType: "json",
        //iframe: true,
        data: {parameters: jsonData},
        beforeSend: function() {
            status.empty();
            jQuery('#spinner').html();
            var percentVal = '0%';
            bar.css("width", percentVal)
            percent.html(percentVal);
        },
        uploadProgress: function(event, position, total, percentComplete) {
            var percentVal = percentComplete + '%';
            bar.css("width", percentVal)
            percent.html(percentVal);
        },
        complete: function(xhr) {
            status.html(xhr.responseText);
            jQuery('#spinner').html("sent");
        }
    }); 

    })();   
} 
load more v
88%

I have been using THIS plugin to upload files as an email attachment, i have gotten it to the point where it actually works, the only problem is it currently uses this to submit:,and then the form i need to combine the working one with JSFIDDLE (i have shortened it to only the upload fields, but there is a bunch of other information),I have duplicate-able fields that on submit the information gets put into a JSON array and then gets parsed to an email by PHP, what i was trying to do is have a file field where images get uploaded and sent with the email, but after researching a lot on the web I found that this is not possible with ajax so I found THIS plugin that actually works and now i am just trying to combine it with my original form,UPDATE: I have almost solved this problem, please see Jquery form no submission to IE7 and IE8 i just need to sort ot ie7 and ie8,

jQuery.ajax({
   beforeSend: function() {
      status.empty();
      var percentVal = '0%';
      bar.css("width", percentVal)
      percent.html(percentVal);
   },
   uploadProgress: function(event, position, total, percentComplete) {
      var percentVal = percentComplete + '%';
      bar.css("width", percentVal)
      percent.html(percentVal);
      //console.log(percentVal, position, total);
   },
   complete: function(xhr) {
      status.html(xhr.responseText);
   }
});
load more v
72%

$(document).ready(function() {

   $("#but_upload").click(function() {

      var fd = new FormData();
      var files = $('#file')[0].files[0];
      fd.append('file', files);

      $.ajax({
         url: 'upload.php',
         type: 'post',
         data: fd,
         contentType: false,
         processData: false,
         success: function(response) {
            if (response != 0) {
               $("#img").attr("src", response);
               $(".preview img").show(); // Display image element
            } else {
               alert('file not uploaded');
            }
         },
      });
   });
});
load more v
65%

Lets upload file using ajax JQuery.,We can send the file to the server using the JQuery Ajax method. And we also preview image file before uploading on the server.,Upload image File – JQuery Ajax,First, we need a form and a container for a preview image. Create a file name index.html and paste the below code in it.

<div class="container">
   <div class="ml-2 col-sm-4">
      <div id="msg"></div>
      <form method="post" id="image-form" enctype="multipart/form-data" onSubmit="return false;">
         <div class="form-group">
            <input type="file" name="file" class="file">
            <div class="input-group my-3">
               <input type="text" class="form-control" disabled placeholder="Upload File" id="file">
               <div class="input-group-append">
                  <button type="button" class="browse btn btn-primary">Browse...</button>
               </div>
            </div>
         </div>
         <div class="form-group">
            <img src="https://placehold.it/80x80" id="preview" class="img-thumbnail">
         </div>
         <div class="form-group">
            <input type="submit" name="submit" value="Upload" class="btn btn-danger">
         </div>
      </form>
   </div>
</div>
load more v
75%

Copy and edit the html/jQuery code as per requirement.,How to upload files asynchronously using jQuery?,How to fetch data from JSON file and display in HTML table using jQuery ?,How to fire an event on file select using jQuery ?

40%

Ability to copy and paste files or images from the clipboard on to the fileinput plugin (just focus on the file caption name input and paste your clipboard content).,Ability to drag and drop files or images on to the fileinput plugin.,Ability to theme the widget entirely and control styling and layouts.,Ability to sort/rearrange content in the initial preview via drag and drop.

Installation via bower package manager is as simple as running:

$ bower install bootstrap - fileinput
load more v
22%

Select2 supports pagination ("infinite scrolling") for remote data sources out of the box. To use this feature, your remote data source must be able to respond to paginated requests (server-side frameworks like Laravel and UserFrosting have this built-in).,page : The current page number to request. Only sent for paginated (infinite scrolling) searches., 6. Data sources The Select2 data format Ajax (remote data) Arrays ,You can use the ajax.processResults option to transform the data returned by your API into the format expected by Select2:

In your HTML:

<select class="js-data-example-ajax"></select>
load more v
60%

The easiest and simplest way for a developer to accomplish an Ajax file upload is to use pure JavaScript and leave the bulky libraries and frameworks behind.,A developer can perform an Ajax-based file upload to a server with JavaScript in five steps:,When notified that the JavaScript file upload was successful, send an Ajax based alert to the client.,A pure JavaScript file uploader simplifies Ajax based interactions with the server.

The following HTML5 tags provide the required components to add a file selector and an upload button to any web page:

<input id="fileupload" type="file" name="fileupload" />
<button id="upload-button" onclick="uploadFile()"> Upload </button>

The button kicks off a method named uploadFile(), which contains the JavaScript file upload logic.

<script>
async function uploadFile() {
    let formData = new FormData();           
    formData.append("file", fileupload.files[0]);
    await fetch('/upload.php', {
      method: "POST", 
      body: formData
    });    
    alert('The file has been uploaded successfully.');
}
</script>
load more v
48%

In this tutorial, I show how you can upload multiple image files and display preview after upload using jQuery AJAX and PHP.,You can upload single or multiple files using jQuery AJAX.,Home » AJAX » How to upload Multiple Image files with jQuery AJAX and PHP,Use <div id='preview'> to show image preview using jQuery AJAX after successfully upload.

Completed Code

<style type="text/css">
#preview img{
   margin: 5px;
}
</style>
<form method='post' action='' enctype="multipart/form-data">
   <input type="file" id='files' name="files[]" multiple><br>
   <input type="button" id="submit" value='Upload'>
</form>

<!-- Preview -->
<div id='preview'></div>
load more v

Other "input-upload" queries related to "Upload an image with jquery ajax with a duplicate-able input"