Uploading image with Jquery

Navigation
1

How to upload image using Jquery?

This is a question that has been haunting me for a long time, I hope you can help me.

Well, I've been researching and I've seen a plugin for this, ajaxForm. But I do not find structure to use it, in the page itself has some examples but I had the ability to not understand how to do.

There is also the FormData that I do not know where it is from, I will search. If you can help me with one of those two, whichever is more feasible and easy. I will be very grateful.

Thank you in advance!

(A great way to help me would be with the structure of what to give example, so I can learn by looking at how it is done).

    
asked by anonymous 25.05.2016 / 00:23

2 answers

5

Basically

Create a page with a form tag and place two input elements of type file and a button of type button . Do not forget to make the JQuery reference on your page. As demonstrated in this link . 

<html>
<head>
    <title>Upload</title>
</head>
<body>
    <form>
        <input type="file" name="fileimagem" id="fileimagem" />
        <button type="button" id="btn">Enviar</button>
    </form>
    <script type="text/javascript" src="js/jquery-1.12.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#btn").on('click', function(){

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

                $.ajax({
                    url: 'save.php',
                    data: data,
                    processData: false,
                    contentType: false,
                    type: 'POST',
                    success: function(data) 
                    {
                        alert(data);
                    }
                });

            });
        });
    </script>
</body>
</html>

After creating the page, now create the very simple PHP script to save the image to some directory within your Web application. 

<?php   

    if (!empty($_FILES['fileimagem']))
    {
        echo move_uploaded_file($_FILES['fileimagem']['tmp_name'], 'img/'.$_FILES['fileimagem']['name']);       
    }
    else
    {
        echo 'false';
    }

Good reading:

1 - move_uploaded_file

2 - Sending multipart / formdata with jQuery.ajax

3 - FormData

4 - jQuery Form Plugin

    
25.05.2016 / 05:22
1

I recommend using Plupload . Quite popular, with good documentation.

SourceCode:

<divid="uploader">
    <p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
</div>
 
<script type="text/javascript">
// Initialize the widget when the DOM is ready
$(function() {
    // Setup html5 version
    $("#uploader").pluploadQueue({
        // General settings
        runtimes : 'html5,flash,silverlight,html4',
        url : "/examples/upload",
         
        chunk_size : '1mb',
        rename : true,
        dragdrop: true,
         
        filters : {
            // Maximum file size
            max_file_size : '10mb',
            // Specify what files to browse for
            mime_types: [
                {title : "Image files", extensions : "jpg,gif,png"},
                {title : "Zip files", extensions : "zip"}
            ]
        },
 
        // Resize images on clientside if we can
        resize: {
            width : 200,
            height : 200,
            quality : 90,
            crop: true // crop to exact dimensions
        },
 
 
        // Flash settings
        flash_swf_url : '/plupload/js/Moxie.swf',
     
        // Silverlight settings
        silverlight_xap_url : '/plupload/js/Moxie.xap'
    });
});
</script>
    
25.05.2016 / 09:46
Vision layer is not updating How do I retrieve my adm access to WordPress?