Get started with jquery-file-upload CDN
MIT licensed
JQuery File Upload: popular plugin for HTML file uploads using jQuery.
Tags:- jquery
- upload
- file
- ajax
- progressbar
Stable version
Copied!
How to start using jquery-file-upload CDN
<!DOCTYPE html>
<html>
<head>
<title>Get started with jquery-file-upload CDN - cdnhub.io</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-fileupload/9.26.0/jquery.fileupload.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.cdnhub.io/jquery-file-upload/4.0.11/jquery.uploadfile.min.js"></script>
<script>
$(function() {
'use strict';
$('#fileupload').fileupload({
url: 'your-server-url', // replace with your server URL
dataType: 'json',
singleFileUploads: false,
autoUpload: true,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png|pdf|doc|docx|xls|xlsx|mp3|mp4|avi|wav|zip|rar|7z|tar|gzip)$/i,
maxFileSize: 5000000, // 5 MB
maxNumberOfFiles: 10,
previewMaxWidth: 100,
previewMaxHeight: 100,
previewCrop: false,
dropZone: $('#dropzone'),
add: function(e, data) {
data.context = $('<div></div>').appendTo('#files');
data.context.append('<div class="name">' + data.files[0].name + '</div>');
data.context.append('<div class="progress"><div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div></div>');
},
progressall: function(e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css(
'width',
progress + '%'
);
},
done: function(e, data) {
if (!data.error) {
data.context.find('.name').css('color', 'green');
} else {
data.context.find('.name').css('color', 'red');
console.log(data.error);
}
},
fail: function(e, data) {
data.context.find('.name').css('color', 'red');
console.log(data.error);
}
});
});
</script>
<style>
#fileupload {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
#dropzone {
width: 100%;
height: 100%;
border: 1px solid #ccc;
text-align: center;
padding: 20px;
font-size: 16px;
color: #333;
background-color: #fafafa;
border-radius: 4px;
cursor: pointer;
outline: none;
transition: border .1s ease-in-out;
}
#dropzone:hover {
border: 1px solid #2196f3;
}
#files {
margin-top: 20px;
}
.progress {
margin: 10px 0;
position: relative;
width: 100%;
height: 10px;
background-color: #ddd;
}
.progress-bar {
position: absolute;
height: 100%;
background-color: #4CAF50;
transition: width 0.6s ease;
}
</style>
</head>
<body>
<input type="file" id="fileupload" name="files[]" multiple>
<div id="dropzone">Drop files here or click to select</div>
<div id="files"></div>
<div id="progress">
<div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</body>
</html>
Copied!
Copied!
Copied!
Copied!