unggah file jQuery AJAX PHP

159

Saya ingin menerapkan pengunggahan file sederhana di halaman intranet saya, dengan pengaturan sekecil mungkin.

Ini adalah bagian HTML saya:

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

dan ini adalah skrip jquery JS saya:

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

Ada folder bernama "unggahan" di direktori root situs web, dengan izin perubahan untuk "pengguna" dan "IIS_users".

Ketika saya memilih file dengan formulir-file dan menekan tombol unggah, peringatan pertama mengembalikan "[objek FormData]". peringatan kedua tidak dipanggil dan folder "unggahan" juga kosong !?

Dapatkah seseorang membantu saya menemukan apa yang salah?

Juga langkah selanjutnya seharusnya, untuk mengganti nama file dengan nama yang dihasilkan sisi server. Mungkin seseorang dapat memberi saya solusi untuk ini juga.

javascript php jquery ajax upload pengguna2355509
sumber
Silakan baca ini dulu: stackoverflow.com/questions/166221/…
Vincent Decaux
Semuanya bekerja untuk saya, mungkin itu kode PHP Anda?
Korikulum
tidak ada yang lain "terhubung" dengan formulir ini. apa maksudmu dengan kode php saya?
user2355509
Yang saya maksud adalah, kode Anda berfungsi, mungkin masalahnya ada di kode sisi server Anda.
Korikulum
Apakah Anda mendapatkan kode kesalahan 500 setelah mengeksekusi skrip AJAX? Itu akan menunjukkan bahwa itu adalah kesalahan sisi server. Juga: pastikan saat debugging, Anda menampilkan respons file PHP ke konsol. Dengan begitu, jika kode PHP Anda membuat kesalahan, Anda tahu apa yang terjadi.
Diederik

Jawaban:

286

Anda memerlukan skrip yang berjalan di server untuk memindahkan file ke direktori unggahan. ajaxMetode jQuery (berjalan di browser) mengirimkan data formulir ke server, lalu skrip di server menangani unggahan. Berikut ini contoh menggunakan PHP.

HTML Anda baik-baik saja, tetapi perbarui skrip JS jQuery Anda agar terlihat seperti ini:

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

Dan sekarang untuk skrip sisi server, menggunakan PHP dalam hal ini.

upload.php : skrip PHP yang berjalan di server dan mengarahkan file ke direktori unggahan:

<?php

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

?>

Juga, beberapa hal tentang direktori tujuan:

  1. Pastikan Anda memiliki jalur server yang benar , yaitu mulai dari lokasi skrip PHP apa jalur ke direktori unggahan, dan
  2. Pastikan itu bisa ditulisi .

Dan sedikit tentang fungsi PHP move_uploaded_file, yang digunakan dalam skrip 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']adalah nama file yang diunggah. Anda tidak harus menggunakannya. Anda dapat memberikan file nama apa saja (server filesystem yang kompatibel) yang Anda inginkan:

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

Dan akhirnya, perhatikan nilai-nilai PHP upload_max_filesizeDAN post_max_sizekonfigurasi Anda, dan pastikan file pengujian Anda tidak melebihi keduanya. Berikut ini beberapa bantuan bagaimana Anda memeriksa konfigurasi PHP dan bagaimana Anda mengatur max filesize dan memposting pengaturan .

berdarahKnuckles
sumber
hai BloodyKnuckles! terima kasih, saya pikir ini adalah satu hal besar, saya salah paham. Jadi saya menambahkan file php, dan sekarang saya sedikit lebih dekat. Peringatan kedua juga muncul! tetapi folder tersebut masih kosong.
user2355509
Ah, nama input bentuk "sortpic" diubah menjadi "file" dalam form_data.appendfungsi. Jadi saya mengubah skrip PHP untuk mencerminkan nama input formulir baru. Saya juga menarik respons skrip PHP ke peringatan sukses ajax untuk membantu debugging.
bloodyKnuckles
1
Sobat, itu memberi saya kesalahan file indeks tidak ditentukan di$_FILES['file']
Hendry Tanaka
1
@partho, prop kode ('file') [0] mengakses file lokal yang dimaksudkan untuk diunggah ke server. Jika Anda membutuhkan penjelasan lebih lanjut, cari fungsi jQuery "prop" dan "unggah file html5".
bloodyKnuckles
1
Saya menyelesaikan masalah ini. Alasannya karena ukuran file terlalu besar.
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
sumber
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
sumber
0

dan ini adalah file php untuk menerima file 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);
?>
kavehmb
sumber
Apa yang sedang if (true)dilakukan? Apakah selalu mengevaluasi kebenaran, jadi tidak berguna, bukan? Anda juga memiliki keriting ujung ekstra.
Mr.Web
Saya memperbaikinya untuk Anda. :)
Mr.Web
0

Gunakan js murni

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)
Luaskan cuplikan

Nama file dimasukkan secara otomatis ke permintaan dan server dapat membacanya, 'tipe konten' secara otomatis diatur ke 'multipart / formulir-data'. Berikut adalah contoh yang lebih berkembang dengan penanganan kesalahan dan pengiriman json tambahan

Tampilkan cuplikan kode

Kamil Kiełczewski
sumber
-1

Unggah File Terbaik Menggunakan Jquery Ajax Dengan Materialize Klik Di Sini untuk Mengunduh

Ketika Anda memilih gambar, gambar akan Dikonversi dalam basis 64 dan Anda dapat menyimpannya ke dalam basis data sehingga akan menjadi ringan juga.

Urshit Sheth
sumber