我有这段代码可以在文件类型输入中拖放图像。
使用此代码,我可以预览标签中的图像。使用按钮可以完美地工作,但如果我拖放它就不起作用。
问题是当我拖放文件时,如果我得到预览但文件未附加在输入中,我无法将图像上传到服务器。
有什么想法可以解决这个问题吗?
我编辑我的问题并回答自己,以防你们中的一个人服务:
this.$fileInput.files = e.dataTransfer.files;
this.$fileInput.dispatchEvent(new Event('change'));
(function() {
function FileUploader(selector) {
if (undefined !== selector) {
this.init(selector);
}
}
FileUploader.prototype.init = function(selector) {
if (undefined !== this.$el) {
this.unsuscribe();
}
this.$el = document.querySelector(selector);
this.$fileInput = this.$el.querySelector('input');
this.$img = this.$el.querySelector('img');
this.suscribe();
};
// comienza Drag - drop
FileUploader.prototype.suscribe = function() {
this.$fileInput.addEventListener('change', _handleInputChange.bind(this));
this.$img.addEventListener('load', _handleImageLoaded.bind(this));
this.$el.addEventListener('dragenter', _handleDragEnter.bind(this));
this.$el.addEventListener('dragleave', _handleDragLeave.bind(this));
this.$el.addEventListener('drop', _handleDrop.bind(this));
};
FileUploader.prototype.unsuscribe = function() {
this.$fileInput.removeEventListener(
'change',
_handleInputChange.bind(this)
);
this.$img.removeEventListener('load', _handleImageLoaded.bind(this));
this.$el.removeEventListener('dragenter', _handleDragEnter.bind(this));
this.$el.removeEventListener('dragleave', _handleDragLeave.bind(this));
this.$el.removeEventListener('drop', _handleDrop.bind(this));
};
function _handleDragEnter(e) {
e.preventDefault();
if (!this.$el.classList.contains('dragging')) {
this.$el.classList.add('dragging');
}
}
function _handleDragLeave(e) {
e.preventDefault();
if (this.$el.classList.contains('dragging')) {
this.$el.classList.remove('dragging');
}
}
function _handleDrop(e) {
e.preventDefault();
this.$el.classList.remove('dragging');
this.$img.files = e.dataTransfer.files;
_handleInputChange.call(this);
}
function _handleImageLoaded() {
if (!this.$img.classList.contains('loaded')) {
this.$img.classList.add('loaded');
}
}
function _handleInputChange(e) {
var file = (undefined !== e)
? e.target.files[0]
: this.$img.files[0];
var pattern = /image-*/;
var reader = new FileReader();
if (!file.type.match(pattern)) {
alert('invalid format');
return;
}
if (this.$el.classList.contains('loaded')) {
this.$el.classList.remove('loaded');
}
reader.onload = _handleReaderLoaded.bind(this);
reader.readAsDataURL(file);
}
function _handleReaderLoaded(e) {
var reader = e.target;
this.$img.src = reader.result;
this.$el.classList.add('loaded');
}
window.FileUploader = FileUploader;
})();
fileuploader.css
/* File Uploader Styles */
.uploader input {
display: none;
}
.uploader {
align-items: center;
background-color: rgba(0, 0, 0, 0.02);
display: flex;
height: 300px;
justify-content: center;
outline: 3px dashed #ccc;
outline-offset: 5px;
position: relative;
width: 300px;
}
.uploader img,
.uploader .icon {
pointer-events: none;
}
.uploader,
.uploader .icon {
transition: all 100ms ease-in;
}
.uploader .icon {
color: rgba(0, 0, 0, 0.2);
font-size: 5em;
}
.uploader.dragging {
outline-color: orangered;
}
.uploader.dragging .icon {
color: orangered;
}
.uploader.loaded .icon {
color: rgba(255, 255, 255, 0.5);
}
.uploader img {
left: 50%;
opacity: 0;
max-height: 100%;
max-width: 100%;
position: absolute;
top: 50%;
transition: all 300ms ease-in;
transform: translate(-50%,-50%);
z-index: -1;
}
.uploader img.loaded {
opacity: 1;
}
<script src="https://www.institutoimago.net/js/FileUploader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="inputfile" class="uploader" ondragover="return false">
<span class="icon fa fa-picture-o"></span>
<img src="" class="">
<input type="file" id="inputfile" name="inputfile" accept="image/*">
</label>
</div>
<script type="text/javascript">
new FileUploader('.uploader');
</script>