Предварительный просмотр перетаскивания не беспокоит

58
7

Предварительный просмотр фотографий не работает, пожалуйста, помогите мне

//single photo upload with box click
//keyValPImage stores the box image in array
$(".dzq-img-box ")
.on(
'click',
this,
function() {
$('<input type="file" name="files[]" />')
.click()
.on(
"change",
function(event) {
event
.stopImmediatePropagation();
var files = !!this.files ? this.files
: [];
if (!files.length
|| !window.FileReader) {
return false; // no file selected, or no FileReader support
}
if (/^image/
.test(files[0].type)) { // only image file
var reader = new FileReader(); // instance of the FileReader
reader
.readAsDataURL(files[0]); // read the local file
reader.onloadend = function() { // set image data as background of div
$('.dzq-img-box')
.each(
function(
index,
element) {

if ($(
this)
.css(
'background-image') == 'none') {
var parentOfboxIsWapp = $(
this)
.parent();
var imgBox = $(this);
$(
imgBox)
.css(
"background-image",
"url("
+ reader.result
+ ")");
imgBox
.children(
'.addIcon')
.hide();
$(
"<div></div>")
.addClass(
"glyphicon glyphicon-remove-circle")
.attr(
'id',
'remove')
.prependTo(
parentOfboxIsWapp);
parentOfboxIsWapp = null

return false;
}
});
}
}
});
});

//when remove sign is clicked , it removes the current background-image and copy
//and paste the next box image if the next box has image
//removes the keyValPImage stored image
$('.dzq-img-wapp')
.on(
'click',
'#remove',
function(e) {

e.stopPropagation();
$(this).siblings().css("background-image", "");
$(this).hide();
var remove = $(this);

//copy next box image in it
$('.dzq-img-box')
.each(
function(index, element) {
if ($(this).css(
'background-image') == 'none') {
var indexElement = $(
'.dzq-img-box').eq(
index + 1).css(
"background-image");
$('.dzq-img-box').eq(
index + 1).css(
"background-image",
"");
var nextRemove = $(
'.dzq-img-box').eq(
index + 1)
nextRemove.siblings(
"#remove").eq(0)
.hide();
$('.dzq-img-box')
.eq(index)
.css(
"background-image",
indexElement);

//var base64_string=img.replace(/"/g,"").replace(/url\(|\)$/ig, "");
//decodeImg(base64_string);
}
});

//hides the next box X sign
$('.dzq-img-box')
.each(
function(index, element) {
if (($(this)
.siblings("#remove")
.eq(0).is(':hidden'))
&& ($(this)
.css(
'background-image') !== 'none')) {
var box = $(this).parent()
$("<div></div>")
.addClass(
"glyphicon glyphicon-remove-circle")
.attr('id',
'remove')
.prependTo(box);
}
if (($(this).css(
'background-image') == 'none')
&& ($(this).children()
.css('display') == 'none')) {
$(this)
.children(
'.addIcon')
.show();
}
});
});

function dragAndDrop(file){
$('.dzq-img-box').each(function(index,element){
if($(this).css('background-image') == 'none'){
var box=$(this);
if (/^image/.test(file.type)) { // only image file
var reader = new FileReader(); // instance of the FileReader
reader.readAsDataURL(file); // read the local file
reader.onload= function() {
$(box).css("background-image","url(" +reader.result + ")");
box.children('.addIcon').hide();
$("<div></div>").addClass("glyphicon glyphicon-remove-circle").attr('id','remove').prependTo(box.parent());
}
}
return false;
}
});
}

//Drag and drop input click
$('.iu-grey-btn').on(
'click',
this,
function() {
$('<input type="file" name="files[]" multiple/>').click().on('change', function(event) {
event.stopImmediatePropagation();
var files = this.files ? this.files : [];
for (var i = 0; i < files.length; i++) {
dragAndDrop(files[i]);
}
});
});

.moveContainer {
padding: 10px 0px 70px 120px;
}

.dzq-button-panel {
position: relative;
background-color: #e0e0d1;
border-style: dotted;
border-color: #C0C0C0;
border-width: 2px;
margin: 30px;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 120px;
margin-bottom: 30px;
border-width: 2px;
}

.dzq-img-wapp {
position: relative;
background-color: #b3b3b3;
float: left;
width: 140px;
height: 90px;
padding: 3px;
margin-right: 10px;
}

.dzq-img-wapp:hover {
position: relative;
background-color: #C0C0C0;
float: left;
width: 140px;
height: 90px;
padding: 3px;
margin-right: 10px;
}

.dzq-img-box {
position: relative;
float: left;
width: 134px;
height: 84px;
padding-top: 33px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 55px;
margin-right: 0px;
background-position: center center;
background-size: cover;
}

