Tải lên tập tin AJAX của PHP

159

Tôi muốn thực hiện tải lên tệp đơn giản trong trang mạng nội bộ của mình, với thiết lập nhỏ nhất có thể.

Đây là phần HTML của tôi:

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

và đây là kịch bản jquery JS của tôi:

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

Có một thư mục có tên "tải lên" trong thư mục gốc của trang web, với quyền thay đổi cho "người dùng" và "IIS_users".

Khi tôi chọn một tệp có dạng tệp và nhấn nút tải lên, cảnh báo đầu tiên sẽ trả về "[object FormData]". cảnh báo thứ hai không được gọi và thư mục "tải lên" cũng trống!?

Ai đó có thể giúp tôi tìm ra những gì sai?

Ngoài ra, bước tiếp theo sẽ là, đổi tên tệp với tên được tạo phía máy chủ. Có lẽ ai đó cũng có thể cho tôi một giải pháp cho việc này.

— người dùng2355509
nguồn

Vui lòng đọc phần này trước: stackoverflow.com/questions/166221/

— Kẻ

Mọi thứ đều phù hợp với tôi, có lẽ đó là mã PHP của bạn?

— Korikulum

không có gì khác "kết nối" với hình thức này. bạn có ý nghĩa gì với mã php của tôi?

— dùng2355509

Ý tôi là, mã của bạn hoạt động, có thể vấn đề nằm ở mã phía máy chủ của bạn.

— Korikulum

Bạn có nhận được mã lỗi 500 khi thực thi tập lệnh AJAX không? Điều đó sẽ chỉ ra rằng đó là một lỗi phía máy chủ. Ngoài ra: đảm bảo rằng trong khi gỡ lỗi, bạn xuất phản hồi của tệp PHP tới bàn điều khiển. Theo cách đó, nếu mã PHP của bạn gây ra lỗi, bạn sẽ biết chuyện gì đang xảy ra.

— Diederik

285

Bạn cần một tập lệnh chạy trên máy chủ để di chuyển tệp vào thư mục tải lên. ajaxPhương thức jQuery (chạy trong trình duyệt) gửi dữ liệu biểu mẫu đến máy chủ, sau đó một tập lệnh trên máy chủ xử lý việc tải lên. Đây là một ví dụ sử dụng PHP.

HTML của bạn vẫn ổn, nhưng hãy cập nhật tập lệnh JS jQuery của bạn để trông như thế này:

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

Và bây giờ cho kịch bản phía máy chủ, sử dụng PHP trong trường hợp này.

upload.php : tập lệnh PHP chạy trên máy chủ và hướng tệp đến thư mục tải lên:

<?php

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

?>

Ngoài ra, một vài điều về thư mục đích:

Hãy chắc chắn rằng bạn có đường dẫn máy chủ chính xác , nghĩa là, bắt đầu từ vị trí tập lệnh PHP, đường dẫn đến thư mục tải lên là gì và
Hãy chắc chắn rằng nó có thể ghi .

Và một chút về chức năng PHP move_uploaded_file, được sử dụng trong upload.php tập lệnh :

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']là tên của tệp khi nó được tải lên. Bạn không cần phải sử dụng nó. Bạn có thể đặt tên cho bất kỳ tên nào (tương thích với hệ thống tệp máy chủ) mà bạn muốn:

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

Và cuối cùng, hãy lưu ý đến các giá trị cấu hình PHP upload_max_filesizeVÀ của bạn post_max_sizevà đảm bảo các tệp thử nghiệm của bạn không vượt quá. Dưới đây là một số trợ giúp về cách bạn kiểm tra cấu hình PHP và cách bạn đặt cài đặt tệp và kích thước tệp tối đa .

— đẫm máu
nguồn

này BloodyKnuckles! cảm ơn, tôi nghĩ rằng đây là một điều lớn, tôi đã hiểu lầm. Vì vậy, tôi đã thêm tệp php, và bây giờ tôi gần hơn một chút. Cảnh báo thứ hai cũng bật lên! nhưng thư mục vẫn trống.

— dùng2355509

Ah, tên đầu vào của biểu mẫu "sortpic" được đổi thành "file" trong form_data.appendhàm. Vì vậy, tôi đã thay đổi tập lệnh PHP để phản ánh tên đầu vào của biểu mẫu mới. Tôi cũng đã kéo phản hồi tập lệnh PHP vào cảnh báo thành công ajax để giúp gỡ lỗi.

— BloodyKnuckles

1

Bạn ơi, nó cho tôi lỗi tệp chỉ mục không xác định tại$_FILES['file']

— Hendry Tanaka

1

@partho, mã prop ('files') [0] truy cập tệp cục bộ dự định tải lên máy chủ. Nếu bạn cần giải thích thêm, hãy tìm kiếm chức năng jQuery "prop" và "tải lên tệp html5".

— BloodyKnuckles

1

Tôi đã giải quyết vấn đề này. Lý do cho nó là kích thước tệp quá lớn.

— 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
nguồn

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
nguồn

0

và đây là tệp php để nhận các tệp được mã hóa

<?
$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
nguồn

Đang if (true)làm gì vậy Luôn luôn được đánh giá là đúng, vì vậy là vô dụng, phải không? Ngoài ra, bạn có một kết thúc thêm xoăn.

— Mr.Web

Tôi cố định nó cho bạn. :)

— Mr.Web

0

Sử dụng js tinh khiết

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)

Mở rộng đoạn trích

Tên tệp được tự động đưa vào yêu cầu và máy chủ có thể đọc nó, 'loại nội dung' được tự động đặt thành 'nhiều dữ liệu / biểu mẫu dữ liệu'. Dưới đây là ví dụ phát triển hơn với xử lý lỗi và gửi json bổ sung

Hiển thị đoạn mã

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>

Mở rộng đoạn trích

— Kamil Kiełczewski
nguồn

-1

Tải lên tệp tốt nhất bằng cách sử dụng Ajax Jquery với vật liệu hóa Bấm vào đây để tải xuống

Khi bạn chọn hình ảnh, hình ảnh sẽ được chuyển đổi trong cơ sở 64 và bạn có thể lưu nó vào cơ sở dữ liệu để nó cũng có trọng lượng nhẹ.

— Urshit Sheth
nguồn