Member Avatar for babir

hi
I am new with ajax and i want to multiple image upload in a ads post site.
please help me

  • 2 Contributors
  • 1 Reply
  • 244 Views
  • 55 Minutes Discussion Span
  • Latest Post Latest Post by Taywin

Dani AI

Generated

Since is new to Ajax, 's advice to learn the basics is sound. A practical pattern for an ads-site is: show thumbnails immediately (FileReader), then upload each image in the background with FormData + XMLHttpRequest and show per-file progress. That gives instant feedback and keeps the page usable while large images upload.

<input id="fileInput" type="file" multiple accept="image/*" />
<div id="preview"></div>

<script>
document.getElementById('fileInput').addEventListener('change', function(e) {
  const files = e.target.files;
  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    const container = document.createElement('div'); container.className = 'thumb';
    const img = document.createElement('img');
    const progress = document.createElement('progress'); progress.max = 100; progress.value = 0;
    container.appendChild(img); container.appendChild(progress);
    document.getElementById('preview').appendChild(container);

    const reader = new FileReader();
    reader.onload = function(ev) { img.src = ev.target.result; };
    reader.readAsDataURL(file);

    const fd = new FormData();
    fd.append('image', file);
    // attach CSRF or other meta if required: fd.append('token', TOKEN);
    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'upload.php', true);
    xhr.upload.onprogress = function(ev) {
      if (ev.lengthComputable) progress.value = Math.round((ev.loaded / ev.total) * 100);
    };
    xhr.onload = function() {
      if (xhr.status >= 200 && xhr.status < 300) container.classList.add('uploaded');
      else container.classList.add('error');
    };
    xhr.send(fd);
  }
});
</script>
<?php
if (!empty($_FILES['image'])) {
  $f = $_FILES['image'];
  if ($f['error'] === UPLOAD_ERR_OK) {
    $name = basename($f['name']);
    $target = __DIR__ . '/uploads/' . time() . '_' . $name;
    if (move_uploaded_file($f['tmp_name'], $target)) {
      echo json_encode(['status'=>'ok','file'=>basename($target)]);
    } else {
      http_response_code(500); echo json_encode(['status'=>'err']);
    }
  } else {
    http_response_code(400); echo json_encode(['status'=>'err']);
  }
}
?>

Common pitfalls and production notes: server limits (post_max_size, upload_max_filesize) and permissions on the uploads folder; mismatched form field names (FormData key must match $_FILES index); missing MIME/type checks and filename sanitization; CORS and CSRF requirements; very large files benefit from chunked or resumable uploads. For a robust ads system add server-side validation, generate server-side thumbnails, limit concurrent uploads, and sanitize filenames. Libraries such as Dropzone, FineUploader or resumable/tus clients are options when built-in features (retry, chunks, UI) are needed.

Member Avatar for Taywin

If you are new to Ajax, you shouldn't try to jump start from the top of the hill! You need to learn how works and such. If you try to start from the middle of knowledge, you will leave with half baked knowledge which leads to bad scripting... At least show us how much you know because your current post is similar to asking people here to give you the script.

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.