jQuery AJAX การอัพโหลดไฟล์ PHP

159

ฉันต้องการใช้การอัปโหลดไฟล์อย่างง่ายในหน้าอินทราเน็ตของฉันโดยมีการตั้งค่าที่เล็กที่สุด

นี่คือส่วน HTML ของฉัน:

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

และนี่คือสคริปต์ 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"); 
        }
    });
});

มีโฟลเดอร์ชื่อ "อัพโหลด" ในไดเรกทอรีรากของเว็บไซต์ที่มีสิทธิ์การเปลี่ยนแปลงสำหรับ "ผู้ใช้" และ "IIS_users"

เมื่อฉันเลือกไฟล์ที่มีรูปแบบไฟล์และกดปุ่มอัพโหลดการแจ้งเตือนครั้งแรกจะส่งคืน "[วัตถุ FormData]" ไม่ได้รับการแจ้งเตือนครั้งที่สองและโฟลเดอร์ "อัพโหลด" ก็ว่างเปล่าเช่นกัน!?

มีใครช่วยฉันค้นหาสิ่งที่ผิดหรือเปล่า?

ขั้นตอนต่อไปคือการเปลี่ยนชื่อไฟล์ด้วยชื่อเซิร์ฟเวอร์ที่สร้างขึ้น บางทีใครบางคนสามารถให้คำตอบกับฉันได้เช่นกัน

— user2355509
แหล่งที่มา

โปรดอ่านก่อนนี้: stackoverflow.com/questions/166221/…

— Vincent Decaux

ทุกอย่างใช้งานได้สำหรับฉันอาจเป็นรหัส PHP ของคุณหรือ

— Korikulum

ไม่มีสิ่งใด "เชื่อมต่อ" กับฟอร์มนี้ คุณหมายความว่าอย่างไรกับรหัส PHP ของฉัน

— user2355509

สิ่งที่ฉันหมายถึงคือรหัสของคุณใช้งานได้ปัญหาอาจเกิดจากรหัสฝั่งเซิร์ฟเวอร์ของคุณ

— Korikulum

คุณได้รับรหัสข้อผิดพลาด 500 รหัสเมื่อเรียกใช้งานสคริปต์ AJAX หรือไม่ นั่นจะบ่งบอกว่าเป็นข้อผิดพลาดฝั่งเซิร์ฟเวอร์ นอกจากนี้ตรวจสอบให้แน่ใจว่าในขณะที่การดีบักคุณส่งออกการตอบสนองของไฟล์ PHP ที่คอนโซล ด้วยวิธีนี้หากรหัส PHP ของคุณเกิดข้อผิดพลาดคุณจะรู้ว่าเกิดอะไรขึ้น

— Diederik

285

คุณต้องมีสคริปต์ที่ทำงานบนเซิร์ฟเวอร์เพื่อย้ายไฟล์ไปยังไดเรกทอรีที่อัปโหลด ajaxวิธีการjQuery (ทำงานในเบราว์เซอร์) ส่งข้อมูลแบบฟอร์มไปยังเซิร์ฟเวอร์จากนั้นสคริปต์บนเซิร์ฟเวอร์จะจัดการการอัปโหลด นี่คือตัวอย่างการใช้ PHP

HTML ของคุณดี แต่อัปเดตสคริปต์ 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: '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
        }
     });
});

และตอนนี้สำหรับสคริปต์ฝั่งเซิร์ฟเวอร์โดยใช้ PHP ในกรณีนี้

upload.php : สคริปต์ PHP ที่ทำงานบนเซิร์ฟเวอร์และนำไฟล์ไปยังไดเรกทอรีที่อัพโหลด:

<?php

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

?>

นอกจากนี้สองสามสิ่งเกี่ยวกับไดเรกทอรีปลายทาง:

ตรวจสอบให้แน่ใจว่าคุณมีเส้นทางเซิร์ฟเวอร์ที่ถูกต้องเช่นเริ่มต้นที่ตำแหน่งสคริปต์ PHP เส้นทางไปยังไดเรกทอรีที่อัปโหลดคืออะไรและ
ตรวจสอบให้แน่ใจว่ามันเขียนได้

