jQuery AJAX carga de archivos PHP
Quiero implementar una carga de archivos simple en mi página de intranet, con la configuración más pequeña posible.
Esta es mi parte HTML:
<input id="sortpicture" type="file" name="sortpic" />
<button id="upload">Upload</button>
y este es mi script JS jquery:
$("#upload").on("click", function() {
var file_data = $("#sortpicture").prop("files")[0];
var form_data = new FormData();
form_data.append("file", file_data);
alert(form_data);
$.ajax({
url: "/uploads",
dataType: 'script',
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function(){
alert("works");
}
});
});
Hay una carpeta llamada "uploads" en el directorio raíz del sitio web, con permisos de cambio para "usuarios" y "IIS_users".
Cuando selecciono un archivo con el formulario de archivo y presiono el botón de carga, la primera alerta devuelve "[object FormData]". ¿¡La segunda alerta no se llama y la carpeta "subidas" también está vacía!?
¿Alguien puede ayudarme a descubrir qué pasa?
Además, el siguiente paso debería ser cambiar el nombre del archivo con un nombre generado por el lado del servidor. Quizás alguien pueda darme una solución para esto también.
Necesita un script que se ejecute en el servidor para mover el archivo al directorio de carga. El método jQueryajax (que se ejecuta en el cliente en el navegador) envía los datos del formulario al servidor, luego un script que se ejecuta en el servidor maneja la carga.
Su HTML está bien, pero actualice su script JS jQuery para que se vea así:
(Busque comentarios después // <--)
$('#upload').on('click', function() {
var file_data = $('#sortpicture').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);
alert(form_data);
$.ajax({
url: 'upload.php', // <-- point to server-side PHP script
dataType: 'text', // <-- what to expect back from the PHP script, if anything
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function(php_script_response){
alert(php_script_response); // <-- display response from the PHP script, if any
}
});
});
Y ahora para el script del lado del servidor, usando PHP en este caso.
upload.php : un script PHP que se ubica y ejecuta en el servidor y dirige el archivo al directorio de cargas:
<?php
if ( 0 < $_FILES['file']['error'] ) {
echo 'Error: ' . $_FILES['file']['error'] . '<br>';
}
else {
move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
}
?>
Además, un par de cosas sobre el directorio de destino:
- Asegúrese de tener la ruta del servidor correcta , es decir, comenzando en la ubicación del script PHP, cuál es la ruta al directorio de carga, y
- Asegúrese de que se pueda escribir .
Y un poco sobre la función PHP move_uploaded_file, utilizada en el script upload.php :
move_uploaded_file(
// this is where the file is temporarily stored on the server when uploaded
// do not change this
$_FILES['file']['tmp_name'],
// this is where you want to put the file and what you want to name it
// in this case we are putting in a directory called "uploads"
// and giving it the original filename
'uploads/' . $_FILES['file']['name']
);
$_FILES['file']['name']es el nombre del archivo tal como se carga. No tienes que usar eso. Puede darle al archivo cualquier nombre (compatible con el sistema de archivos del servidor) que desee:
move_uploaded_file(
$_FILES['file']['tmp_name'],
'uploads/my_new_filename.whatever'
);
Y finalmente, tenga en cuenta sus valores de PHP upload_max_filesizeY post_max_sizede configuración, y asegúrese de que sus archivos de prueba no excedan ninguno de los dos. Aquí encontrará ayuda sobre cómo verificar la configuración de PHP y cómo configurar el tamaño máximo de archivo y la configuración de publicación .
**1. index.php**
<body>
<span id="msg" style="color:red"></span><br/>
<input type="file" id="photo"><br/>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).on('change','#photo',function(){
var property = document.getElementById('photo').files[0];
var image_name = property.name;
var image_extension = image_name.split('.').pop().toLowerCase();
if(jQuery.inArray(image_extension,['gif','jpg','jpeg','']) == -1){
alert("Invalid image file");
}
var form_data = new FormData();
form_data.append("file",property);
$.ajax({
url:'upload.php',
method:'POST',
data:form_data,
contentType:false,
cache:false,
processData:false,
beforeSend:function(){
$('#msg').html('Loading......');
},
success:function(data){
console.log(data);
$('#msg').html(data);
}
});
});
});
</script>
</body>
**2.upload.php**
<?php
if($_FILES['file']['name'] != ''){
$test = explode('.', $_FILES['file']['name']);
$extension = end($test);
$name = rand(100,999).'.'.$extension;
$location = 'uploads/'.$name;
move_uploaded_file($_FILES['file']['tmp_name'], $location);
echo '<img src="'.$location.'" height="100" width="100" />';
}
