javascript - from - Carga de archivo jQuery AJAX PHP

jquery load php

Question

Quiero implementar una carga simple de archivos en mi intranet-página, 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 esta es mi secuencia de comandos jquery JS:

$("#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 "cargas" en el directorio raíz del sitio web, con permisos de cambio para "usuarios" y "usuarios IIS".

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 "carga" también está vacía?

¿Alguien puede ayudarme a descubrir qué está mal?

Además, el siguiente paso debería ser cambiar el nombre del archivo con un nombre generado por el servidor. Quizás alguien también pueda darme una solución para esto.

Answer 1

Mejor carga de archivos usando Jquery Ajax con Materialize Haga clic aquí para descargar

Cuando selecciona la imagen, la imagen se convertirá en la base 64 y puede guardarla en la base de datos, por lo que también será liviana.

Answer 2

Necesita una secuencia de comandos que se ejecute en el servidor para mover el archivo al directorio de carga. El método jQuery ajax (ejecutándose 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 carga:

<?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:

1. Asegúrese de tener la ruta correcta del servidor , es decir, comenzando en la ubicación del script PHP, cuál es la ruta al directorio de carga, y
2. Asegúrate de que sea escribible .

Y un poco sobre la función de 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 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, por último, tenga en cuenta los valores de configuración PHP upload_max_filesize Y post_max_size , y asegúrese de que los archivos de prueba no superen ninguno de los dos. Aquí hay un poco de ayuda sobre cómo verificar la configuración de PHP y cómo establecer la configuración máxima de tamaño de archivo y publicación .

Answer 3

y este es el archivo php para recibir los archivos uplaoded

<?
$data = array();
//check with your logic
if (isset($_FILES)) {
$error = false;
$files = array();
$uploaddir = $target_dir;
foreach ($_FILES as $file) {
if (move_uploaded_file($file[''tmp_name''], $uploaddir . basename( $file[''name'']))) {
$files[] = $uploaddir . $file[''name''];
} else {
$error = true;
}
}
$data = ($error) ? array(''error'' => ''There was an error uploading your files'') : array(''files'' => $files);
} else {
$data = array(''success'' => ''NO FILES ARE SENT'',''formData'' => $_REQUEST);
}
echo json_encode($data);
?>

Answer 4

**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" />'';
}

Answer 5

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 + "/r/n" + xhr.statusText + "/r/n" + xhr.responseText);
}
});