.addIcon {
background: #f2f2f2;
padding: 10px;
border-radius: 50%;
}

.glyphicon.glyphicon-cloud-upload {
font-size: 50px;
position: relative;
float: left;
left: 10px;
}

.upload-text {
position: relative;
left: 25px;
}

.iu-grey-btn {
padding-bottom: 20px;
}

.inputfile {
margin: 0;
font-size: 50px;
}

.glyphicon-remove-circle {
position: relative;
margin-top: -20px;
margin-right: -10px;
float: right;
font-size: 20px;
}

.glyphicon-remove-circle:hover {
color: #A00000;
}

.select-editable select {
position: absolute;
width: 260px;
height: 34px;
border: 0;
}

.select-editable input {
position: relative;
width: 240px;
}

.imageError {
position: relative;
float: left;
}

<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>

</style>
</head>
<body style='margin: 30px'>
<div class="container">
<div class="moveContainer">
<div class='dzq-button-panel ' style=''>
<div class='iu-grey-btn'>
<a><span class="glyphicon glyphicon-cloud-upload "></span></a>
<div class="upload-text">
<h5>Select Files to Upload / Drag and Drop Files</h5>
<p>First image will be product display image</p>
</div>
</div>
<div class='dzq-img-wapp'>
<div class='dzq-img-box'>
<span id='firstImgBox' class='addIcon'>+</span>
</div>
</div>
<div class='dzq-img-wapp'>
<div class='dzq-img-box'>
<span class='addIcon'>+</span>
</div>
</div>
<div class='dzq-img-wapp'>
<div class='dzq-img-box'>
<span class='addIcon'>+</span>
</div>
</div>
<div class='dzq-img-wapp'>
<div class='dzq-img-box'>
<span class='addIcon'>+</span>
</div>
</div>
<div class='dzq-img-wapp'>
<div class='dzq-img-box'>
<span class='addIcon'>+</span>
</div>
</div>
</div>
</div>
</div>
</body>

http://jsbin.com/yofujotedo/edit?html,css,js,output

enter image description here

спросил(а) 2016-08-08T12:02:00+03:00 4 года, 2 месяца назад
1
Решение
99

Проблема

Что функция dragAndDrop использует асинхронную архитектуру.

Он использует объект FileReader и добавляет изображение предварительного просмотра в функцию onload. Это означает, что когда происходит второй вызов второго файла в списке, первый обратный вызов onload еще не выполнен.

Решение

Подождите со следующего вызова до завершения текущего вызова. В моем решении я сделал это рекурсивным, но это можно сделать многими другими способами.

//single photo upload with box click
//keyValPImage stores the box image in array
$(".dzq-img-box ")
.on(
'click',
this,
function() {
$('<input type="file" name="files[]" />')
.click()
.on(
"change",
function(event) {
event
.stopImmediatePropagation();
var files = !!this.files ? this.files
: [];
if (!files.length
|| !window.FileReader) {
return false; // no file selected, or no FileReader support
}
if (/^image/
.test(files[0].type)) { // only image file
var reader = new FileReader(); // instance of the FileReader
reader
.readAsDataURL(files[0]); // read the local file
reader.onloadend = function() { // set image data as background of div
$('.dzq-img-box')
.each(
function(
index,
element) {

if ($(
this)
.css(
'background-image') == 'none') {
var parentOfboxIsWapp = $(
this)
.parent();
var imgBox = $(this);
$(
imgBox)
.css(
"background-image",
"url("
+ reader.result
+ ")");
imgBox
.children(
'.addIcon')
.hide();
$(
"<div></div>")
.addClass(
"glyphicon glyphicon-remove-circle")
.attr(
'id',
'remove')
.prependTo(
parentOfboxIsWapp);
parentOfboxIsWapp = null

return false;
}
});
}
}
});
});

//when remove sign is clicked , it removes the current background-image and copy
//and paste the next box image if the next box has image
//removes the keyValPImage stored image
$('.dzq-img-wapp')
.on(
'click',
'#remove',
function(e) {

e.stopPropagation();
$(this).siblings().css("background-image", "");
$(this).hide();
var remove = $(this);

//copy next box image in it
$('.dzq-img-box')
.each(
function(index, element) {
if ($(this).css(
'background-image') == 'none') {
var indexElement = $(
'.dzq-img-box').eq(
index + 1).css(
"background-image");
$('.dzq-img-box').eq(
index + 1).css(
"background-image",
"");
var nextRemove = $(
'.dzq-img-box').eq(
index + 1)
nextRemove.siblings(
"#remove").eq(0)
.hide();
$('.dzq-img-box')
.eq(index)
.css(
"background-image",
indexElement);

//var base64_string=img.replace(/"/g,"").replace(/url\(|\)$/ig, "");
//decodeImg(base64_string);
}
});

//hides the next box X sign
$('.dzq-img-box')
.each(
function(index, element) {
if (($(this)
.siblings("#remove")
.eq(0).is(':hidden'))
&& ($(this)
.css(
'background-image') !== 'none')) {
var box = $(this).parent()
$("<div></div>")
.addClass(
"glyphicon glyphicon-remove-circle")
.attr('id',
'remove')
.prependTo(box);
}
if (($(this).css(
'background-image') == 'none')
&& ($(this).children()
.css('display') == 'none')) {
$(this)
.children(
'.addIcon')
.show();
}
});
});

