Ver Mensaje Individual
  #10 (permalink)  
Antiguo 14/11/2014, 13:46
mikehove
 
Fecha de Ingreso: abril-2012
Ubicación: Argentina
Mensajes: 215
Antigüedad: 12 años, 10 meses
Puntos: 2
Respuesta: Por favor necesito guía para resolver problema con move_uploaded_file() en

Amigo Pateketrueke gracias por tu tiempo. Pude solucionarlo con otro código y es mucho mejor PHP y Ajax.
Para aportar, si alguien tiene el mismo problema:

formulario.php:
Código HTML:
Ver original
  1.     <head>
  2.         <title>Ajax Image Upload Using PHP and jQuery</title>
  3.         <link rel="stylesheet" href="style.css" />
  4.         <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed|Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
  5.         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  6.         <script src="script.js"></script>
  7.     </head>
  8.     <body>
  9.         <div class="main">
  10.         <h1>Ajax Image Upload</h1><br/>
  11.         <hr>
  12.             <form id="uploadimage" action="" method="post" enctype="multipart/form-data">
  13.                 <div id="image_preview"><img id="previewing" src="noimage.png" /></div>
  14.         <hr id="line">    
  15.             <div id="selectImage">
  16.                 <label>Select Your Image</label><br/>
  17.                 <input type="file" name="file" id="file" required />
  18.                 <input type="submit" value="Upload" class="submit" />
  19.             </div>                  
  20.             </form>    
  21.         </div>
  22.         <h4 id='loading' style="display:none;position:absolute;top:50px;left:850px;font-size:25px;">cargando...</h4>
  23.         <div id="message">         
  24.         </div>
  25.       </body>
  26. </html>

ajax_php_file:
Código PHP:
Ver original
  1. <?php
  2.  
  3. if(isset($_FILES["file"]["type"]))  
  4. {
  5.     $validextensions = array("jpeg", "jpg", "png");
  6.     $temporary = explode(".", $_FILES["file"]["name"]);
  7.     $file_extension = end($temporary);
  8.  
  9.     if ((($_FILES["file"]["type"] == "image/png") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/jpeg")
  10.             ) && ($_FILES["file"]["size"] < 100000)//Approx. 100kb files can be uploaded.
  11.             && in_array($file_extension, $validextensions))
  12.     {
  13.  
  14.         if ($_FILES["file"]["error"] > 0)
  15.         {
  16.             echo "Return Code: " . $_FILES["file"]["error"] . "<br/><br/>";
  17.         }
  18.         else
  19.         {
  20.                 if (file_exists($_SERVER['DOCUMENT_ROOT']."/carpeta/upload/". $_FILES["file"]["name"])) {
  21.                 echo $_FILES["file"]["name"] . " <span id='invalid'><b>Ya existe.</b></span> ";
  22.                 }
  23.                 else
  24.                 {                  
  25.                     $sourcePath = $_FILES['file']['tmp_name'];   // Storing source path of the file in a variable
  26.                     $targetPath = $_SERVER['DOCUMENT_ROOT']."/carpeta/upload/".$_FILES['file']['name'];  // Target path where file is to be stored
  27.                     move_uploaded_file($sourcePath,$targetPath) ; //  Moving Uploaded file                     
  28.                    
  29.                     echo "<span id='success'>Imagen subida satisfactoriamente...!!</span><br/>";
  30.                     echo "<br/><b>File Name:</b> " . $_FILES["file"]["name"] . "<br>";
  31.                     echo "<b>Type:</b> " . $_FILES["file"]["type"] . "<br>";
  32.                     echo "<b>Size:</b> " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
  33.                     echo "<b>Temp file:</b> " . $_FILES["file"]["tmp_name"] . "<br>";
  34.                        
  35.                 }                      
  36.         }        
  37.     }  
  38.     else
  39.     {
  40.         echo "<span id='invalid'>***Invalid file Size or Type***<span>";
  41.     }
  42. }
  43. ?>

