How do I get an image from an input file?

Question

Someone tells me, what do I need to get an image of the input file and show it or save it? do I need to use javascript? or just html and php?

I’ve already googled, but I’m finding something explaining step by step, I’ve looked here tbm, but I’ve only seen things a little more specific...

Answer 1

Pre preview before upload

To display an image preview before uploading, see below for an example:

function ImagePreview(input)
{

    if (input.files && input.files[0])
	{

        var r = new FileReader();

        r.onload = function(e)
		{
			$("#img_preview").show();
            $("#img_preview").attr("src", e.target.result);
        }

        r.readAsDataURL(input.files[0]);

    }
}

$().ready(function() {

	hide_empty_image = false;
	set_blank_to_empty_image = false;
	set_image_border = true;

	if (hide_empty_image)
		$("#img_preview").hide();

	if (set_blank_to_empty_image)
		$("#img_preview").attr("src","data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=");

	if (set_image_border)
		$("#img_preview").css("border", "1px solid #05bbcc");
  
    $("#img_preview").css("width", "150px");
    $("#img_preview").css("height", "150px");

	$("#img_input").change(function(){
		ImagePreview(this);
	});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="frm1">
    <input type="file" id="img_input" />
    <br /><img id="img_preview" src="" alt="Image Preview" />
</form>

To upload

There are hundreds of cases in Stackoverflow, you can consult this answer: /a/93198/4793

If you want to find more results: /search?q=php+upload