如何使用 jQuery 和 PHP 在 Dropzone 中添加下載鏈接

Dropzone 易於在頁面上設置並使用拖放或文件瀏覽上傳文件。

文件上傳後的文件預覽顯示。

它允許您使用addRemoveLinks選項添加刪除文件鏈接，但沒有添加下載鏈接的選項。

在本教程中，我將展示如何使用 jQuery 和 PHP 在 Dropzone 容器中添加帶有文件縮略圖的下載鏈接。

1. 下載並包含

從這裡下載 Dropzone 庫。
在該部分中包括 dropzone.min.css、jQuery 庫和 dropzone.min.js <head >。

<!-- Dropzone CSS -->
<link href="dropzone.min.css" rel="stylesheet" type="text/css">

<!-- jQuery -->
<script src="jquery.min.js"></script>

<!-- Dropzone JS -->
<script src="dropzone.min.js" ></script>

或者您可以使用 CDN –

<!-- Dropzone CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css" rel="stylesheet" type="text/css">

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Dropzone JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js"></script>

2. HTML

創建一個<div class="dropzone">來初始化 Dropzone。

完成的代碼

<!-- Dropzone container -->
<div class="dropzone"></div>

3.PHP

創建一個ajaxfile.php和upload文件夾來存儲文件。

將文件上傳路徑分配給$target_file.

上傳一個文件。

如果文件上傳成功則返回文件路徑( $target_file)，否則返回0。

完成的代碼

<?php
$target_dir = "upload/";

// Upload file
$target_file = $target_dir . basename($_FILES["file"]["name"]);

if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)) {
   echo $target_file;
}else{
   echo 0;
}
die;

4. jQuery

將 Dropzone 設置 autoDiscover 為 false 並在上初始化 dropzone class="dropzone"。

設置'ajaxfile.php'為url選項。

使用success選項來處理 dropzone 上傳響應。

如果響應不等於，要添加下載鏈接，請創建一個錨元素0。

添加href屬性 where use responseas value 和 set target _blank。

innerHTML添加"<br>Download"文本。

傳遞anchorEl給file.previewTemplate.appendChild()方法以添加錨元素。

完成的代碼

Dropzone.autoDiscover = false;
$(".dropzone").dropzone({
   url: "ajaxfile.php",
   success: function (file, response) {
      if(response != 0){
         // Download link
         var anchorEl = document.createElement('a');
         anchorEl.setAttribute('href',response);
         anchorEl.setAttribute('target','_blank');
         anchorEl.innerHTML = "<br>Download";
         file.previewTemplate.appendChild(anchorEl);
      }
   }
});

5. 輸出

查看輸出

六，結論

禁用 Dropzone 自動發現並使用該success選項為下載文件創建錨元素。成功上傳後從 AJAX 文件返回文件路徑並將其用於錨href屬性。

來源： https ://makitweb.com

#php #jquery

PHP jQuery Ajax Post Form Data Example

PHP jquery ajax POST request with MySQL. In this tutorial, you will learn how to create and submit a simple form in PHP using jQuery ajax post request. And how to submit a form data into MySQL database without the whole page refresh or reload. And also you will learn how to show an error message to the user if the user does not fill any form field.

And this tutorial also guide on how to send data to MySQL database using AJAX + jQuery + PHP without reloading the whole page and show a client-side validation error message if it has an error in the form.

PHP jQuery AJAX POST Form Data In Into MySQL DB Example

Just follow the few below steps and easily create and submit ajax form in PHP and MySQL with client-side validation.

Create Database And Table
Create a Database Connection File
Create An Ajax POST Form in PHP
Create An Ajax Data Store File

https://www.tutsmake.com/php-jquery-ajax-post-tutorial-example/

#jquery ajax serialize form data example #submit form using ajax in php example #save form data using ajax in php #how to insert form data using ajax in php #php jquery ajax form submit example #jquery ajax and jquery post form submit example with php

原田あすか

1659488700

如何使用 jQuery 和 PHP 在 Dropzone 中添加下載鏈接

Dropzone 易於在頁面上設置並使用拖放或文件瀏覽上傳文件。

文件上傳後的文件預覽顯示。

它允許您使用addRemoveLinks選項添加刪除文件鏈接，但沒有添加下載鏈接的選項。