css:
Código css:
Ver original
  1. body {
  2. font-family: 'Roboto Condensed', sans-serif;
  3. }
  4. h1
  5. {
  6. text-align: center;
  7. background-color: #FEFFED;
  8. height: 70px;
  9. color: rgb(95, 89, 89);
  10. margin: 0 0 -29px 0;
  11. padding-top: 14px;
  12. border-radius: 10px 10px 0 0;
  13. font-size: 35px;
  14. }
  15. .main {
  16. position: absolute;
  17. top: 50px;
  18. left: 20%;
  19. width: 450px;
  20. height:530px;
  21. border: 2px solid gray;
  22. border-radius: 10px;
  23. }
  24. .main label{
  25. color: rgba(0, 0, 0, 0.71);
  26. margin-left: 60px;
  27. }
  28. #image_preview{
  29. position: absolute;
  30. font-size: 30px;
  31. top: 100px;
  32. left: 100px;
  33. width: 250px;
  34. height: 230px;
  35. text-align: center;
  36. line-height: 180px;
  37. font-weight: bold;
  38. color: #C0C0C0;
  39. background-color: #FFFFFF;
  40. overflow: auto;
  41. }
  42. #selectImage{
  43. padding: 21px 21px 14px 15px;
  44. position: absolute;
  45. bottom: 0px;
  46. width: 414px;
  47. background-color: #FEFFED;
  48. border-radius: 10px;
  49. }
  50. .submit{
  51. font-size: 16px;
  52. background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
  53. border: 1px solid #e5a900;
  54. color: #4E4D4B;
  55. font-weight: bold;
  56. cursor: pointer;
  57. width: 300px;
  58. border-radius: 5px;
  59. padding: 10px 0;
  60. outline: none;
  61. margin-top: 20px;
  62. margin-left: 15%;
  63. }
  64. .submit:hover{
  65. background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
  66. }
  67. #file {
  68. color: red;
  69. padding: 5px;
  70. margin-top: 10px;
  71. border-radius: 5px;
  72. margin-left: 14%;
  73. width: 72%;
  74. }
  75. #message{
  76. position:absolute;
  77. top:120px;
  78. left:815px;
  79. }
  80. #success
  81. {
  82. color:green;
  83. }
  84. #invalid
  85. {
  86. color:red;
  87. }
  88. #line
  89. {
  90. margin-top: 285px;
  91. }
  92. #error
  93. {
  94. color:red;
  95. }
  96. #error_message
  97. {
  98. color:blue;
  99. }
  100. #loading
  101. {
  102. display:none;
  103. position:absolute;
  104. top:50px;
  105. left:850px;
  106. font-size:25px;
  107. }

Script:
Código Javascript:
Ver original
  1. $(document).ready(function (e) {
  2.     $("#uploadimage").on('submit',(function(e) {
  3.         e.preventDefault();
  4.         $("#message").empty();
  5.         $('#loading').show();
  6.         $.ajax({
  7.             url: "ajax_php_file.php",       // Url to which the request is send
  8.             type: "POST",                   // Type of request to be send, called as method
  9.             data:  new FormData(this),      // Data sent to server, a set of key/value pairs representing form fields and values
  10.             contentType: false,             // The content type used when sending data to the server. Default is: "application/x-www-form-urlencoded"
  11.             cache: false,                   // To unable request pages to be cached
  12.             processData:false,              // To send DOMDocument or non processed data file it is set to false (i.e. data should not be in the form of string)
  13.             success: function(data)         // A function to be called if request succeeds
  14.             {
  15.             $('#loading').hide();
  16.             $("#message").html(data);          
  17.             }          
  18.        });
  19.     }));
  20.  
  21. // Function to preview image
  22.     $(function() {
  23.         $("#file").change(function() {
  24.             $("#message").empty();         // To remove the previous error message
  25.             var file = this.files[0];
  26.             var imagefile = file.type;
  27.             var match= ["image/jpeg","image/png","image/jpg"]; 
  28.             if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2])))
  29.             {
  30.             $('#previewing').attr('src','noimage.png');
  31.             $("#message").html("<p id='error'>Please Select A valid Image File</p>"+"<h4>Note</h4>"+"<span id='error_message'>Only jpeg, jpg and png Images type allowed</span>");
  32.             return false;
  33.             }
  34.             else
  35.             {
  36.                 var reader = new FileReader(); 
  37.                 reader.onload = imageIsLoaded;
  38.                 reader.readAsDataURL(this.files[0]);
  39.             }      
  40.         });
  41.     });
  42.     function imageIsLoaded(e) {
  43.         $("#file").css("color","green");
  44.         $('#image_preview').css("display", "block");
  45.         $('#previewing').attr('src', e.target.result);
  46.         $('#previewing').attr('width', '250px');
  47.         $('#previewing').attr('height', '230px');
  48.     };
  49. });

Saludos!!