และฟังก์ชั่น PHP เล็กน้อยที่move_uploaded_fileใช้ในสคริปต์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']เป็นชื่อของไฟล์ที่ถูกอัพโหลด คุณไม่จำเป็นต้องใช้สิ่งนั้น คุณสามารถตั้งชื่อไฟล์ใด ๆ (ระบบไฟล์เซิร์ฟเวอร์ที่รองรับ) ที่คุณต้องการ:

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

และสุดท้ายให้ระวังค่าPHP upload_max_filesizeและpost_max_sizeการกำหนดค่าของคุณและให้แน่ใจว่าไฟล์ทดสอบของคุณไม่เกิน นี่คือความช่วยเหลือบางส่วนวิธีการที่คุณตรวจสอบการตั้งค่า PHPและวิธีที่คุณตั้งขนาดไฟล์สูงสุดและการตั้งค่าการโพสต์

— bloodyKnuckles
แหล่งที่มา

เฮ้ BloodyKnuckles! ขอบคุณฉันคิดว่านี่เป็นเรื่องใหญ่ฉันเข้าใจผิด ดังนั้นฉันจึงเพิ่มไฟล์ php และตอนนี้ฉันใกล้เข้ามาเล็กน้อย การแจ้งเตือนครั้งที่สองก็ปรากฏขึ้น! แต่โฟลเดอร์ยังคงว่างเปล่า

— user2355509

อ้าชื่อแบบฟอร์มอินพุต "sortpic" ถูกเปลี่ยนเป็น "file" ในform_data.appendฟังก์ชั่น ดังนั้นฉันจึงเปลี่ยนสคริปต์ PHP เพื่อสะท้อนถึงชื่ออินพุตของฟอร์มใหม่ ฉันยังดึงการตอบสนองสคริปต์ PHP ลงใน ajax success alert เพื่อช่วยในการดีบัก

— bloodyKnuckles

1

เพื่อนมันทำให้ฉันมีข้อผิดพลาดไฟล์ดัชนีที่ไม่ได้กำหนดที่$_FILES['file']

— Hendry Tanaka

1

@partho, code prop ('files') [0] เข้าถึงไฟล์โลคอลที่มีไว้สำหรับอัพโหลดไปยังเซิร์ฟเวอร์ หากคุณต้องการคำอธิบายเพิ่มเติมค้นหาฟังก์ชั่น jQuery "prop" และ "อัปโหลดไฟล์ html5"

— bloodyKnuckles

1

ฉันแก้ไขปัญหานี้แล้วสาเหตุที่ขนาดไฟล์ใหญ่เกินไป

— 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
แหล่งที่มา

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

— ซาร์
แหล่งที่มา

0

และนี่คือไฟล์ php เพื่อรับไฟล์ที่อัปเกรด

<?
$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
แหล่งที่มา

กำลังif (true)ทำอะไรอยู่? ประเมินผลเสมอจริงหรือไม่ไร้ประโยชน์ใช่หรือไม่ นอกจากนี้คุณยังมีปลายหางพิเศษ

— Mr.Web

ฉันแก้ไขให้คุณ :)

— Mr.Web

0

ใช้ js บริสุทธิ์

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)

ขยายตัวอย่างข้อมูล

ชื่อไฟล์จะถูกรวมโดยอัตโนมัติเมื่อมีการร้องขอและเซิร์ฟเวอร์สามารถอ่านได้ 'ประเภทเนื้อหา' จะถูกตั้งค่าเป็น 'มัลติพาร์ต / ฟอร์มข้อมูล' โดยอัตโนมัติ นี่คือตัวอย่างที่พัฒนาขึ้นพร้อมกับการจัดการข้อผิดพลาดและการส่ง json เพิ่มเติม

แสดงตัวอย่างโค้ด

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>

ขยายตัวอย่างข้อมูล

— Kamil Kiełczewski
แหล่งที่มา

-1

สุดยอดการอัปโหลดไฟล์โดยใช้ Jquery Ajax พร้อม Materialize คลิกที่นี่เพื่อดาวน์โหลด

เมื่อคุณเลือกรูปภาพภาพจะถูกแปลงในฐาน 64 และคุณสามารถเก็บสิ่งนี้ไว้ในฐานข้อมูลดังนั้นมันจะมีน้ำหนักเบาด้วย

— Urshit Sheth
แหล่งที่มา