Chức năng upload file nên hiển thị như nào

Question

Hướng dẫn tạo upload file với jquery UploadFile. Như tiêu đề hôm nay codevivu sẽ hướng dẫn các bạn làm sao để tạo một form upload file bằng jquery UploadFile. Với đầy đủ các chức năng multiple upload, download , delete.

Nội dung chính Show

1. Chèn jquery vào HTML.
2. Add thêm thẻ div vào body.
4. Tạo file xử lý upload lên server.
5. Hiển thị chức năng Download/Delete và dragDrop

Đầu tiên chúng ta cần chuẩn bị bộ jquery bên dưới: jquery UploadFile UploadFile CSS

1. Chèn jquery vào HTML.

<!DOCTYPE html> <html lang=""> <head>

<link href="uploadfile.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.uploadfile.js"></script>

</head> <body> </body> </html>

2. Add thêm thẻ div vào body.

Chúng ta chèn vào thẻ body một thẻ div body và thêm vào một thuộc tính id với tên tùy chọn. Thuộc tính id này sẽ xử lý hiển thị Jquery upload file.

<div id="codevivu-uploader">Upload</div>

Để hiển thị jquery UploadFile Chúng ta cần khởi tạo chúng bằng một đoạn mã Javascript

codevivu-uploader").uploadFile({

url:"YOUR_FILE_UPLOAD_URL", fileName:"INPUT_FILE_NAME" }); }); </script>

Đến đây cơ bản chúng ta đã hiển thị được Form cung như giao diện upload. Giải thích thêm cho chúng ta. – YOUR_FILE_UPLOAD_URL: đây sẽ là URL đến file xử lý upload phía server. Đối với những bạn nào dùng PHP thì chúng ta sẽ tạo đường dẩn tới file PHP cần xử lý upload.

– INPUT_FILE_NAME : Ở Đây chúng ta sẽ điền vào tên (name) của input file. Vì Jquery UploadFile sẽ tự render cho chúng một thẻ HTML input File với name = INPUT_FILE_NAME

Và đựa vào INPUT_FILE_NAME chúng ta sẽ lấy được giá trị của form khi upload lên server. Chi tiết thế nào chúng ta cùng tiếp tục nhé.

Sao khi xong bước 3. Chúng ta sẽ được giao diện như hình bên dưới:

4. Tạo file xử lý upload lên server.

Như chúng ta đề cập ở bước 3. ở bước 4 này chúng ta sẽ đề cập đến YOUR_FILE_UPLOAD_URL và INPUT_FILE_NAME. tôi sẽ tạo một File có tên upload.php với nội dung như sau:

$output_dir = "uploads/";//Đường dẫn tới thư mục cần upload //Chúng ta cần để thư mục với đường dẫn tương đối if (isset($_FILES["INPUT_FILE_NAME "])) { //Kiểm tra xem bạn có chọn file để upload hay không với INPUT_FILE_NAME bạn sẽ khai báo ở bước 3

$ret = array(); //Khai báo một biến tạm  kiễu Array lữu trữ file vừa upload.
$error = $_FILES["INPUT_FILE_NAME "]["error"]; // Khai báo một biến tạm  kiễu Array lữu trữ lổi nếu xẩy ra lổi
if (!is_array($_FILES["INPUT_FILE_NAME "]["name"])) { //Kiểm tra trường hợp bạn upload đơn file
    $fileName = $_FILES["INPUT_FILE_NAME "]["name"]; // lấy tên File
    move_uploaded_file($_FILES["INPUT_FILE_NAME "]["tmp_name"], $output_dir.$fileName); //Upload file
    $ret[]= $fileName; // Gán File vừa upload vào mãng luu trữ
} else { //Kiểm tra trường hợp bạn upload nhiều file
    $fileCount = count($_FILES["INPUT_FILE_NAME "]["name"]); // Đếm tổng số file upload
    for ($i=0; $i < $fileCount; $i++) { // Do chúng ta up nhiều File nên chúng ta tạo một vòng lặp để xửa lý upload từ File một
        $fileName = $_FILES["INPUT_FILE_NAME "]["name"][$i];  // lấy tên File thứ i
        move_uploaded_file($_FILES["INPUT_FILE_NAME "]["tmp_name"][$i], $output_dir.$fileName); // Upload file thứ i
        $ret[]= $fileName; // Gán File vừa upload vào mãng luu trữ
    }
}
echo json_encode($ret); // return về dạn json  mảng luu trữ file vừa upload.

}

5. Hiển thị chức năng Download/Delete và dragDrop

Sau khi làm xong bước 4 thì chúng ta đã hoàn thành xong chức năng chính là upload File rồi phải không nào. Tiếp theo chúng ta sẽ co rat nhiều chức năng phụ bên dưới chúng ta sẽ tìm hiểu sơ lược nhé.

Tạo chức năng Delete và Download

codevivu-uploader").uploadFile({

url:"YOUR_FILE_UPLOAD_URL", fileName:"INPUT_FILE_NAME",

    dragDrop: true,
    showDelete: true,
    showDownload:true,
    deleteCallback: function (data, pd) {
      for (var i = 0; i < data.length; i++) {
         $.post("YOUR_FILE_DELETE_URL", {op: "delete",name: data[i]},
             function (resp,textStatus, jqXHR) {
               //Show Message  
               alert("File Deleted");
             });
     }
     pd.statusbar.hide(); //You choice.
 },
 downloadCallback:function(filename,pd) {
   location.href="YOUR_FILE_DOWNLOAD_URL?filename="+filename;
 }

}); }); </script>

YOUR_FILE_DELETE_URL : Sẽ là đường dẩn đến file xử lý chức năng delete. Tôi sẽ tạo vi vụ file delete.php có nội dung nhu sau.

$output_dir = "uploads/"; if (isset($_POST["op"]) && $_POST["op"] == "delete" && isset($_POST['INPUT_FILE_NAME'])) {

$fileName = $_POST['INPUT_FILE_NAME'];
$fileName = str_replace("..", ".", $fileName);//Kiểm tra trường hợp ai đó cố gắn upload ra ngoài thư mục Upload
$filePath = $output_dir. $fileName;
if (file_exists($filePath)) {
    unlink($filePath);
}
echo "Deleted File ".$fileName."<br>";

}

YOUR_FILE_DOWNLOAD_URL: Sẽ là đường dẩn đến file xử lý chức năng downoad. Tôi sẽ tạo vi vụ file downoad.php có nội dung nhu sau:

if (isset($_GET['INPUT_FILE_NAME'])) {

$fileName=$_GET['INPUT_FILE_NAME'];
$fileName = str_replace("..", ".", $fileName);//Kiểm tra trường hợp ai đó cố gắn upload ra ngoài thư mục Upload
$file = $output_dir . $fileName;
$file = str_replace("..", "", $file);
if (file_exists($file)) {
    $fileName =str_replace(" ", "", $fileName);
    header('Content-Description: File Transfer');
    header('Content-Disposition: attachment; filename='.$fileName);
    header('Content-Transfer-Encoding: binary');
    header('Expires: 0');
    header('Cache-Control: must-revalidate');
    header('Pragma: public');
    header('Content-Length: ' . filesize($file));
    ob_clean();
    flush();
    readfile($file);
    exit;
}

}

Vậy là chúng ta đã hoàn thành thêm 2 chức năng mới là download và Delete rồi nhé. Vậy là cơ bản đã xong. Chưa hết đâu nhé đã chia sẽ thì sẻ chia sẽ tận cùng nha hihi!

Ngoài các lựa chọn thuộc thính trên của Jquery UploadFile. Mình sẽ giới thiệu cho các bạn biết thêm về một số API và thuộc tính mà Jquery UploadFile hổ trợ nhé.

Cú pháp sử dụng của Jquery UploadFile cơ bản nhu sau chúng ta sẽ sử dụng chúng cho các thuộc tính tiếp theo nhé nên các bạn lưu ý:

mẹo hay Công Nghệ File Upload Upload la gì Upload file reactjs Upload file PHP