Hello people

I am trying to write some code that will allow the user to upload an image and then see a preview of the image in the browser.

I was wondering whether it was possible to restrict the file types that the user will be able to choose from in the file selection dialog that is opened when the tag <input type="file"> is provided. I would like to restrict the selection to: gif, jpeg, jpg, png, bmp.

Once a selection is made, the path to the local file can be found in the tag's value attribute. I would like to display the selected image in a preview.

Since the width & the height of the newly uploaded image can be very large, I would like to restrict it to bounding dimensions. In order to be able to do so, I need to know the width and height of the newly uploaded image. Is it possible to obtain that information on the client side using Javascript, or do I need to interact with the server (I am using PHP)?

If all this is not possible, and must interact with the server, is it possible to display a progress bar that will show the progress of the image being uploaded? If so, I would appreciate if someone could point me to an article or some code snippet.

thanks in advance