upload de arquivo jQuery AJAX PHP

159

Quero implementar um upload de arquivo simples na minha página da intranet, com a menor configuração possível.

Esta é a minha parte HTML:

<input id="sortpicture" type="file" name="sortpic" />
<button id="upload">Upload</button>

e este é o meu 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"); 
        }
    });
});

Há uma pasta chamada "uploads" no diretório raiz do site, com permissões de alteração para "usuários" e "IIS_users".

Quando seleciono um arquivo com o formulário e pressiono o botão de upload, o primeiro alerta retorna "[object FormData]". o segundo alerta não é chamado e a pasta "uploads" também está vazia !?

Alguém pode ajudar a descobrir o que está errado?

Além disso, o próximo passo deve ser: renomear o arquivo com um nome gerado no servidor. Talvez alguém possa me dar uma solução para isso também.

user2355509
fonte
Por favor, leia isto primeiro: stackoverflow.com/questions/166221/…
Vincent Decaux
Tudo funciona para mim, talvez seja o seu código PHP?
precisa saber é o seguinte
não há mais nada "conectado" a este formulário. o que você quer dizer com meu código php?
user2355509
O que quero dizer é que seu código funciona, talvez o problema esteja no código do lado do servidor.
precisa saber é o seguinte
Você está recebendo um código de erro 500 ao executar o script AJAX? Isso indicaria que é um erro do lado do servidor. Além disso: verifique se, durante a depuração, você envia a resposta do arquivo PHP para o console. Dessa forma, se o seu código PHP gerar um erro, você saberá o que está acontecendo.
Diederik

Respostas:

286

Você precisa de um script que seja executado no servidor para mover o arquivo para o diretório de uploads. O jQueryajax método (em execução no navegador) envia os dados do formulário para o servidor e, em seguida, um script no servidor lida com o upload. Aqui está um exemplo usando PHP.

Seu HTML está correto, mas atualize seu script JS jQuery para que fique assim:

$('#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
        }
     });
});

E agora para o script do lado do servidor, usando PHP neste caso.

upload.php : um script PHP executado no servidor e direciona o arquivo para o diretório de uploads:

<?php

    if ( 0 < $_FILES['file']['error'] ) {
        echo 'Error: ' . $_FILES['file']['error'] . '<br>';
    }
    else {
        move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
    }

?>

Além disso, algumas coisas sobre o diretório de destino:

  1. Verifique se você possui o caminho correto do servidor , ou seja, iniciando no local do script PHP, qual é o caminho para o diretório de uploads e
  2. Verifique se é gravável .

E um pouco sobre a função PHP move_uploaded_file, usada no 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']é o nome do arquivo conforme ele é carregado. Você não precisa usar isso. Você pode dar ao arquivo qualquer nome (compatível com o sistema de arquivos do servidor) que desejar:

move_uploaded_file(
    $_FILES['file']['tmp_name'],
    'uploads/my_new_filename.whatever'
);

E, finalmente, esteja ciente de seus valores de configuração PHP upload_max_filesizeAND post_max_sizee certifique-se de que seus arquivos de teste também não excedam. Aqui estão algumas dicas de como verificar a configuração do PHP e como definir o tamanho máximo do arquivo e as configurações de postagem .

bloodyKnuckles
fonte
hey BloodyKnuckles! obrigado, acho que isso foi uma grande coisa, eu entendi mal. Então eu adicionei o arquivo php, e agora estou um pouco mais perto. O segundo alerta também aparece! mas a pasta ainda está vazia.
user2355509
Ah, o nome de entrada do formulário "sortpic" é alterado para "file" na form_data.appendfunção. Então, mudei o script PHP para refletir o novo nome de entrada do formulário. Também puxei a resposta do script PHP para o alerta de sucesso do ajax para ajudar na depuração.
precisa saber é o seguinte
1
Amigo, ele me deu um erro de arquivo de índice indefinido em$_FILES['file']
Hendry Tanaka 10/10
1
@partho, o código prop ('arquivos') [0] acessa o arquivo local destinado a ser carregado no servidor. Se você precisar de mais explicações, consulte a função jQuery "prop" e "html5 file upload".
bloodyKnuckles
1
Eu resolvi esse problema.O motivo era que o tamanho do arquivo era muito grande.
Ron tornambe
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" />';
}
Hasib Kamal
fonte
2
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);
    }
});
Azhar
fonte
0

e este é o arquivo php para receber os arquivos aplaudidos

<?
$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);
?>
kavehmb
fonte
O que está if (true)fazendo? Sempre avaliar como verdadeiro, é inútil, não é? Além disso, você tem um final extra encaracolado.
Mr.Web
Eu consertei para você. :)
Mr.Web
0

Use js puro

async function saveFile() 
{
    let formData = new FormData();           
    formData.append("file", sortpicture.files[0]);
    await fetch('/uploads', {method: "POST", body: formData});    
    alert('works');
}
<input id="sortpicture" type="file" name="sortpic" />
<button id="upload" onclick="saveFile()">Upload</button>
<br>Before click upload look on chrome>console>network (in this snipped we will see 404)

O nome do arquivo é incluído automaticamente para solicitação e o servidor pode lê-lo, o 'tipo de conteúdo' é automaticamente definido como 'multipart / form-data'. Aqui está um exemplo mais desenvolvido com tratamento de erros e envio adicional de json

Kamil Kiełczewski
fonte
-1

Melhor Upload de Arquivo Usando o Jquery Ajax com Materialize Clique Aqui para Baixar

Quando você seleciona a imagem, a imagem será convertida na base 64 e você pode armazená-la no banco de dados para que também seja leve.

Urshit Sheth
fonte