jQuery AJAX dosya yükleme PHP

159

İntranet sayfama mümkün olan en küçük kurulumla basit bir dosya yüklemesi uygulamak istiyorum.

Bu benim HTML bölümüm:

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

ve bu benim JS jquery betiğim:

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

Web sitesinin kök dizininde "kullanıcılar" ve "IIS_users" için değişiklik izinlerine sahip "karşıya yüklemeler" adlı bir klasör var.

Dosya formlu bir dosya seçtiğimde ve yükle düğmesine bastığımda, ilk uyarı "[object FormData]" döndürür. ikinci uyarı çağrılmaz ve "uploads" klasörü de boş !?

Birisi yanlış olanı bulmama yardımcı olabilir mi?

Ayrıca bir sonraki adım, dosyayı sunucu tarafında oluşturulan bir adla yeniden adlandırmak olmalıdır. Belki birisi bana bunun için bir çözüm verebilir.

— user2355509
kaynak

Lütfen önce bunu okuyun: stackoverflow.com/questions/166221/…

— Vincent Decaux

Her şey benim için çalışıyor, belki de PHP kodunuz?

— Korikulum

bu formla "bağlantılı" başka bir şey yoktur. php kodumla ne demek istiyorsun?

— user2355509

Demek istediğim, kodunuz çalışıyor, belki sorun sunucu tarafı kodunuzda.

— Korikulum

AJAX komut dosyasını çalıştırdıktan sonra 500 hata kodu alıyorsunuz? Bu bir sunucu tarafı hatası olduğunu gösterir. Ayrıca: hata ayıklama sırasında PHP dosyasının konsola yanıtı verdiğinizden emin olun. Bu şekilde, PHP kodunuz hata verirse, neler olduğunu bilirsiniz.

— Diederik

286

Dosyayı uploads dizinine taşımak için sunucuda çalışan bir komut dosyasına ihtiyacınız var. JQueryajax yöntemi (tarayıcıda çalışan) form verilerini sunucuya gönderir, ardından sunucudaki bir komut dosyası yüklemeyi işler. İşte PHP kullanan bir örnek.

HTML'niz iyi, ancak JS jQuery komut dosyanızı aşağıdaki gibi görünecek şekilde güncelleyin:

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

Ve şimdi sunucu tarafı komut dosyası için, bu durumda PHP kullanarak.

upload.php : sunucuda çalışan ve dosyayı uploads dizinine yönlendiren bir PHP betiği:

<?php

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

?>

Ayrıca, hedef dizin hakkında birkaç şey:

Doğru sunucu yoluna sahip olduğunuzdan emin olun , yani PHP komut dosyası konumundan başlayarak uploads dizinine giden yol nedir ve
Yazılabilir olduğundan emin olun .

Ve upload.php betiğinde move_uploaded_filekullanılan PHP işlevi hakkında biraz :

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']dosyanın yüklendiği addır. Bunu kullanmak zorunda değilsiniz. Dosyaya istediğiniz herhangi bir adı verebilirsiniz (sunucu dosya sistemi uyumlu):

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

Ve son olarak, PHP upload_max_filesizeVE post_max_sizeyapılandırma değerlerinizin farkında olun ve test dosyalarınızın ikisini de aşmadığından emin olun. PHP yapılandırmasını nasıl kontrol edeceğiniz ve maksimum dosya boyutu ve gönderi ayarlarını nasıl ayarlayacağınızla ilgili bazı yardımları burada bulabilirsiniz .

— bloodyKnuckles
kaynak

hey BloodyKnuckles! teşekkürler, bunun büyük bir şey olduğunu düşünüyorum, yanlış anladım. Bu yüzden php dosyasını ekledim ve şimdi biraz daha yakınım. İkinci uyarı da açılır! ancak klasör hala boş.

— user2355509

Ah, form giriş adı "sortpic" işlevde "dosya" olarak değiştirilir form_data.append. Bu yüzden PHP betiğini yeni form girdi adını yansıtacak şekilde değiştirdim. Ben de hata ayıklama yardımcı olmak için ajax başarı uyarısı içine PHP komut yanıtı çekti.

— 14:21

1

Dostum, bana hata tanımsız dizin dosyası verir$_FILES['file']

— Hendry Tanaka

1

@partho, code prop ('files') [0] sunucuya yüklenmek üzere tasarlanan yerel dosyaya erişir. Daha fazla açıklamaya ihtiyacınız varsa jQuery işlevi "prop" ve "html5 dosya yükleme" konusuna bakın.

— bloodyKnuckles

1

Bu sorunu çözdüm, bunun nedeni dosya boyutunun çok büyük olmasıydı.

— 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
kaynak

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);
    }
});

— Ezher
kaynak

0

ve bu, yükseltilmiş dosyaları almak için php dosyası

<?
$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
kaynak

Ne if (true)yapıyor? Her zaman doğruyu değerlendiriyor, işe yaramaz, değil mi? Ayrıca ekstra bir kıvrım var.

— Mr.Web

Senin için düzelttim. :)

— Mr.Web

0

Saf js kullanın

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)

Snippet'i genişlet

Dosya adı isteğe otomatik olarak dahil edilir ve sunucu bunu okuyabilir, 'içerik türü' otomatik olarak 'çoklu bölüm / form verileri' olarak ayarlanır. İşte hata işleme ve ek json gönderme ile daha gelişmiş bir örnek

Kod snippet'ini göster

async function saveFile(inp) 
{
    let user = { name:'john', age:34 };
    let formData = new FormData();
    let photo = inp.files[0];      
         
    formData.append("photo", photo);
    formData.append("user", JSON.stringify(user));  
    
    try {
       let r = await fetch('/upload/image', {method: "POST", body: formData}); 
       console.log('HTTP response code:',r.status); 
       alert('success');
    } catch(e) {
       console.log('Huston we have problem...:', e);
    }
    
}

<input type="file" onchange="saveFile(this)" >
<br><br>
Before selecting the file Open chrome console > network tab to see the request details.
<br><br>
<small>Because in this example we send request to https://stacksnippets.net/upload/image the response code will be 404 ofcourse...</small>

Snippet'i genişlet

— Kamil Kiełczewski
kaynak

-1

Materialize ile Jquery Ajax Kullanarak En İyi Dosya Yükleme İndirmek İçin Tıklayınız

Görüntüyü seçtiğinizde, görüntü temel 64'e dönüştürülür ve bunu veritabanına kaydedebilirsiniz, böylece hafif olacaktır.

— Urshit Sheth
kaynak