/    Sign up×
Community /Pin to ProfileBookmark

some questions regarding the uploading of images

Copy linkTweet thisAlerts:
Jul 01.2004

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

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@96turnerriJul 01.2004 — it would be best to do all this in php, mod move this to php forum, and ill help then ?
Copy linkTweet thisAlerts:
@davidklonskiauthorJul 01.2004 — Actually I know how to do this in PHP.

I trying to see if it is possible to be done on the client side via Javascript. I am trying to save interactions with the server.

In the worst case, it will be done in PHP as you suggested.
Copy linkTweet thisAlerts:
@96turnerriJul 01.2004 — ok well since JavaScript cannot upload files it would be better done server side in php

however

try this for valiading file types

http://javascript.internet.com/forms/upload-filter.html

but you will need server side validation for non JS users, using MIME-types
×

Success!

Help @davidklonski spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...