我正在使用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文件)来处理文件上传时,它到达服务器。