jquery,php implementation file download and statistics download times

Source: Internet
Author: User

The basic implementation is in the foreground page = users download every click, download the number of times add 1, and download the corresponding files to the local.

The required HTML code

	<div id= "Demo" > 
    <ul class= "FileList" > 
		
    

The content in the HTML code, then need to use Ajax from the background to get in the display.

The jquery code you need

    $.ajax ({ 
        type: ' Get ', 
        URL: ' filelist.php ', 
        dataType: ' json ', 
        cache:false, 
        beforesend:function () { 
            $ (". FileList"). HTML ("<li class= ' load ' > Loading ...</li>"); 
        success:function (JSON) { 
            if (JSON) { 
                var li = '; 
                $.each (Json,function (index,array) { 
                    Li = li + ' <li><a href= ' download.php?id= ' +array[' id ']+ ' "> ' + array[' file ']+ 
' <span class= ' downcount ' title= ' download times ' > ' +array[' Downloads ']+ ' </span> <span class = "Download" > click download </span></a></li>; 
                }); 
                $ (". FileList"). html (li);}} 
    ); 
    $ (' ul.filelist a '). Live (' click ', Function () { 
        var count = $ ('. Downcount ', this); 
        Count.text (parseint (Count.text ()) +1); 
    }; 

Here is the implementation, Ajax return, first on the page to render the words are loaded, after the successful request, the loop will be the data in JSON assigned to the page,

Here to add a click event for <a> elements, each time the user clicks on the corresponding document, directly to download the document 1 times, not from the database with Ajax value, here

Just give the user a visual on it.


The style you need

#demo {width:728px;margin:50px auto;padding:10px;border:1px solid #ddd; Background-color: #eee;} 
Ul.filelist Li{background:url ("img/bg_gradient.gif") repeat-x center bottom #F5F5F5; 
border:1px solid #ddd Border-top-color: #fff; list-style:none;position:relative;} 
Ul.filelist Li.load{background:url ("Img/ajax_load.gif") no-repeat; padding-left:20px;  
Border:none; position:relative; left:150px; top:30px; width:200px} 
ul.filelist li a{display:block;padding:8px;} 
Ul.filelist li A:hover. download{display:block; 
Span.download{background-color: #64b126; border:1px solid #4e9416; color:white; 
display:none;font-size:12px;padding:2px 4px;position:absolute;right:8px; 
text-decoration:none;text-shadow:0 0 1px #315d0d; top:6px; 
-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;} 
Span.downcount{color: #999;p adding:5px;position:absolute; margin-left:10px;text-decoration:none;}

The rest is two PHP files,

One is read the document database fetch the content to return to the Ajax file

	$query = ' Set names UTF8 ';
	Mysqli_query ($db, $query);
	$query  = ' select * from FileList ';
	$result = Mysqli_query ($db, $query);
	
	if (Mysqli_num_rows ($result)) {while
		
		($row = Mysqli_fetch_assoc ($result)) {
			
			$data [] = Array (
				' ID ' => $ row[' id ',
				' file ' => $row [' filename '],   
				' downloads ' => $row [' Downloads ']
			);
		}
		echo Json_encode ($data);
	}

There is also a click to implement the download PHP file

if (!isset ($id) | | | | $id ==0) die (' ID does not exist! '); 
$query = Mysqli_query ($db, "select * from FileList where id= ' $id '"); 
$row = Mysqli_fetch_array ($query); 
if (! $row) exit; 
$filename = Iconv (' UTF-8 ', ' gb2312 ', $row [' filename ']);
$savename = $row [' Savename ']; 
$sevefile = $path. $savename; 
if (file_exists ($sevefile)) {//File exists
    //download Count plus 1
    mysqli_query ($db, "update filelist set downloads=downloads+1 where id= ' $id '); 
    Open the file
    $file = @ fopen ($sevefile, "R"); 
	$file _size=filesize ($sevefile); 
	
	Header ("Content_type:application/octet_stream");
	Header ("Accept-ranges:bytes");
	Header ("Accept-length:". $file _size);
	Header ("Content-disposition:attachment;filename=". $filename);
	$buffer = 1024;
	
	
	while (!feof ($file)) {
		
		$file _data = fread ($file, $buffer);
		echo $file _data;
	}
	
    Fclose ($file); 
    Exit; 
} else{ 
    echo ' file does not exist '; 

Call Iconv for Chinese encoding conversion because the read Chinese in the database is UTF-8 encoded, win defaults to gb2312 encoding

Here a file in the client and server stored name is not the same because on the server in order to prevent duplicate file names or Chinese garbled problems, it is usually named after the date.

It is important to note that the echo $file _data must not be in the context of echo other content, otherwise it will cause the download of the file has corrupted problems.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.