0
我有一個從this教程中拖放文件上傳器。用戶可以點擊按鈕選擇文件，也可以拖放。無論哪種方式，都會顯示圖像預覽，然後在提交表單時上傳圖像。Jquery/Ajax拖放文件上傳器不提交文件
選擇文件的老式方法工作正常 - 顯示在圖像預覽和他們上載表單提交，但如果我拖放的圖像，被顯示
預覽，但是當我提交表單他們沒有上傳。下面
代碼：
var isAdvancedUpload = function() {
var div = document.createElement('div');
return (('draggable' in div) || ('ondragstart' in div && 'ondrop' in div)) && 'FormData' in window && 'FileReader' in window;
}();
var $form = $('ui form');
var $fileBox = $('.box');
var $input = $fileBox.find('input[type="file"]'),
$label = $fileBox.find('label');
showFiles = function(files) {
$label.text(files.length > 1 ? ($input.attr('data-multiple-caption') || '').replace('{count}', files.length) : files[0].name);
};
if (isAdvancedUpload) {
var droppedFiles = false;
$fileBox.addClass('has-advanced-upload');
$fileBox.on('drag dragstart dragend dragover dragenter dragleave drop', function(e) {
e.preventDefault();
e.stopPropagation();
});
$fileBox.on('dragover dragenter', function() {
$fileBox.addClass('is-dragover');
});
$fileBox.on('dragleave dragend drop', function() {
$fileBox.removeClass('is-dragover');
});
$fileBox.on('drop', function(e) {
droppedFiles = e.originalEvent.dataTransfer.files;
var $imgDiv = $('.selected-images');
$.each(droppedFiles, function(index, file) {
var img = document.createElement('img');
img.onload = function() {
window.URL.revokeObjectURL($.src);
};
img.height = 100;
img.src = window.URL.createObjectURL(file);
$imgDiv.append(img);
showFiles(droppedFiles);
});
});
}
$form.on('submit', function(e) {
if ($fileBox.hasClass('is-uploading')) return false;
$fileBox.addClass('is-uploading').removeClass('is-error');
if (isAdvancedUpload) {
e.preventDefault();
var ajaxData = new FormData($form.get(0));
if (droppedFiles) {
$.each(droppedFiles, function(i, file) {
ajaxData.append($input.attr('name'), file);
});
}
$.ajax({
url: $form.attr('action'),
type: $form.attr('method'),
data: ajaxData,
dataType: 'json',
cache: false,
contentType: false,
processData: false,
complete: function() {
$fileBox.removeClass('is-uploading');
},
success: function(data) {
$fileBox.addClass(data.success == true ? 'is-success' : 'is-error');
if (!data.success) $errorMsg.text(data.error);
},
error: function() {
console.log(data.error);
}
});
} else {
var iframeName = 'uploadiframe' + new Date().getTime();
$iframe = $('<iframe name="' + iframeName + '" style="display: none;"></iframe>');
$('body').append($iframe);
$form.attr('target', iframeName);
$iframe.one('load', function() {
var data = JSON.parse($iframe.contents().find('body').text());
$form
.removeClass('is-uploading')
.addClass(data.success == true ? 'is-success' : 'is-error')
.removeAttr('target');
if (!data.success) $errorMsg.text(data.error);
$form.removeAttr('target');
$iframe.remove();
});
};
});
$input.on('change', function(e) {
showFiles(e.target.files);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="ui form" action="/signup" method="post" enctype="multipart/form-data">
<!-- text inputs -->
<div class="field">
<div class="box box__input">
<input class="box__file" type="file" name="photos" id="file" data-multiple-caption="{count} files selected" multiple />
<label for="file"><strong>Choose a file</strong><span class="box__dragndrop"> or drag it here</span>.</label>
<button class="box__button" type="submit">Upload</button>
</div>
<div class="box__uploading">Uploading…</div>
<div class="box__success">Done!</div>
<div class="box__error">Error! <span></span>.</div>
</div>
<!-- text inputs -->
</form>