var $ file = $（ '）。（＃'）'。on（'change'，preview）; $（'。uploader button'）。click（function（）{$ file.click（）}）function preview（evt）{var preview = document.querySelector （'.preview'）Array.from（this.files）.forEach（function（file）{file.image（）.th en（function（img）{preview.appendChild（img）}，function（）{// err not an image ...}）}）}
input {display：none;}
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js> < / script>< script src =https://cdn.rawgit.com/jimmywarting/Screw-FileReader/master/index.js>< / script>< div class =uploader> < button type =button>打开上传程式< / button> < input id =filepickertype =filemultiple accept =image / *> < div class =preview>< / div>< / div>
第三件事我与Soltani Neji的回答是，当你在第一个上传按钮之前点击dublicate按钮时，它会产生意想不到的事情。它不能很好地跟踪索引。
现在接受我的建议：改用多个属性只需一个按钮就可以简化。它还有助于添加 accept =image / *以仅过滤图像
I have a function that uploads and image and adds a preview to this image, and i have two buttons, when i click on the first one it clicks on the input type file and opens it, and the second one duplicates the div, how can i duplicate this div and change it's id's or classes? and after duplicating it how can i make the buttons work for the new duplicated div not the original one only? here is my code:
$(function() {
$("input:file").change(function() {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
});
});
function imageIsLoaded(e) {
$('#ImgUpload').attr('src', e.target.result);
};
$('.uploadimg').click(function(){
$('input:file').click();
});
input{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="uploader">
<button type="button" class="uploadimg">Open uploader</button>
<input type="file">
<img id="ImgUpload" alt="Your Image"/>
<br>
<br>
</div>
<button type="button">Duplicate button</button>
解决方案
One common problem I see with this file previews are that most of them are unable to correctly render jpg's rotated with exif orientation
The second thing is that it's better to use URL.createObjectURL rather then using a base64 dataURL. That also raises an other issue and that is that most developers forget to revoked objectURL's
That is why i have created Screw-FileReader so you can easily call blob.image() and get a image back with a object url that is automatically revoked and also has a exif auto-rotation built in using canvas.
var $file = $('#filepicker').on('change', preview);
$('.uploader button').click(function() {
$file.click()
})
function preview(evt) {
var preview = document.querySelector('.preview')
Array.from(this.files).forEach(function(file) {
file.image().then(function(img) {
preview.appendChild(img)
}, function() {
// err not an image...
})
})
}
input {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/jimmywarting/Screw-FileReader/master/index.js"></script>
<div class="uploader">
<button type="button">Open uploader</button>
<input id="filepicker" type="file" multiple accept="image/*">
<div class="preview"></div>
</div>
the third thing i notis with Soltani Neji answer was that when you click dublicate button before the first upload button it dose unexpected things. it don't keep track of the index so well.
Now to my suggestions: Use the multiple attribute instead and just have one button to make it simpler. it also helps to add the accept="image/*" to filter out only images
这篇关于图像预览会打开重复的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
