Script para subir multiples imagenes al servidos cada una con titulo y descripcion

[franco9090]

Un cordial saludo amigos.

El asunto es el siguiente:
En la última aplicación web que estoy desarrollando, necesito implementar un sistema en el cual el usuario pueda subir múltiples imágenes de productos, y cada una de estas imágenes tenga un título y una breve descripción y luego se inserten en la base de datos con su respectiva id.

Lo que he hecho es crear la tabla con los siguientes campos:
product_id, product title, product_img, product_description, product_category etc... Y el formulario con su respectivo insert.

Estuve intentando adaptar el script jQuery-File-Upload-master, que funciona muy bien, y además con drag and drop, Pero todos mis intentos fueron fallidos

La verdad es que ya no se que mas hacer, ya que he buscado mucho en internet y en el foro, y he intentado cuanta cosa se me ocurre, pero no he tenido éxito.
Así que por ello acudo a ustedes, ya que su ayuda me sera muy util!

Podría alguien sugerirme algún script que cumpla esta función, o bien ayudarme con el codigo que debo implementar para lograr esto?

De antemano muchísimas gracias!

[arros]

primero lo que tienes que hacer es crear otra tabla de imagenes donde guardas los nomres de imagenes ej:
images:
id_img
product_id
img_name

[franco9090]

Oye gracias por la ayuda primero que todo.
Disculpa mis conocimientos aún son limitados para entenderte con tan poca explicación.
¿Es posible que me expliques un poco más con algún código de ejemplo?
Te lo agradecería infinitamente ya que debo entregar ese trabajo el lunes, y esto es lo último que me falta y quedará listo.

Voy a dejarte el código que tengo en este momento para que tengas una idea de lo que he intentado.
Como dije antes he implementado el script [URL="http://blueimp.github.io/jQuery-File-Upload/"]jQuery-File-Upload-master[/URL] dentro de esta página, el cual trabaja con Ajax subiendo múltiples imágenes e insertándolas en una carpeta. Así que el siguiente código tiene este Script implementado:

Código PHP:

  
<?php
require_once('includes/settings.php'); 
if(!isset($_SESSION['password'])){
    header("Location: index.php");
    exit();
}
$form_id = md5(date('l jS \of F Y h:i:s A') . BASE_URL);
$error=null;
if (isset($_POST['submit'])){
# check for required fields to be filled out and valid
if ($_POST['product_category'] == 'Elegir Categoria') { $error = 'Por favor elija una categoría para el producto';}    
    
# check upload of image
if (isset($_FILES["files"][$i])){
$c = count($_FILES["files"][$i]);
for ($i=0; $i < 10; $i++)
    
   if ($_FILES["files"]["error"][$i] > 0) {
     $error = 'No se seleccionó ninguna imagen';
   } else {
      $ext = strtolower(substr($_FILES["files"]["name"], strrpos($_FILES["files"]["name"][$i], '.') + 1));

      # check to see if it's an image file based on it's extention
    if ($ext != 'jpg' && $ext != 'jpeg' && $ext != 'gif' && $ext != 'png' ) {
          $error = 'Formato de imagen Inválido (Use solo formatos jpg, gif, png)';
        }else {
            $haslogo = true;    
      }
       }
  }
# insert into database
    if (!$error) {    
    $insert = "INSERT INTO ". TB_PRODUCTS ." VALUES (
              NULL,
            '".clean($_POST['form_id'])."',
              '".clean($_POST['product_title'])."',
            NULL,
              '".clean($_POST['product_description'])."',
              '".clean($_POST['product_category'])."',
              '".clean($_POST['product_new'])."'
            )";
        $status = mysql_query($insert);
    
    if($status) {
        $insert_id = mysql_insert_id();
        # move uploaded file from temp storage b/c the job ad post was successful
            if ($haslogo) {
                 $imagen_url = DATA_PATH . $insert_id . "." .$ext;
                 $imagen_url2 = DATA_PATH_REAL . $insert_id . "." .$ext;
                 move_uploaded_file($_FILES["files"]["tmp_name"][$i], $imagen_url);
           mysql_query("UPDATE ". TB_PRODUCTS ." SET product_img='".clean($imagen_url2)."' WHERE form_id='".$_POST['form_id']."'");
           $error = 'Problema cargando el archivo: '. mysql_error().'<br />';
    }
        
        header("location: ".get_filename()."?products_created=success");
    } else {
        $error = mysql_error() .' &nbsp;Error al insertar los productos.';
    }
  }
}

