ulpoad file by link ?? maar hoe !!
maar wil nu er een laatste din aan toevoegen en dat is een upload file by url funtcie ik heb al verschilende dinge geprobeerd en geen susces
en het voordeel dat ik nu heb is dat het bestand word geupload maar niet word opgeslagen dus is er geen bestand groote limiet en ik wil dit graag zo houden
demo: http://mcu.hypergainz.eu/MD5/mini/
index.html
Code (html)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Multi File Md5 Calculator</title>
<!-- Google web fonts -->
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel='stylesheet' />
<!-- The main CSS file -->
<link href="assets/css/style.css" rel="stylesheet" />
</head>
<body>
<!-- MD5 By File -->
<form id="upload" method="post" action="upload.php" enctype="multipart/form-data">
<div id="drop">
<p>Drop Here</p>
<a>Browse</a>
<input type="file" name="upl" multiple />
</div>
<!-- MD5 By Url -->
<div id="add">
Get MD5 By Link:
<input type="text" name="link">
<a>Submit</a>
</div>
<ul>
<!-- The file uploads will be shown here -->
</ul>
</form>
<footer>
<h2>.:[ Made By: HyperGainZ , max96at And stephenmac7 from the #MCUpdater Channel on esper.net ]:.</h2>
</footer>
<!-- JavaScript Includes -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="assets/js/jquery.knob.js"></script>
<!-- jQuery File Upload Dependencies -->
<script src="assets/js/jquery.ui.widget.js"></script>
<script src="assets/js/jquery.iframe-transport.js"></script>
<script src="assets/js/jquery.fileupload.js"></script>
<!-- Our main JS file -->
<script src="assets/js/script.js"></script>
<!-- code from stephenmac7 -->
<!-- ohh nvm no code here :D -->
<!-- Hypergainz -->
<script type="text/javascript" src="assets/js/jquery.zclip.min.js"></script>
</body>
</html>
<html>
<head>
<meta charset="utf-8"/>
<title>Multi File Md5 Calculator</title>
<!-- Google web fonts -->
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel='stylesheet' />
<!-- The main CSS file -->
<link href="assets/css/style.css" rel="stylesheet" />
</head>
<body>
<!-- MD5 By File -->
<form id="upload" method="post" action="upload.php" enctype="multipart/form-data">
<div id="drop">
<p>Drop Here</p>
<a>Browse</a>
<input type="file" name="upl" multiple />
</div>
<!-- MD5 By Url -->
<div id="add">
Get MD5 By Link:
<input type="text" name="link">
<a>Submit</a>
</div>
<ul>
<!-- The file uploads will be shown here -->
</ul>
</form>
<footer>
<h2>.:[ Made By: HyperGainZ , max96at And stephenmac7 from the #MCUpdater Channel on esper.net ]:.</h2>
</footer>
<!-- JavaScript Includes -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="assets/js/jquery.knob.js"></script>
<!-- jQuery File Upload Dependencies -->
<script src="assets/js/jquery.ui.widget.js"></script>
<script src="assets/js/jquery.iframe-transport.js"></script>
<script src="assets/js/jquery.fileupload.js"></script>
<!-- Our main JS file -->
<script src="assets/js/script.js"></script>
<!-- code from stephenmac7 -->
<!-- ohh nvm no code here :D -->
<!-- Hypergainz -->
<script type="text/javascript" src="assets/js/jquery.zclip.min.js"></script>
</body>
</html>
upload.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<?php
if(isset($_FILES['upl']) && $_FILES['upl']['error'] == 0){
$extension = pathinfo($_FILES['upl']['name'], PATHINFO_EXTENSION);
if($md5 = md5_file($_FILES['upl']['tmp_name'])){
echo '{"status":"success", "md5":"'.$md5.'"}';
exit;
}
}
echo '{"status":"error"}';
exit;
[/code]
script.js
[code lang="js"]
$(function(){
var ul = $('#upload ul');
$('#drop a').click(function(){
// Simulate a click on the file input button
// to show the file browser dialog
$(this).parent().find('input').click();
});
// Initialize the jQuery File Upload plugin
$('#upload').fileupload({
// This element will accept file drag/drop uploading
dropZone: $('#drop'),
// This function is called when a file is added to the queue;
// either via the browse button, or via drag/drop:
add: function (e, data) {
var tpl = $('<li class="working"><input type="text" value="0" data-width="48" data-height="48"'+
' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>');
// Append the file name and file size
tpl.find('p').text(data.files[0].name)
.append('<i>' + formatFileSize(data.files[0].size) + '</i>');
// Add the HTML to the UL element
data.context = tpl.appendTo(ul);
// Initialize the knob plugin
tpl.find('input').knob();
// Listen for clicks on the cancel icon
tpl.find('span').click(function(){
if(tpl.hasClass('working')){
jqXHR.abort();
}
tpl.fadeOut(function(){
tpl.remove();
});
});
// Automatically upload the file once it is added to the queue
var jqXHR = data.submit();
},
progress: function(e, data){
// Calculate the completion percentage of the upload
var progress = parseInt(data.loaded / data.total * 100, 10);
// Update the hidden input field and trigger a change
// so that the jQuery knob plugin knows to update the dial
data.context.find('input').val(progress).change();
if(progress == 100){
data.context.removeClass('working');
}
},
fail:function(e, data){
// Something has gone wrong!
data.context.addClass('error');
},
done:function(e, data){
var md5sum = jQuery.parseJSON(data.result).md5;
data.context.find('p').append('<i>MD5: ' + md5sum + ' <a href="#" style="text-decoration: none" id="copy-' + md5sum + '"><img src="assets/img/clipboard_blue.png" width="23" height="20"/></a></i></div>');
$('#copy-' + md5sum).zclip({
path: 'assets/js/ZeroClipboard.swf',
copy: md5sum
});
}
});
// Prevent the default action when a file is dropped on the window
$(document).on('drop dragover', function (e) {
e.preventDefault();
});
// Helper function that formats the file sizes
function formatFileSize(bytes) {
if (typeof bytes !== 'number') {
return '';
}
if (bytes >= 1000000000) {
return (bytes / 1000000000).toFixed(2) + ' GB';
}
if (bytes >= 1000000) {
return (bytes / 1000000).toFixed(2) + ' MB';
}
return (bytes / 1000).toFixed(2) + ' KB';
}
});
[/code]
if(isset($_FILES['upl']) && $_FILES['upl']['error'] == 0){
$extension = pathinfo($_FILES['upl']['name'], PATHINFO_EXTENSION);
if($md5 = md5_file($_FILES['upl']['tmp_name'])){
echo '{"status":"success", "md5":"'.$md5.'"}';
exit;
}
}
echo '{"status":"error"}';
exit;
[/code]
script.js
[code lang="js"]
$(function(){
var ul = $('#upload ul');
$('#drop a').click(function(){
// Simulate a click on the file input button
// to show the file browser dialog
$(this).parent().find('input').click();
});
// Initialize the jQuery File Upload plugin
$('#upload').fileupload({
// This element will accept file drag/drop uploading
dropZone: $('#drop'),
// This function is called when a file is added to the queue;
// either via the browse button, or via drag/drop:
add: function (e, data) {
var tpl = $('<li class="working"><input type="text" value="0" data-width="48" data-height="48"'+
' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>');
// Append the file name and file size
tpl.find('p').text(data.files[0].name)
.append('<i>' + formatFileSize(data.files[0].size) + '</i>');
// Add the HTML to the UL element
data.context = tpl.appendTo(ul);
// Initialize the knob plugin
tpl.find('input').knob();
// Listen for clicks on the cancel icon
tpl.find('span').click(function(){
if(tpl.hasClass('working')){
jqXHR.abort();
}
tpl.fadeOut(function(){
tpl.remove();
});
});
// Automatically upload the file once it is added to the queue
var jqXHR = data.submit();
},
progress: function(e, data){
// Calculate the completion percentage of the upload
var progress = parseInt(data.loaded / data.total * 100, 10);
// Update the hidden input field and trigger a change
// so that the jQuery knob plugin knows to update the dial
data.context.find('input').val(progress).change();
if(progress == 100){
data.context.removeClass('working');
}
},
fail:function(e, data){
// Something has gone wrong!
data.context.addClass('error');
},
done:function(e, data){
var md5sum = jQuery.parseJSON(data.result).md5;
data.context.find('p').append('<i>MD5: ' + md5sum + ' <a href="#" style="text-decoration: none" id="copy-' + md5sum + '"><img src="assets/img/clipboard_blue.png" width="23" height="20"/></a></i></div>');
$('#copy-' + md5sum).zclip({
path: 'assets/js/ZeroClipboard.swf',
copy: md5sum
});
}
});
// Prevent the default action when a file is dropped on the window
$(document).on('drop dragover', function (e) {
e.preventDefault();
});
// Helper function that formats the file sizes
function formatFileSize(bytes) {
if (typeof bytes !== 'number') {
return '';
}
if (bytes >= 1000000000) {
return (bytes / 1000000000).toFixed(2) + ' GB';
}
if (bytes >= 1000000) {
return (bytes / 1000000).toFixed(2) + ' MB';
}
return (bytes / 1000).toFixed(2) + ' KB';
}
});
[/code]
Gewijzigd op 01/09/2013 23:32:22 door Nick Dijkstra
Nicolai Van der Storm op 01/09/2013 23:08:11:
maar wil nu er een laatste din aan toevoegen en dat is een upload file by url funtcie
Dat is de vraag die je hebt, dus?
Leg eens beter uit wat je wil
---
Paco de Wulp op 02/09/2013 00:11:55:
Ik mis nog style.css !
Dat is nogal flauw.
Vooral dan dat je die css file kan zien als je die link opent.
Gewijzigd op 02/09/2013 10:50:50 door Kris Peeters
Kris Peeters op 02/09/2013 10:29:53:
Dat is de vraag die je hebt, dus?
Leg eens beter uit wat je wil
dus als je naar de site gaat zie je al een text field staan waar men een link kunnen ingeven maar deze werkt nog niet.
dus ik zou graag hebben dat als de user de link ingeeft (vb : http://site.com/bestand.zip )
dat het script het betand download en daarna de MD5 CheckSum geeft
en als het script het bestand moet opslaan wil ik wel dat hij daarna ook weer verwijderd nadat hij de md5 heeft gegeven
vb van out put:
Nicolai Van der Storm op 01/09/2013 23:08:11:
maar wil nu er een laatste din aan toevoegen en dat is een upload file by url funtcie
Dat is de vraag die je hebt, dus?
Leg eens beter uit wat je wil
dus als je naar de site gaat zie je al een text field staan waar men een link kunnen ingeven maar deze werkt nog niet.
dus ik zou graag hebben dat als de user de link ingeeft (vb : http://site.com/bestand.zip )
dat het script het betand download en daarna de MD5 CheckSum geeft
en als het script het bestand moet opslaan wil ik wel dat hij daarna ook weer verwijderd nadat hij de md5 heeft gegeven
vb van out put:
Gewijzigd op 02/09/2013 11:28:53 door Nicolai Van der Storm
Ja, wellicht een beetje flauw, maar nu weet ik weer hoe je dus een included js-file kan zien ! :-)
De reden dat ik dit vroeg is dat ik zijn progressie-bar zo mooi vind !. Ik ben namelijk opzoek naar zoiets.
Bij deze @Nicolai Van der Storm bedankt voor dit mooie voorbeeld !
Feit is wel dat ik kennis moet maken met JSQuery en trouwens ook nog met AJAX.
Zo leert deze newbie elke keer weer wat bij..
Bedankt !
Gewijzigd op 02/09/2013 13:46:07 door Paco de Wulp
Nicolai Van der Storm op 02/09/2013 10:54:05:
dus ik zou graag hebben dat als de user de link ingeeft (vb : http://site.com/bestand.zip )
dat het script het betand download en daarna de MD5 CheckSum geeft
dat het script het betand download en daarna de MD5 CheckSum geeft
Voorlopig is dat een beetje lastig.
Je kan met javascript niet aan code van andere domeinen.
Dit zal dus via de server moeten gebeuren.
Ik zou voorstellen:
- een Ajax-verzoek naar de server, met de url (dus bv. http://site.com/bestand.zip).
- De server downloadt het bestand, van de vreemde server naar jouw server
- De server berekent md5_file() en stuurt het resultaat terug naar javascript
- Dan kan je bat bestand verwijderen van jouw site
Nu ja ... je snapt wel dat uploaden niet meer nodig is; de server deed dat voor jou.
-----
Maar toch even een stapje terug.
Je hebt het hier over, juist?
http://www.phphulp.nl/php/forum/topic/md5-hulp/92042/
Die md5-code is dus de md5_file van het bestand dat geüploadet is; juist?
Hoe zit dat met die zip? Moet die eerst geünzipt worden?
Gaat het om de md5_file van de bestanden, of van de zip file?
Toevoeging op 03/09/2013 11:06:01:
Ik heb een aantal paden absolute gezet, zodat ik ze niet moet downloaden ...
bv. /assets/js/jquery.ui.widget.js veranderd naar http://mcu.hypergainz.eu/MD5/mini/assets/js/jquery.ui.widget.js
Let er zelf op dat je die paden terug zet zoals jij ze wil.
Verder heb ik wat geprutst aan de indentering. Ieder zijn ding ...
Ik denk dat dit ongeveer doet wat je nodig hebt.
index.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Multi File Md5 Calculator</title>
<!-- Google web fonts -->
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel='stylesheet' />
<!-- The main CSS file -->
<link href="http://mcu.hypergainz.eu/MD5/mini/assets/css/style.css" rel="stylesheet" />
</head>
<body>
<!-- MD5 By File -->
<form id="upload" method="post" action="upload.php" enctype="multipart/form-data">
<div id="drop">
<p>Drop Here</p>
<a>Browse</a>
<input type="file" name="upl" multiple />
</div>
<!-- MD5 By Url -->
<div id="add">
Get MD5 By Link:
<input type="text" name="link" value="script.js">
<a>Submit</a>
</div>
<ul>
<!-- The file uploads will be shown here -->
</ul>
</form>
<footer>
<h2>.:[ Made By: HyperGainZ , max96at And stephenmac7 from the #MCUpdater Channel on esper.net ]:.</h2>
</footer>
<!-- JavaScript Includes -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://mcu.hypergainz.eu/MD5/mini/assets/js/jquery.knob.js"></script>
<!-- jQuery File Upload Dependencies -->
<script src="http://mcu.hypergainz.eu/MD5/mini/assets/js/jquery.ui.widget.js"></script>
<script src="http://mcu.hypergainz.eu/MD5/mini/assets/js/jquery.iframe-transport.js"></script>
<script src="http://mcu.hypergainz.eu/MD5/mini/assets/js/jquery.fileupload.js"></script>
<!-- Our main JS file -->
<script src="script.js"></script>
<!-- code from stephenmac7 -->
<!-- ohh nvm no code here :D -->
<!-- Hypergainz -->
<script type="text/javascript" src="http://mcu.hypergainz.eu/MD5/mini/assets/js/jquery.zclip.min.js"></script>
</body>
</html>
<html>
<head>
<meta charset="utf-8"/>
<title>Multi File Md5 Calculator</title>
<!-- Google web fonts -->
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel='stylesheet' />
<!-- The main CSS file -->
<link href="http://mcu.hypergainz.eu/MD5/mini/assets/css/style.css" rel="stylesheet" />
</head>
<body>
<!-- MD5 By File -->
<form id="upload" method="post" action="upload.php" enctype="multipart/form-data">
<div id="drop">
<p>Drop Here</p>
<a>Browse</a>
<input type="file" name="upl" multiple />
</div>
<!-- MD5 By Url -->
<div id="add">
Get MD5 By Link:
<input type="text" name="link" value="script.js">
<a>Submit</a>
</div>
<ul>
<!-- The file uploads will be shown here -->
</ul>
</form>
<footer>
<h2>.:[ Made By: HyperGainZ , max96at And stephenmac7 from the #MCUpdater Channel on esper.net ]:.</h2>
</footer>
<!-- JavaScript Includes -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://mcu.hypergainz.eu/MD5/mini/assets/js/jquery.knob.js"></script>
<!-- jQuery File Upload Dependencies -->
<script src="http://mcu.hypergainz.eu/MD5/mini/assets/js/jquery.ui.widget.js"></script>
<script src="http://mcu.hypergainz.eu/MD5/mini/assets/js/jquery.iframe-transport.js"></script>
<script src="http://mcu.hypergainz.eu/MD5/mini/assets/js/jquery.fileupload.js"></script>
<!-- Our main JS file -->
<script src="script.js"></script>
<!-- code from stephenmac7 -->
<!-- ohh nvm no code here :D -->
<!-- Hypergainz -->
<script type="text/javascript" src="http://mcu.hypergainz.eu/MD5/mini/assets/js/jquery.zclip.min.js"></script>
</body>
</html>
script.js
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
$(function() {
var ul = $('#upload ul');
// upload link by file
$('#add a').click(function(e) {
e.preventDefault();
$.ajax({
url: 'link_by_url.php',
data: {link: $('#add [name="link"]').val()},
dataType: 'json',
type: 'post',
success: function(data) {
$('#upload ul').html( '<li class=""><div style="display:inline;width:48px;height:48px;"><canvas width="48" height="48px"></canvas><input type="text" value="0" data-width="48" data-height="48" data-fgcolor="#0788a5" data-readonly="1" data-bgcolor="#3e4043" readonly="readonly" style="width: 28px; height: 16px; position: absolute; vertical-align: middle; margin-top: 16px; margin-left: -38px; border: 0px; background-image: none; font-weight: bold; font-style: normal; font-variant: normal; font-size: 9px; line-height: normal; font-family: Arial; text-align: center; color: rgb(7, 136, 165); padding: 0px; -webkit-appearance: none; background-position: initial initial; background-repeat: initial initial;"></div><p>' + data.file + '<i>' + formatFileSize(data.size) + '</i><i>MD5: ' + data.md5 + ' <a href="#" style="text-decoration: none" id="copy-d1ae340e585ec567005e73987674e588"><img src="assets/img/clipboard_blue.png" width="23" height="20"></a><div class="zclip" id="zclip-ZeroClipboardMovie_1" style="position: absolute; left: 255px; top: 40px; width: 23px; height: 20px; z-index: 99;"><embed id="ZeroClipboardMovie_1" src="assets/js/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="23" height="20" name="ZeroClipboardMovie_1" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&width=23&height=20" wmode="transparent"></div></i></p><span></span></li>');
},
error: function(data) {
$('#add a').after('<div>' + data.responseText + '</div>');
},
});
});
$('#drop a').click(function() {
// Simulate a click on the file input button
// to show the file browser dialog
$(this).parent().find('input').click();
});
// Initialize the jQuery File Upload plugin
$('#upload').fileupload({
// This element will accept file drag/drop uploading
dropZone: $('#drop'),
// This function is called when a file is added to the queue;
// either via the browse button, or via drag/drop:
add: function (e, data) {
var tpl = $('<li class="working"><input type="text" value="0" data-width="48" data-height="48"' +
' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>');
// Append the file name and file size
tpl.find('p').text(data.files[0].name)
.append('<i>' + formatFileSize(data.files[0].size) + '</i>');
// Add the HTML to the UL element
data.context = tpl.appendTo(ul);
// Initialize the knob plugin
tpl.find('input').knob();
// Listen for clicks on the cancel icon
tpl.find('span').click(function() {
if(tpl.hasClass('working')) {
jqXHR.abort();
}
tpl.fadeOut(function() {
tpl.remove();
});
});
// Automatically upload the file once it is added to the queue
var jqXHR = data.submit();
},
progress: function(e, data) {
// Calculate the completion percentage of the upload
var progress = parseInt(data.loaded / data.total * 100, 10);
// Update the hidden input field and trigger a change
// so that the jQuery knob plugin knows to update the dial
data.context.find('input').val(progress).change();
if(progress == 100) {
data.context.removeClass('working');
}
},
fail:function(e, data) {
// Something has gone wrong!
data.context.addClass('error');
},
done:function(e, data) {
var md5sum = jQuery.parseJSON(data.result).md5;
data.context.find('p').append('<i>MD5: ' + md5sum + ' <a href="#" style="text-decoration: none" id="copy-' + md5sum + '"><img src="assets/img/clipboard_blue.png" width="23" height="20"/></a></i></div>');
$('#copy-' + md5sum).zclip({
path: 'assets/js/ZeroClipboard.swf',
copy: md5sum
});
}
});
// Prevent the default action when a file is dropped on the window
$(document).on('drop dragover', function (e) {
e.preventDefault();
});
// Helper function that formats the file sizes
function formatFileSize(bytes) {
if (typeof bytes !== 'number') {
return '';
}
if (bytes >= 1000000000) {
return (bytes / 1000000000).toFixed(2) + ' GB';
}
if (bytes >= 1000000) {
return (bytes / 1000000).toFixed(2) + ' MB';
}
return (bytes / 1000).toFixed(2) + ' KB';
}
});
var ul = $('#upload ul');
// upload link by file
$('#add a').click(function(e) {
e.preventDefault();
$.ajax({
url: 'link_by_url.php',
data: {link: $('#add [name="link"]').val()},
dataType: 'json',
type: 'post',
success: function(data) {
$('#upload ul').html( '<li class=""><div style="display:inline;width:48px;height:48px;"><canvas width="48" height="48px"></canvas><input type="text" value="0" data-width="48" data-height="48" data-fgcolor="#0788a5" data-readonly="1" data-bgcolor="#3e4043" readonly="readonly" style="width: 28px; height: 16px; position: absolute; vertical-align: middle; margin-top: 16px; margin-left: -38px; border: 0px; background-image: none; font-weight: bold; font-style: normal; font-variant: normal; font-size: 9px; line-height: normal; font-family: Arial; text-align: center; color: rgb(7, 136, 165); padding: 0px; -webkit-appearance: none; background-position: initial initial; background-repeat: initial initial;"></div><p>' + data.file + '<i>' + formatFileSize(data.size) + '</i><i>MD5: ' + data.md5 + ' <a href="#" style="text-decoration: none" id="copy-d1ae340e585ec567005e73987674e588"><img src="assets/img/clipboard_blue.png" width="23" height="20"></a><div class="zclip" id="zclip-ZeroClipboardMovie_1" style="position: absolute; left: 255px; top: 40px; width: 23px; height: 20px; z-index: 99;"><embed id="ZeroClipboardMovie_1" src="assets/js/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="23" height="20" name="ZeroClipboardMovie_1" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&width=23&height=20" wmode="transparent"></div></i></p><span></span></li>');
},
error: function(data) {
$('#add a').after('<div>' + data.responseText + '</div>');
},
});
});
$('#drop a').click(function() {
// Simulate a click on the file input button
// to show the file browser dialog
$(this).parent().find('input').click();
});
// Initialize the jQuery File Upload plugin
$('#upload').fileupload({
// This element will accept file drag/drop uploading
dropZone: $('#drop'),
// This function is called when a file is added to the queue;
// either via the browse button, or via drag/drop:
add: function (e, data) {
var tpl = $('<li class="working"><input type="text" value="0" data-width="48" data-height="48"' +
' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>');
// Append the file name and file size
tpl.find('p').text(data.files[0].name)
.append('<i>' + formatFileSize(data.files[0].size) + '</i>');
// Add the HTML to the UL element
data.context = tpl.appendTo(ul);
// Initialize the knob plugin
tpl.find('input').knob();
// Listen for clicks on the cancel icon
tpl.find('span').click(function() {
if(tpl.hasClass('working')) {
jqXHR.abort();
}
tpl.fadeOut(function() {
tpl.remove();
});
});
// Automatically upload the file once it is added to the queue
var jqXHR = data.submit();
},
progress: function(e, data) {
// Calculate the completion percentage of the upload
var progress = parseInt(data.loaded / data.total * 100, 10);
// Update the hidden input field and trigger a change
// so that the jQuery knob plugin knows to update the dial
data.context.find('input').val(progress).change();
if(progress == 100) {
data.context.removeClass('working');
}
},
fail:function(e, data) {
// Something has gone wrong!
data.context.addClass('error');
},
done:function(e, data) {
var md5sum = jQuery.parseJSON(data.result).md5;
data.context.find('p').append('<i>MD5: ' + md5sum + ' <a href="#" style="text-decoration: none" id="copy-' + md5sum + '"><img src="assets/img/clipboard_blue.png" width="23" height="20"/></a></i></div>');
$('#copy-' + md5sum).zclip({
path: 'assets/js/ZeroClipboard.swf',
copy: md5sum
});
}
});
// Prevent the default action when a file is dropped on the window
$(document).on('drop dragover', function (e) {
e.preventDefault();
});
// Helper function that formats the file sizes
function formatFileSize(bytes) {
if (typeof bytes !== 'number') {
return '';
}
if (bytes >= 1000000000) {
return (bytes / 1000000000).toFixed(2) + ' GB';
}
if (bytes >= 1000000) {
return (bytes / 1000000).toFixed(2) + ' MB';
}
return (bytes / 1000).toFixed(2) + ' KB';
}
});
upload.php: niets veranderd
link_by_url.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['link'])) {
try {
//$data = file_get_contents($_POST['link']);
echo json_encode(array(
'md5' => md5_file($_POST['link']),
'file' => $_POST['link'],
'size' => filesize($_POST['link'])
));
exit;
}
catch(Exception $e) {
json_encode(array(
'error' => 'Exception' //$e
));
}
}
json_encode(array(
'error' => 'mislukt'
));
?>
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['link'])) {
try {
//$data = file_get_contents($_POST['link']);
echo json_encode(array(
'md5' => md5_file($_POST['link']),
'file' => $_POST['link'],
'size' => filesize($_POST['link'])
));
exit;
}
catch(Exception $e) {
json_encode(array(
'error' => 'Exception' //$e
));
}
}
json_encode(array(
'error' => 'mislukt'
));
?>
Er zijn ongetwijfeld nog details te regelen
Gewijzigd op 02/09/2013 13:31:37 door Kris Peeters
Toevoeging op 03/09/2013 16:19:45:
ok ik heb het op de site staan alleen spijteg dat ik geen link kan submitten en geenbestand kan selectere :s er is iets kapot http://mcu.hypergainz.eu/MD5/test/
Ofwel pas je <script src="script.js"></script> aan, zodat het naar de juiste plek wijst, ofwel zet je script.js op de zelfde map als index.php.
Let overal een beetje op de paden; ik heb die aangepast, zodat ik dit kan testen zonder overal submapjes te maken ...
Gewijzigd op 03/09/2013 16:28:41 door Kris Peeters
de md5 via bestand is goed
maar via link is raar
http://puu.sh/4i4NT.jpg
Toevoeging op 03/09/2013 18:33:44:
ik zou willen dat de output het zelfde is als dat ven een bestand