UPLOAD de Imagen con AjaX (AYUDA)

Vhyll · #1 (**permalink**) 19/06/2010, 02:52

Hola a todos tiempo q' no venia pero ahora tengo un inconveniente estoy empezando a utilizar AJAX y estoy utilizando este codigo

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.del {margin-left:20px}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/ajaxupload.js"></script>
<script type="text/javascript">
$(function(){
            
    //counting upload time
    var count = $('#files').children('li').size();
    new AjaxUpload('upload_button', {
        action: 'upload.php',
        name: 'userfile',
        autoSubmit: true,
        responseType: 'json',
        onChange: function(file, extension){},
        onSubmit: function(file, extension) {
            //set file permission
            if (! (extension && /^(jpg|png|jpeg|gif)$/.test(extension))){
                alert('Error: Chỉ chấp nhận file hình ảnh.');
                return false;
            }
            // increment count
            count ++;
            // count submission
            if(count > 12){
                alert('vượt quá số lượng hình ảnh cho phép');  
                return false;
            }
            // showing loader
            var li = $('#files').children('li').size();
            if(count > li ){
                $('#loader').show();
            }
        },
        onComplete: function(file, response) {
            // add delete link
            if(response.status == 'success') {
                var list_item = '<li><img src="admin/'+ response.thumb_name +'" />';
                    list_item += '<span>'+ file +'</span>';
                    list_item += '<a href="#" class="del">remove</a></li>';
                $('#files').append(list_item);
            }
            else{
                count--;
                alert(response.errors +' ' + file);
            }
            // remove the loader
            var li = $('#files').children('li').size();
            if(count == li){
                $('#loader').hide();
            }
 
            // if clicked, remove image completely
            $('.del').click(function(e){
                e.preventDefault();
                $.post('delet.php', 
                        {ori: response.img_name , thumb: response.thumb_name },
                        function(){}, 'json');
                $(this).parent().remove();
                count --;
            });
        }
    });
 
});
</script>
<title>advanced ajax upload</title>
</head>
 
<body>
 
<a href="#" id="upload_button" style="cursor:pointer">Upload</a>
<img id="loader" src="/img/loader.gif" style="display:none" />
<ol id="files"></ol>
</body>
</html>

Este codigo lo encontre de una web q' utiliza Ajax Upload
Mi codigo de Upload es:

Código PHP:

Ver original<?PHP
$uploaddir = '/home/miweb/public_html/admin/'
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
 
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
  echo "success";
} else {
  // WARNING! DO NOT USE "FALSE" STRING AS A RESPONSE!
  // Otherwise onSubmit event will not be fired
  echo "error";
}
?>

Me sale un error: PHP Parse error: syntax error, unexpected T_VARIABLE in /home/vkmanga/public_html/admin/upload.php on line 3

$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);

No se q' me estoy ekivocando para subir imagenes mediante AJAX y PHP, me pueden guiar q' debo q' cambio debo hacer.
Salu2!!

caricatos · #2 (**permalink**) 19/06/2010, 04:03

Hola:

Si alguien te cuenta que con Ajax pueden subir ficheros, lo que en realidad te están contando es que lo que te dicen que es Ajax genera (o al menos necesita) un iframe que oculta (no del todo necesariamente), y genera un formulario con un campo file y las condiciones obligatorias para adjuntar ficheros, o sea el enctype adecuado y el método post.

Si eso lo haces sin usar librería alguna, no tendrás problemas en subir ningún adjunto (del tipo que se te antoje)

Te paso un artículo con el código suficiente para subir imágenes: Revisar las imágenes antes de subirlas.

También si lo prefieres, podemos mover el tema al subforo de frameworks.

Saludos

caricatos · #3 (**permalink**) 19/06/2010, 04:05

Tema movido desde Ajax

Vhyll · #4 (**permalink**) 19/06/2010, 18:13

Hi ya pude arreglar el problema ya q' el error era mio estaba en esta linea:

Código PHP:

Ver original$uploaddir = '/home/miweb/public_html/admin/'

faltaba ";" xD
Ahora cuando subo la imagen no reconoce esta parte de ajax:

Código Javascript:

Ver originalonComplete: function(file, response) {
            // add delete link
            if(response.status == 'success') {
                var list_item = '<li><img src="admin/'+ response.thumb_name +'" />';
                    list_item += '<span>'+ file +'</span>';
                    list_item += '<a href="#" class="del">remove</a></li>';
                $('#files').append(list_item);
            }

No sale <li>
Y revisando es algo del codigo de upload.php
Q' debo modificar en el codigo de Upload.php para q' reconosca el ajax esta funcion al subir la imagen.

Código Javascript:

Ver originalresponse.status == 'success'

Salu2!!