#if a product was inserted
if (isset($_GET['products_created'])) {
    $success = 'Productos insertados correctamente!';
}
$select = "SELECT * FROM ".TB_OPTIONS." ";
$data = mysql_query($select);
$count = mysql_num_rows($data);    
$view = mysql_fetch_assoc($data);
?>
                <?php display_messages(); ?> 
                
      <!-- Uploading files  Uploading files/ all the files it needs for the uploading system --> 
    <!-- The file upload form used as target for the file upload widget -->
    <form id="fileupload" action="<?php echo get_filename(); ?>" method="post" enctype="multipart/form-data">
    <input type="hidden" name="form_id" value="<?php echo $form_id; ?>" />
        <!-- Redirect browsers with JavaScript disabled to the origin page -->
        <noscript><input type="hidden" name="redirect" value="http://blueimp.github.com/jQuery-File-Upload/"></noscript>
        <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
        <div class="row fileupload-buttonbar">
            <div class="span7">
                <!-- The fileinput-button span is used to style the file input field as button -->
                <span class="btn btn-success fileinput-button">
                    <i class="icon-plus icon-white"></i>
                    <span>Add files...</span>
                    <input type="file" name="files[]" multiple>
                </span> 
                
                <button type="submit" class="btn btn-primary start">
                    <i class="icon-upload icon-white"></i>
                    <span>Start upload</span>
                </button>
                
                <button type="reset" class="btn btn-warning cancel">
                    <i class="icon-ban-circle icon-white"></i>
                    <span>Cancel upload</span>
                </button>
                
                <button type="button" class="btn btn-danger delete">
                    <i class="icon-trash icon-white"></i>
                    <span>Delete</span>
                </button>
                <input type="checkbox" class="toggle2">
            </div>
            <!-- The global progress information -->
            <div class="span5 fileupload-progress fade">
                <!-- The global progress bar -->
                <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                    <div class="bar" style="width:0%;"></div>
                </div>
                <!-- The extended global progress information -->
                <div class="progress-extended">&nbsp;</div>
            </div>
        </div>
        <!-- The loading indicator is shown during file processing -->
        <div class="fileupload-loading"></div>
        <br>
        <!-- The table listing the files available for upload/download -->
        <table role="presentation" class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
   <!--     <input type="file" name="file" multiple>-->
        <button type="submit" name="submit" class="btn"> <span>Publicar</span> </button>
    </form>



<!--   Uploading files  Uploading files/ all the files it needs for the uploading system -->
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <td class="preview"><span class="fade"></span></td>
        <td class="name"><span>{%=file.name%}</span></td>
        <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
        
        {% if (file.error) { %}
            <td class="error" colspan="2"><span class="label label-important">Error</span> {%=file.error%}</td>
        {% } else if (o.files.valid && !i) { %}
            
        <td>     
        <label>Título del Producto</label><br><br>
    <input type="text" name="product_title" style="float:left; width:50%;" value="" /> 
    
    
    <select name="product_category">
      <option>Elegir Categoria</option>
   <?php include('products_all_categories.php'); ?>
    </select>
    <input type="checkbox" name="product_new" value="1" />
        <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div>
            </td>
            <td>{% if (!o.options.autoUpload) { %}
                <button class="btn btn-primary start">
                    <i class="icon-upload icon-white"></i>
                    <span>Start</span>
                </button>
            {% } %}</td>
        {% } else { %}
            <td colspan="2"></td>
        {% } %}
        <td>{% if (!i) { %}
            <button class="btn btn-warning cancel">
                <i class="icon-ban-circle icon-white"></i>
                <span>Cancel</span>
            </button>
        {% } %}</td>
    </tr>
{% } %}
</script>


<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
        {% if (file.error) { %}
            <td></td>
            <td class="name"><span>{%=file.name%}</span></td>
            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
            <td class="error" colspan="2"><span class="label label-important">Error</span> {%=file.error%}</td>
        {% } else { %}
            <td class="preview">{% if (file.thumbnail_url) { %}
                <a href="{%=file.url%}" title="{%=file.name%}" data-gallery="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
            {% } %}</td>
            <td class="name">
                <a href="{%=file.url%}" title="{%=file.name%}" data-gallery="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a>
            </td>
            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
            <td colspan="2"></td>
        {% } %}
        <td>
            <button class="btn btn-danger delete" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}"{% if (file.delete_with_credentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
                <i class="icon-trash icon-white"></i>
                <span>Delete</span>
            </button>
            <input type="checkbox" name="delete" value="1" class="toggle">
        </td>
    </tr>
{% } %}
</script>

<!--   Uploading files  Uploading files/ all the files it needs for the uploading system -->  

[arros]

y que error te da

[franco9090]

Al trabajar con el for, la variable $haslogo ha dejado de trabajar, por lo tanto no está actualizando el campo product_img en la base de datos.

Es decir, si el archivo tiene por extensión JPEG, JPG, PNG, o GIF, la variable $haslogo es igual a true.

Más abajo luego del insert me dice que que si es así se debe mover el archivo a una carpeta y actualizar el campo product_img en la base de datos, pero no me está actualizando, por alguna razón esta quedando nulo.