在本教程中，我將展示如何使用 jQuery 和 PHP 在 Dropzone 容器中添加帶有文件縮略圖的下載鏈接。

1. 下載並包含

從這裡下載 Dropzone 庫。
在該部分中包括 dropzone.min.css、jQuery 庫和 dropzone.min.js <head >。

<!-- Dropzone CSS -->
<link href="dropzone.min.css" rel="stylesheet" type="text/css">

<!-- jQuery -->
<script src="jquery.min.js"></script>

<!-- Dropzone JS -->
<script src="dropzone.min.js" ></script>

或者您可以使用 CDN –

<!-- Dropzone CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css" rel="stylesheet" type="text/css">

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Dropzone JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js"></script>

2. HTML

創建一個<div class="dropzone">來初始化 Dropzone。

完成的代碼

<!-- Dropzone container -->
<div class="dropzone"></div>

3.PHP

創建一個ajaxfile.php和upload文件夾來存儲文件。

將文件上傳路徑分配給$target_file.

上傳一個文件。

如果文件上傳成功則返回文件路徑( $target_file)，否則返回0。

完成的代碼

<?php
$target_dir = "upload/";

// Upload file
$target_file = $target_dir . basename($_FILES["file"]["name"]);

if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)) {
   echo $target_file;
}else{
   echo 0;
}
die;

4. jQuery

將 Dropzone 設置 autoDiscover 為 false 並在上初始化 dropzone class="dropzone"。

設置'ajaxfile.php'為url選項。

使用success選項來處理 dropzone 上傳響應。

如果響應不等於，要添加下載鏈接，請創建一個錨元素0。

添加href屬性 where use responseas value 和 set target _blank。

innerHTML添加"<br>Download"文本。

傳遞anchorEl給file.previewTemplate.appendChild()方法以添加錨元素。

完成的代碼

Dropzone.autoDiscover = false;
$(".dropzone").dropzone({
   url: "ajaxfile.php",
   success: function (file, response) {
      if(response != 0){
         // Download link
         var anchorEl = document.createElement('a');
         anchorEl.setAttribute('href',response);
         anchorEl.setAttribute('target','_blank');
         anchorEl.innerHTML = "<br>Download";
         file.previewTemplate.appendChild(anchorEl);
      }
   }
});

5. 輸出

查看輸出

六，結論

禁用 Dropzone 自動發現並使用該success選項為下載文件創建錨元素。成功上傳後從 AJAX 文件返回文件路徑並將其用於錨href屬性。

來源： https ://makitweb.com

#php #jquery

hourly developer

1597820991

Hire PHP Developer

Looking to develop a PHP based website from scratch or revamp your existing website?

HourlyDeveloper.io has always been an industry leader for companies and business owners looking to hire PHP web developer. By choosing to Hire PHP Developer from our company, you can always expect the best results. Our PHP services and solutions are always flexible which means that no matter the nature of your project, you can always count on us for getting the best PHP expertise.

Consult with our experts: https://bit.ly/3aEGxPy

#hire php developer #php developer #php development company #php development services #php development #php

WebClues Infotech

1617276472

Hire PHP Developer - Best PHP Web Frameworks for Web Development

A framework that can drastically cut down the requirement to write original code to develop the web apps as per your requirement is PHP Framework. PHP frameworks offer code libraries for commonly used functions to reduce the development time.

Want to use PHP Web Frameworks for your web applications?

WebClues Infotech offers a service to hire dedicated PHP developers for all of the below-mentioned frameworks

Laravel Developer
Codeigniter Developer
Yii Developer
Zend Developer
Cake PHP Developer
Core PHP Developer

Not sure which framework to use for your PHP web application?

Contact us

Schedule Interview with PHP Developer https://bit.ly/3dsTWf0

Email: sales@webcluesinfotech.com

#hire php developer #hire php web developers #hire php developer in 2021 #hire php developers & dedicated php programmers #hire php developers india #hire and outsource freelance php developers

工藤晃

1659337560

如何使用 jQuery AJAX 和 PHP 在 DataTable 中實現日期範圍搜索

DataTable 帶有一個搜索框，可用於搜索所有或特定字段並顯示過濾記錄。

您可以根據需要添加自定義元素並將其與 DataTable 一起使用。

