<div class="fileUpload">
<h3>Dosyayı sürükle ve buraya bırak</h3>
<p>veya</p>
<input type="file" id="file" class="upload" accept="image/*" multiple/>
<span class="jFiler-input-choose-btn">Dosyalara Göz At</span>
</div>
<div id="UrunResimDIV" class="row column"></div>
.fileUpload{
width: 100%;
margin: 0 auto 25px auto;
padding: 20px;
color: #97A1A8;
background: #F9FBFE;
border: 2px dashed #C8CBCE;
text-align: center;
-webkit-transition: box-shadow 0.3s, border-color 0.3s;
-moz-transition: box-shadow 0.3s, border-color 0.3s;
transition: box-shadow 0.3s, border-color 0.3s;
color: #97A1A8;
}
.fileUpload h3{
font-size: 18px;
display: block;
font-size: 1.17em;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
.fileUpload p{font-size:10px;}
.fileUpload .jFiler-input-choose-btn {
color: #48A0DC !important;
border: 1px solid #48A0DC !important;
display: inline-block;
padding: 8px 14px;
outline: none;
cursor: pointer;
text-decoration: none;
text-align: center;
white-space: nowrap;
font-size: 12px;
font-weight: bold;
color: #8d9496;
border-radius: 3px;
border: 1px solid #c6c6c6;
vertical-align: middle;
box-shadow: 0px 1px 5px rgba(0,0,0,0.05);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
margin-top: 5px;
margin-bottom: 15px;
}
.fileUpload:hover .jFiler-input-choose-btn{
background: #48A0DC;
color:#FFF !important;
}
.fileUpload {
position: relative;
overflow: hidden;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
#file{width:100%; height:150px;}
$('#file').on('change', function(){
$("body").loading({
message: 'Görseller yükleniyor...'
});
var countFiles = $(this)[0].files.length;
var imgPath = $(this)[0].value;
var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg" || extn == "svg") {
for (var i = 0; i < countFiles; i++) {
$type = this.files[i].type;
var reader = new FileReader();
reader.onload = function (e) {
$sayi = $('.PictureItem').length+1;
DivID = Password.generate(16);
$html = '<div id="Resim' + DivID + '" class="PictureItem col-sm-4">';
$html += '<div class="item">';
$html += '<div class="sayi badge badge-dark">' + $sayi + '</div>';
$html += '<a class="btn btn-danger btn-sm text-white UrunResimSil" id="Delete' + DivID + '" data-id="' + DivID + '">X</a>';
$html += '<div class="ImageBG" data-id="' + DivID + '" data-sort="' + $sayi + '" data-type="' + $type + '" data-val="' + e.target.result + '" style="background-image: url(' + e.target.result + ');"></div>';
$html += '</div>';
$html += '</div>';
$('#UrunResimDIV').append($html);
$('.UrunResimSil').click(function(){
DivID = $(this).attr("data-id");
$('#Resim' + DivID).remove();
});
$(".column").sortable({
tolerance: 'pointer',
placeholder: 'col-sm-4 ui-state-highlight',
forceHelperSize: true,
stop : function( event, ui ){
$('.PictureItem').each(function( i ) {
$('.PictureItem').eq(i).find('.sayi').html(i+1);
$('.PictureItem').eq(i).find('.ImageBG').attr('data-sort',i+1);
})
}
});
$( "#UrunResimDIV" ).disableSelection();
$('.ImageRemove').click(function () {
$id = $(this).attr("data-id");
$('#' + $id).remove();
})
}
reader.readAsDataURL(this.files[i]);
}
}else{
Alertify("Desteklenmeyen dosya türü","danger");
}
setTimeout(function () {
$("body").loading('stop');
},1500);
});
/* Oluşturduğumuz divler için random şifre üretme function'u */
var Password = {
_pattern : /[a-zA-Z0-9_]/,
_getRandomByte : function()
{
// http://caniuse.com/#feat=getrandomvalues
if(window.crypto && window.crypto.getRandomValues)
{
var result = new Uint8Array(1);
window.crypto.getRandomValues(result);
return result[0];
}
else if(window.msCrypto && window.msCrypto.getRandomValues)
{
var result = new Uint8Array(1);
window.msCrypto.getRandomValues(result);
return result[0];
}
else
{
return Math.floor(Math.random() * 256);
}
},
generate : function(length)
{
return Array.apply(null, {'length': length})
.map(function()
{
var result;
while(true)
{
result = String.fromCharCode(this._getRandomByte());
if(this._pattern.test(result))
{
return result;
}
}
}, this)
.join('');
}
};
#UrunResimDIV .PictureItem{
position: relative;
margin-bottom: 10px;
}
.PictureItem .ProgcessDiv{
position: absolute;
top: 0;
left: 15px;
z-index: 9999;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.75);
}
.PictureItem .ProgcessDiv .progress{
margin-top: 75px;
margin-left: 15px;
margin-right: 15px;
}
#UrunResimDIV .PictureItem .item{
text-align: center;
padding: 5px;
border: 1px solid #D5D5D5 !important;
height: 160px;
background-color: #ffffff;
}
.ui-state-highlight {
height: 160px;
line-height:160px;
border: 1px dashed #fcd80d;
background-color: #fcfacb
}
#UrunResimDIV .PictureItem .UrunResimSil{
position: absolute;
right: 25px;
top: 10px;
-webkit-box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.5);
box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.5);
z-index: 99;
}
.ImageBG{
width: 100%;
height: 150px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center ;
position: relative;
}
.sayi{
font-size: 14px;
position: absolute;
top:10px;
left:25px;
font-weight: normal !important;
text-align: center;
min-width: 25px;
z-index: 99;
}
function ResimUpload($sort){
if( $sort == $('#UrunResimDIV .PictureItem').length ){
console.log( 'Yükleme İşlemi Tamamlandı' );
}else{
$ImageID = $('#UrunResimDIV .PictureItem').eq($sort).find('.ImageBG').attr("data-id");
$base64 = $('#UrunResimDIV .PictureItem').eq($sort).find('.ImageBG').attr("data-val");
fileType = $('#UrunResimDIV .PictureItem').eq($sort).find('.ImageBG').attr("data-type");
var maxWidth = 1152;
var maxHeight = 766;
var image = new Image();
image.src = $base64;
if( fileType == "image/gif"){
type = ".gif";
}else if( fileType == "image/png"){
type = ".png";
}else if( fileType == "image/jpeg"){
type = ".jpg";
}else if( fileType == "image/webp"){
type = ".webp";
}else if( fileType == "image/svg+xml"){
type = ".svg";
}else{
return false;
}
/* ProcessBar Creat */
$width = parseFloat( $('#Resim' + $ImageID).width() );
$html = '<div class="ProgcessDiv" style="width:' + $width +'px">' +
'<div class="progress">' +
'<div class="progress-bar progress-bar-striped progress-bar-animated" id="ProcessBar' + $ImageID + '" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>' +
'</div>' +
'</div>';
$('#Resim' + $ImageID + ' .item' ).append($html);
image.onload = function () {
var width = image.width;
var height = image.height;
var shouldResize = (width > maxWidth) || (height > maxHeight);
if (!shouldResize) {
$.ajax({
xhr: function () {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
$('#ProcessBar' + $ImageID).css({
width: percentComplete * 100 + '%'
});
if (percentComplete === 1) {
$('#ProcessBar' + $ImageID).addClass('hide');
}
}
}, false);
xhr.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
$('#ProcessBar' + $ImageID).css({
width: percentComplete * 100 + '%'
});
}
}, false);
return xhr;
},
type: 'POST',
url: "Urun/Upload",
data: 'pr_Urun=' + $('#pr_Urun').val() +
'&adi=' + $('#adi').val() +
'&base64=' + $base64.replace('data:','') +
'&type=' + type +
'&sort=' + $sort,
success: function (r) {
if( r == "success"){
ResimUpload($sort+1);
}
}
});
return;
}
var newWidth;
var newHeight;
if (width > height) {
newHeight = height * (maxWidth / width);
newWidth = maxWidth;
} else {
newWidth = width * (maxHeight / height);
newHeight = maxHeight;
}
var canvas = document.createElement('canvas');
canvas.width = newWidth;
canvas.height = newHeight;
var context = canvas.getContext('2d');
context.drawImage(this, 0, 0, newWidth, newHeight);
dataURL = canvas.toDataURL(fileType);
$.ajax({
xhr: function () {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
$('#ProcessBar' + $ImageID).css({
width: percentComplete * 100 + '%'
});
if (percentComplete === 1) {
$('#ProcessBar' + $ImageID).addClass('hide');
}
}
}, false);
xhr.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
$('#ProcessBar' + $ImageID).css({
width: percentComplete * 100 + '%'
});
}
}, false);
return xhr;
},
type: 'POST',
url: 'Urun/Upload',
data: 'pr_Urun=' + $('#pr_Urun').val() +
'&adi=' + $('#adi').val() +
'&base64=' + dataURL.replace('data:','') +
'&type=' + type +
'&sort=' + $sort,
success: function (r) {
if( r == "success"){
ResimUpload($sort+1);
}
}
});
};
image.onerror = function () {
alert('There was an error processing your file!');
};
}
}
<?php
$folder = $_SERVER["DOCUMENT_ROOT"] . "/resimler/";
$sort = $_POST["sort"];
$img = $_POST["base64"];
$img = str_replace("image/jpeg;base64,", "", $img);
$img = str_replace("image/gif;base64,", "", $img);
$img = str_replace("image/png;base64,", "" $img);
$img = str_replace("image/webp;base64,", "" $img);
$img = str_replace("image/svg+xml;base64,", "", $img);
$img = str_replace(" ", "+", $img);
$data = base64_decode($img);
$name = uniqid();
if( $sort == 0 ){
$filename = $name . $_POST["type"];
}else{
$filename = $name . "_" . $sort . $_POST["type"];
}
file_put_contents($folder . $filename , $data);
echo('success');
?>