I am new to web design and just kind aself teaching myself. But would appreciate some help.

I am trying to make a webpage i have to allow people to dowload pictures to it. This is what i have so far. It is basically just the browse and enter text part.

I need help in how to actually getting it show up on the webpage and to allow more to be uploaded next to ones that already exist.

Could someone help me out on this? Thanks!

<form method="post" action="main2.htm"
 name="submit" enctype="multipart/form-data"><span
 style="color: rgb(255, 0, 0); font-weight: bold;">UPLOAD
YOUR PICTURES HERE!!!<br>
  <br>
Enter Some Text:</span> <input name="textfield"
 type="text"><br>
  <br>
  <span style="color: rgb(255, 0, 0); font-weight: bold;">Choose
A File</span><span style="font-weight: bold;">:</span>
  <input name="filefield" type="file"><br>
  <br>
  <input name="su bmit" value="submit" type="submit"><br>
</form>
<form target="_blank" enctype="multipart/form-data"
 name="upload"></form>

Dani AI

Generated

Building on the pointers from , and , here is a compact, practical roadmap to get uploads saved and displayed as a growing gallery. The essential steps are: validate the incoming file on the server, give it a safe unique name (so new uploads do not overwrite existing images), store its metadata (filename, caption, timestamp) so you can list images later, and generate/display scaled thumbnails so pages load fast.

A minimal server-side flow (PHP example) that demonstrates the checks and safe naming:

<?php
$uploadDir = __DIR__ . '/uploads';
$maxBytes = 2 * 1024 * 1024;
$allowed = ['image/jpeg'=>'jpg','image/png'=>'png','image/gif'=>'gif'];

if (empty($_FILES['image'])) exit('No file');

$f = $_FILES['image'];
if ($f['error'] !== UPLOAD_ERR_OK) exit('Upload error '.$f['error']);
if ($f['size'] > $maxBytes) exit('Too large');

$info = getimagesize($f['tmp_name']);
if ($info === false || !isset($allowed[$info['mime']])) exit('Invalid image type');

$ext = $allowed[$info['mime']];
$dest = $uploadDir . '/' . time() . '_' . bin2hex(random_bytes(6)) . '.' . $ext;

if (!move_uploaded_file($f['tmp_name'], $dest)) exit('Move failed');

// save $dest and any caption to a DB or an index file, then render the gallery
echo 'OK';

For the gallery: store a small record per upload (caption, stored filename, thumbnail path). Query those records and output <img> tags in a CSS grid or flex container to show images side-by-side. If you prefer no database, an index.json updated on each upload works for small sites. Always generate thumbnails (GD or ImageMagick) rather than scaling full images in the browser.

Quick troubleshooting/security tips: check upload_max_filesize and post_max_size in php.ini if uploads silently fail; ensure the upload folder is writable by the webserver user (prefer chown to the webserver user and use restrictive permissions instead of global write bits); validate file contents (not just extensions), and disallow SVG or strip scripting from image formats. For detailed security best practices see the PHP upload docs and the OWASP file-upload guidance:

PHP file upload docs
OWASP File Upload Cheat Sheet

Recommended Answers

All 4 Replies

Do you know a server side programming language like PHP or Java? If not, you won't be able to do this without finding an existing script or someone to do it for you.

No but I guess I will have to learn it. Thanks!!

Hello, Spycats reply should do the trick for you.

But you will need php on your webhosting account to use this script and you will have to chmod 777 the upoad folder.

Hope this helps.

Joe

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.