[英]jQuery file upload plugin working but files not uploading
我正在使用Blueimp jQuery文件上传插件来上传图像文件。
我正在使用启用自动上传功能的演示中的默认“ Basic Plus”。 我将文件拖放到放置区域后,就可以看到对server/php/
进行文件上传的调用。 但文件似乎未上传。
这是我的代码:
<form>
<div class="asset_upload has_file js-asset-upload project required">
<div class="error">
<div class="message"></div>
</div>
<div class="success">
<div class="image-clip">
</div>
</div>
<div class="upload">
<input class="photo file" data-help_section="project-image-help" id="fileupload" name="project[photo]" type="file">
<strong class="center">
Choose an image from your computer <span class="has_file_hide">This is the main image.</span><span>JPEG, PNG, GIF</span>
</strong>
<div class="progress finished">
<div class="inner">
<div class="bar" style="width: 100%;">
<div class="percentage">Processing...</div>
</div>
</div>
</div>
</div>
</div>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="js/vendor/jquery.ui.widget.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="//blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
<!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="js/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="js/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="js/jquery.fileupload-image.js"></script>
<!-- The File Upload validation plugin -->
<script src="js/jquery.fileupload-validate.js"></script>
<script>
/*jslint unparam: true, regexp: true */
/*global window, $ */
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = 'server/php/';
$('#fileupload').fileupload({
url: url,
dataType: 'json',
autoUpload: true,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
maxFileSize: 999000,
method: 'GET',
dropZone: $('#fileupload'),
// Enable image resizing, except for Android and Opera,
// which actually support image resizing, but fail to
// send Blob objects via XHR requests:
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator.userAgent),
}).on('dragover', function (e) {
var dropZone = $('.asset_upload .upload'),
timeout = window.dropZoneTimeout;
if (!timeout) {
dropZone.addClass('in');
} else {
clearTimeout(timeout);
}
var found = false,
node = e.target;
do {
if (node === dropZone[0]) {
found = true;
break;
}
node = node.parentNode;
} while (node != null);
if (found) {
dropZone.addClass('hover');
} else {
dropZone.removeClass('hover');
}
window.dropZoneTimeout = setTimeout(function () {
window.dropZoneTimeout = null;
dropZone.removeClass('in hover');
}, 100)
}).on('fileuploadadd', function (e, data) {
//Hides error
$('.error').hide().children().text('');
}).on('fileuploadprocessalways', function (e, data) {
var index = data.index,
file = data.files[index];
if (file.preview) {
// node
// .prepend('<br>')
// .prepend(file.preview);
}
if (file.error) {
$('.error')
.fadeIn()
.children()
.text(file.error);
}
if (index + 1 === data.files.length) {
// data.context.find('button')
// .text('Upload')
// .prop('disabled', !!data.files.error);
}
}).on('fileuploadprogressall', function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('.progress').fadeIn();
}).on('fileuploaddone', function (e, data) {
alert(data.result.files);
$.each(data.result.files, function (index, file) {
if (file.url) {
var link = $('<a>')
.attr('target', '_blank')
.prop('href', file.url);
$(data.context.children()[index])
.wrap(link);
} else if (file.error) {
var error = $('<span class="text-danger"/>').text(file.error);
$(data.context.children()[index])
.append('<br>')
.append(error);
}
$('.progress').fadeOut();
});
}).on('fileuploadfail', function (e, data) {
$.each(data.files, function (index) {
var error = 'File upload failed.';
$($('.error').children()[index])
.append('<br>')
.append(error);
$('.progress').fadeOut();
});
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>
根据server/php
响应,我可以看到{"files":[]}
因此很明显文件没有上传。
我可以将请求视为https://localhost/dropzone/server/php/index.php?[object%20FormData]&_=1478101410337
并获得{"files":[]}
作为响应。
我是这个插件的新手,将不胜感激。
仅使用javascript库上传文件是行不通的。
您需要有代码(在本例中为php文件)来处理文件到达服务器时的上传。 除非您有,否则仅使用javascript插件将无法工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.