Passing Image using Ajax to PHP

后端 未结 3 2174
时光说笑
时光说笑 2020-12-20 02:47

I am trying to pass an image and a title field value to PHP, I usually process file uploads straight with PHP using the $_FILES array, I am not sure how to create/pass this

相关标签:
3条回答
  • 2020-12-20 02:58

    You can use jQuery file upload plugin

    $('#imgOne').change(function(){ 
    
      $.ajaxFileUpload({
    
            fileElementId: 'imgOne',
            url: "../Controller/ProductController.php",
    
            dataType: 'json',
    
            success: function(response)
            {
             //Success Code Here
            },
    
            error: function()
            {
               //Error Code Here
            }
      });
    });
    
    0 讨论(0)
  • 2020-12-20 03:08
    1. First You need to Select image file through following line of html code

      input type="file" id="image_to_upload"
    2. After that you need to write the following jQuery code to catch this event.

          jQuery.noConflict();    
          formdata = new FormData();      
          jQuery("#image_to_upload").on("change", function() {
              var file = this.files[0];
              if (formdata) {
                  formdata.append("image", file);
                  jQuery.ajax({
                      url: "destination_ajax_file.php",
                      type: "POST",
                      data: formdata,
                      processData: false,
                      contentType: false,
                      success:function(){}
                  });
              }                       
          }); 
      
      
    3. In the destination ajax file you can access image by the following variable

      print_r($_FILES);
      

    More Info: http://www.rscoder.com/2020/06/how-to-upload-image-file-using-ajax.html

    0 讨论(0)
  • 2020-12-20 03:16

    I did that in one of my project, and following code works for me. Please do required modifications in code as your need.

    My Form button:

     <form name="upload_img" enctype="multipart/form-data" id="upload_img">
    <input type="file" style="display:none" id="upload-image" name="upload-image"></input>
    <button id="upload_image" type="button">Save</button>
    </form>
    

    My JQuery/Ajax :

    $('#upload_image').click(function()
    {
        var form = new FormData(document.getElementById('upload_img'));
        //append files
        var file = document.getElementById('upload-image').files[0];
        if (file) {   
            form.append('upload-image', file);
        }
        $.ajax({
            type: "POST",
            url: "URL",
            data: form,             
            cache: false,
            contentType: false, //must, tell jQuery not to process the data
            processData: false,
            //data: $("#upload_img").serialize(),
            success: function(data)
            {
                if(data == 1)
                    $('#img_msg').html("Image Uploaded Successfully");
                else
                    $('#img_msg').html("Error While Image Uploading");
            }
        });
        //alert('names');
    
    
    });
    
    0 讨论(0)
自定义标题
段落格式
字体
字号
代码语言
提交回复
热议问题