function dragAndDrop(files, index){
var file = files[index];
if (!file) {
return;
}
$('.dzq-img-box').each(function(index,element){
if($(this).css('background-image') == 'none'){
var box=$(this);
if (/^image/.test(file.type)) { // only image file
var reader = new FileReader(); // instance of the FileReader
reader.readAsDataURL(file); // read the local file
reader.onload= function() {
$(box).css("background-image","url(" +reader.result + ")");
box.children('.addIcon').hide();
$("<div></div>").addClass("glyphicon glyphicon-remove-circle").attr('id','remove').prependTo(box.parent());
dragAndDrop(files, ++index);
}
}
return false;
}
});
}

//Drag and drop input click
$('.iu-grey-btn').on(
'click',
this,
function() {
$('<input type="file" name="files[]" multiple/>').click().on('change', function(event) {
event.stopImmediatePropagation();
var files = this.files ? this.files : [];
dragAndDrop(files, 0);
});
});

.moveContainer {
padding: 10px 0px 70px 120px;
}

.dzq-button-panel {
position: relative;
background-color: #e0e0d1;
border-style: dotted;
border-color: #C0C0C0;
border-width: 2px;
margin: 30px;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 120px;
margin-bottom: 30px;
border-width: 2px;
}

.dzq-img-wapp {
position: relative;
background-color: #b3b3b3;
float: left;
width: 140px;
height: 90px;
padding: 3px;
margin-right: 10px;
}

.dzq-img-wapp:hover {
position: relative;
background-color: #C0C0C0;
float: left;
width: 140px;
height: 90px;
padding: 3px;
margin-right: 10px;
}

.dzq-img-box {
position: relative;
float: left;
width: 134px;
height: 84px;
padding-top: 33px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 55px;
margin-right: 0px;
background-position: center center;
background-size: cover;
}

.addIcon {
background: #f2f2f2;
padding: 10px;
border-radius: 50%;
}

.glyphicon.glyphicon-cloud-upload {
font-size: 50px;
position: relative;
float: left;
left: 10px;
}

.upload-text {
position: relative;
left: 25px;
}

.iu-grey-btn {
padding-bottom: 20px;
}

.inputfile {
margin: 0;
font-size: 50px;
}

.glyphicon-remove-circle {
position: relative;
margin-top: -20px;
margin-right: -10px;
float: right;
font-size: 20px;
}

.glyphicon-remove-circle:hover {
color: #A00000;
}

.select-editable select {
position: absolute;
width: 260px;
height: 34px;
border: 0;
}

.select-editable input {
position: relative;
width: 240px;
}

.imageError {
position: relative;
float: left;
}

<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>

</style>
</head>
<body style='margin: 30px'>
<div class="container">
<div class="moveContainer">
<div class='dzq-button-panel ' style=''>
<div class='iu-grey-btn'>
<a><span class="glyphicon glyphicon-cloud-upload "></span></a>
<div class="upload-text">
<h5>Select Files to Upload / Drag and Drop Files</h5>
<p>First image will be product display image</p>
</div>
</div>
<div class='dzq-img-wapp'>
<div class='dzq-img-box'>
<span id='firstImgBox' class='addIcon'>+</span>
</div>
</div>
<div class='dzq-img-wapp'>
<div class='dzq-img-box'>
<span class='addIcon'>+</span>
</div>
</div>
<div class='dzq-img-wapp'>
<div class='dzq-img-box'>
<span class='addIcon'>+</span>
</div>
</div>
<div class='dzq-img-wapp'>
<div class='dzq-img-box'>
<span class='addIcon'>+</span>
</div>
</div>
<div class='dzq-img-wapp'>
<div class='dzq-img-box'>
<span class='addIcon'>+</span>
</div>
</div>
</div>
</div>
</div>
</body>

http://output.jsbin.com/jutego

ответил(а) 2016-08-09T10:44:00+03:00 4 года, 2 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема