Solución:
Necesita un script que se ejecute en el servidor para mover el archivo al directorio de cargas. El jQuery ajax El método (que se ejecuta en el navegador) envía los datos del formulario al servidor, luego un script en el servidor maneja la carga. Aquí hay un ejemplo usando PHP.
Su HTML está bien, pero actualice su script JS jQuery para que se vea así:
$('#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 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, algunas cosas sobre el directorio de destino:
- Asegúrate de tener el ruta correcta del servidor, es decir, comenzando en la ubicación del script PHP, cuál es la ruta al directorio de cargas, y
- Asegúrate de que sea escribible.
Y un poco sobre la función PHP move_uploaded_file, utilizado en el upload.php texto:
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 a medida que 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 su PHP upload_max_filesize Y post_max_size valores de configuración y asegúrese de que sus archivos de prueba no superen ninguno. Aquí hay algo de ayuda sobre cómo verificar la configuración de PHP y cómo establecer la configuración máxima y 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="https://foroayuda.es/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" />';
}
var formData = new FormData($("#YOUR_FORM_ID")[0]);
$.ajax({
url: "upload.php",
type: "POST",
data : formData,
processData: false,
contentType: false,
beforeSend: function() {
},
success: function(data){
},
error: function(xhr, ajaxOptions, thrownError) {
console.log(thrownError + "rn" + xhr.statusText + "rn" + xhr.responseText);
}
});