拖放图片预览并不容易 [英] Drag and Drop photo preview is not worikng
本文介绍了拖放图片预览并不容易的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
// single （'。dzq-img-box）.on（'click'，this，function（）{$（'< input type =filename） =files []/>'）.click（）.on（change，function（event）{event .stopImmediatePropagation（）; var files = !! this.files？this.files：[]; if （！files.length ||！window.FileReader）{return false; //没有选择文件，或者没有FileReader支持} if（/ ^ image / .test（files [0] .type））{//只有图像文件var reader = new FileReader（）; // FileReader reader的实例.readAsDataURL（files [0]）; //读取本地文件reader.onloadend = function （）{//设置图像数据作为背景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返回false; }}）; }}}）; }）; //当单击删除符号时，它将删除当前的背景图像并复制//并粘贴下一个盒子图像，如果下一个盒子有图像//删除keyValPImage存储的图像$（'。dzq-img-wapp '）.on（'click'，'#remove'，function（e）{e.stopPropagation（）; $（this）.siblings（）。css（background-image，）; $（this） $（'。dzq-img-box'）.each（函数（索引，元素）{if（$（this）.css）.hide（）; var remove = $（this）; // copy next box image in it $ （'background-image'）=='none'）{var indexElement = $（'.dzq-img-box'）。eq（index + 1）.css（background-image）; $（'。dzq （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）;}}）; //隐藏下一个盒子X标志$（'。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 '）&&（$（this）.children（）.css（'display'）=='none'））{$（this）.children（'.addIcon'） 。（）;}}）;}）; function dragAndDrop（file）{$（'。dzq-img-box'）。each（function（inde x，元素）{if（$（this）.css（'background-image'）=='none'）{var box = $（this）; if（/^image/.test(file.type））{//只有图像文件var reader = new FileReader（）; // FileReader的实例reader.readAsDataURL（file）; //读取本地文件reader.onload = function（）{$（box）.css（background-image，url（+ reader.result +））; box.children（。addIcon）隐藏（）; $（< div>< / div>）。addClass（glyphicon glyphicon-remove-circle）。attr（'id'，'remove'）。prependTo（box.parent（））; }} return false; （''iu-gray-btn'）。on（'click'，this，function（）{$（'< input type =filename =}}）;} //拖放输入点击$ （'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;边框式：虚线;边框颜色：＃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;向左飘浮;宽度：140px;身高：90px;填充：3px; margin-right：10px;}。dzq-img-wapp：hover {position：relative; background-color：＃C0C0C0;向左飘浮;宽度：140px;身高：90px;填充：3px; margin-right：10px;}。dzq-img-box {position：relative;向左飘浮; width：134px;身高：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;填充：10px; border-radius：50％;}。glyphicon.glyphicon-cloud-upload {font-size：50px;位置：相对;向左飘浮; left：10px;}。upload-text {position：relative; left：25px;}。iu-gray-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;宽度：260px;身高：34px; border：0;}。select-editable input {position：relative; width：240px;}。imageError {position：relative; float：left;}
< head> < link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css> < link rel =stylesheethref =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>< / head>< body style ='margin：30px'> < div class =container> < div class =moveContainer> < div class ='dzq-button-panel'style =''> < div class ='iu-gray-btn'> < a>< span class =glyphicon glyphicon-cloud-upload>< / span>< / a> < div class =upload-text> < h5>选择要上传/拖放文件的文件< / h5> < p>第一张图片将成为产品展示图片< / 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>
b
$ b
解决方案
函数 dragAndDrop 使用异步体系结构。
它使用 FileReader 对象并将预览图像添加到 onload onload 尚未完成。
解决方案
等待下一次通话，直到当前通话结束。在我的解决方案中，我做了递归，但可以通过许多其他方式完成。
//用单击图片上传单张照片// keyValPImage将数组存储到数组$（。dzq-img-box）.on（'click'，this，function（）{$（'< input type =filename =files []/>'）.click（）.on（change，function（event）{event .stopImmediatePropagation（）; var files = !! this.files？this.files如果（/ ^ image / .test（files [0] .type））{if（！files.length ||！window.FileReader）{return false; // no file selected，or no FileReader support if //只有图像文件var reader = new FileReader（）; // FileReader reader实例.readAsDataURL（files [0]）; //读取本地文件re ader.onloadend = function（）{//将图像数据设置为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返回false; }}）; }}}）; }）; //当单击删除符号时，它将删除当前的背景图像并复制//并粘贴下一个盒子图像，如果下一个盒子有图像//删除keyValPImage存储的图像$（'。dzq-img-wapp '）.on（'click'，'#remove'，function（e）{e.stopPropagation（）; $（this）.siblings（）。css（background-image，）; $（this） $（'。dzq-img-box'）.each（函数（索引，元素）{if（$（this）.css）.hide（）; var remove = $（this）; // copy next box image in it $ （'background-image'）=='none'）{var indexElement = $（'.dzq-img-box'）。eq（index + 1）.css（background-image）; $（'。dzq （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）;}}）; //隐藏下一个盒子X标志$（'。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 '）&&（$（this）.children（）.css（'display'）=='none'））{$（this）.children（'.addIcon'） （）;}}）;}）; function dragAndDrop（files，index）{var file = files [index]; if（！f ile）{return;} $（'。dzq-img-box'）。each（function（index，element）{if（$（this）.css（'background-image'）=='none'）{var盒= $（本）; if（/^image/.test(file.type））{//只有图像文件var reader = new FileReader（）; // FileReader的实例reader.readAsDataURL（file）; //读取本地文件reader.onload = function（）{$（box）.css（background-image，url（+ reader.result +））; box.children（。addIcon）隐藏（）; $（< div>< / div>）。addClass（glyphicon glyphicon-remove-circle）。attr（'id'，'remove'）。prependTo（box.parent（））; dragAndDrop（files，++ index）; }} return false; （''iu-gray-btn'）。on（'click'，this，function（）{$（'< input type =filename =}}）;} //拖放输入点击$ （'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;边框式：虚线;边框颜色：＃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;向左飘浮;宽度：140px;身高：90px;填充：3px; margin-right：10px;}。dzq-img-wapp：hover {position：relative; background-color：＃C0C0C0;向左飘浮;宽度：140px;身高：90px;填充：3px; margin-right：10px;}。dzq-img-box {position：relative;向左飘浮; width：134px;身高：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;填充：10px; border-radius：50％;}。glyphicon.glyphicon-cloud-upload {font-size：50px;位置：相对;向左飘浮; left：10px;}。upload-text {position：relative; left：25px;}。iu-gray-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;宽度：260px;身高：34px; border：0;}。select-editable input {position：relative; width：240px;}。imageError {position：relative; float：left;}
< head> < link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css> < link rel =stylesheethref =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>< / head>< body style ='margin：30px'> < div class =container> < div class =moveContainer> < div class ='dzq-button-panel'style =''> < div class ='iu-gray-btn'> < a>< span class =glyphicon glyphicon-cloud-upload>< / span>< / a> < div class =upload-text> < h5>选择要上传/拖放文件的文件< / h5> < p>第一张图片将成为产品展示图片< / 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>
b
$ b
http://output.jsbin.com/jutego
Photo preview is not working ,please help me
//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
解决方案
The problem
That the function dragAndDrop use an asynchronous architecture.
It uses FileReader object and add the preview image in onload function. Which means that the when the second call for the second file in the list occur, the first callback onload not yet done.
The solution
Wait with the next call until the current call finished. In my solution I did it recursive but it can be done in many other ways.
//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
这篇关于拖放图片预览并不容易的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