在本教程中，我將展示如何使用 jQuery AJAX 和 PHP 在 DataTable 中實現日期範圍搜索。我正在使用 jQuery UI 添加日期選擇器。

1.表結構

創建employee表，我添加了一些記錄。

CREATE TABLE `employee` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `emp_name` varchar(80) NOT NULL, 
  `salary` varchar(20) NOT NULL,
  `gender` varchar(10) NOT NULL,
  `city` varchar(80) NOT NULL,
  `email` varchar(80) NOT NULL,
  `date_of_joining` date NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

對於日期搜索，創建了一個類型的'date_of_joining'字段date。

2.配置

為數據庫連接創建一個config.php。

完成的代碼

<?php

$host = "localhost"; /* Host name */$user = "root"; /* User */$password = ""; /* Password */$dbname = "tutorial"; /* Database name */
$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
  die("Connection failed: " . mysqli_connect_error());
}

3. 下載並包含

從這裡下載 Datatables，從這裡下載jQuery UI 。
包括 datatables.min.css, jquery-ui.min.css, jQuery 庫,和jquery-ui.min.js部分。datatables.min.js<head>
您也可以使用 CDN。

<!-- Datatable CSS -->
<link href='//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css' rel='stylesheet' type='text/css'>

<!-- jQuery UI CSS -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">

<!-- jQuery Library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- jQuery UI JS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<!-- Datatable JS -->
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

4. HTML

對於日期過濾器，創建兩個文本元素。添加class='datepicker'用於初始化日期選擇器。另外，創建一個按鈕元素。

創建<table id='empTable'>.

完成的代碼

<div >
   <!-- Date Filter -->
   <table>
     <tr>
       <td>
          <input type='text' readonly id='search_fromdate' class="datepicker" placeholder='From date'>
       </td>
       <td>
          <input type='text' readonly id='search_todate' class="datepicker" placeholder='To date'>
       </td>
       <td>
          <input type='button' id="btn_search" value="Search">
       </td>
     </tr>
   </table>

   <!-- Table -->
   <table id='empTable' class='display dataTable'>
     <thead>
       <tr>
         <th>Employee name</th>
         <th>Email</th>
         <th>Date of Joining</th>
         <th>Salary</th>
         <th>City</th>
       </tr>
     </thead>

   </table>
</div>

5. 腳本

datepicker在上初始化class='datepicker'。

在上初始化數據表#empTable。設置選項 - 'processing': true, 'serverSide': true, 'serverMethod': 'post'。將 AJAX 網址設置為'ajaxfile.php'.

使用'ajax' data選項通過日期過濾器從和到日期通過附加在對data像中。賦值from_dateindata.searchByFromdate和to_datevalue in data.searchByTodate。

With'columns'選項指定需要從 AJAX 響應中讀取的鍵名。

在搜索按鈕上單擊調用dataTable.draw()以重繪 DataTable 並傳遞過濾器值。

完成的代碼

$(document).ready(function(){

   // Datapicker 
   $( ".datepicker" ).datepicker({
      "dateFormat": "yy-mm-dd",
      changeYear: true
   });

   // DataTable
   var dataTable = $('#empTable').DataTable({
     'processing': true,
     'serverSide': true,
     'serverMethod': 'post',
     'searching': true, // Set false to Remove default Search Control
     'ajax': {
       'url':'ajaxfile.php',
       'data': function(data){
          // Read values
          var from_date = $('#search_fromdate').val();
          var to_date = $('#search_todate').val();

          // Append to data
          data.searchByFromdate = from_date;
          data.searchByTodate = to_date;
       }
     },
     'columns': [
        { data: 'emp_name' },
        { data: 'email' },
        { data: 'date_of_joining' },
        { data: 'salary' },
        { data: 'city' },
     ]
  });

  // Search button
  $('#btn_search').click(function(){
     dataTable.draw();
  });

});

6.PHP

ajaxfile.php為 AJAX 請求處理創建文件。

讀取 DataTable POST 值並將它們分配給變量。

此外，讀取傳遞的日期過濾器值並分配 in$searchByFromdate和$searchByTodate.

如果$searchValue不為空，則準備搜索過濾器查詢。用於$searchValue搜索 emp_name、電子郵件和城市字段。

如果$searchByFromdate並且$searchByTodate不為空，則準備並連接中的搜索過濾器查詢$searchQuery。使用 between 選擇date_of_joining字段值介於$searchByFromdate和之間的記錄$searchByTodate。

employee從表中計算有和沒有過濾器的記錄數。在中分配不帶過濾器的總記錄$totalRecords和在中分配過濾器的總記錄$totalRecordwithFilter。

從表中獲取記錄，employee其中 pass $searchQueryinWHERE子句並指定ORDER BYand LIMIT。

使用所需值初始化$responseArray 並以 JSON 格式返回。

完成的代碼

<?php
include 'config.php';

## Read value
$draw = $_POST['draw'];
$row = $_POST['start'];
$rowperpage = $_POST['length']; // Rows display per page
$columnIndex = $_POST['order'][0]['column']; // Column index
$columnName = $_POST['columns'][$columnIndex]['data']; // Column name
$columnSortOrder = $_POST['order'][0]['dir']; // asc or desc
$searchValue = mysqli_real_escape_string($con,$_POST['search']['value']); // Search value

## Date search value
$searchByFromdate = mysqli_real_escape_string($con,$_POST['searchByFromdate']);
$searchByTodate = mysqli_real_escape_string($con,$_POST['searchByTodate']);

## Search 
$searchQuery = " ";
if($searchValue != ''){
    $searchQuery = " and (emp_name like '%".$searchValue."%' or email like '%".$searchValue."%' or city like'%".$searchValue."%' ) ";
}

// Date filter
if($searchByFromdate != '' && $searchByTodate != ''){
    $searchQuery .= " and (date_of_joining between '".$searchByFromdate."' and '".$searchByTodate."' ) ";
}

## Total number of records without filtering
$sel = mysqli_query($con,"select count(*) as allcount from employee");
$records = mysqli_fetch_assoc($sel);
$totalRecords = $records['allcount'];

## Total number of records with filtering
$sel = mysqli_query($con,"select count(*) as allcount from employee WHERE 1 ".$searchQuery);
$records = mysqli_fetch_assoc($sel);
$totalRecordwithFilter = $records['allcount'];

## Fetch records
$empQuery = "select * from employee WHERE 1 ".$searchQuery." order by ".$columnName." ".$columnSortOrder." limit ".$row.",".$rowperpage;
$empRecords = mysqli_query($con, $empQuery);
$data = array();

while ($row = mysqli_fetch_assoc($empRecords)) {
    $data[] = array(
    "emp_name"=>$row['emp_name'],
    "email"=>$row['email'],
    "date_of_joining"=>$row['date_of_joining'],
    "salary"=>$row['salary'],
    "city"=>$row['city']
    );
}

## Response
$response = array(
    "draw" => intval($draw),
    "iTotalRecords" => $totalRecords,
    "iTotalDisplayRecords" => $totalRecordwithFilter,
    "aaData" => $data
);

echo json_encode($response);
die;

7. 演示

查看演示

8. 結論

ajax data使用選項傳遞日期過濾器值。調用draw()dataTable 實例上的方法以在選擇開始日期和結束日期之後重新加載數據。

如果您的表字段存儲 UNIX 時間戳而不是日期或日期時間格式，那麼您需要使用strtotime()函數將傳遞的日期過濾器值從 dataTable 轉換為 UNIX 時間戳格式，並在搜索查詢中使用。

來源： https ://makitweb.com

#php #ajax #jquery

如何使用 jQuery 和 PHP 在 Dropzone 中添加下載鏈接

1. 下載並包含

2. HTML

3.PHP

4. jQuery

5. 輸出

六，結論

What is GEEK

Buddha Community

PHP jQuery Ajax Post Form Data Example

PHP jQuery AJAX POST Form Data In Into MySQL DB Example

如何使用 jQuery 和 PHP 在 Dropzone 中添加下載鏈接

1. 下載並包含

2. HTML

3.PHP

4. jQuery

5. 輸出

六，結論

Hire PHP Developer

Hire PHP Developer - Best PHP Web Frameworks for Web Development

如何使用 jQuery AJAX 和 PHP 在 DataTable 中實現日期範圍搜索

1.表結構

2.配置

3. 下載並包含

4. HTML

5. 腳本

6.PHP

7. 演示

8. 結論