Php jQuery文件上载插件正在工作,但文件未上载
我正在使用Blueimp jQuery文件上传插件上传图像文件 我使用的是演示中的默认“Basic Plus”,并启用了自动上载功能。一旦我把文件放到放置区,我就可以看到对Php jQuery文件上载插件正在工作,但文件未上载,php,jquery,file,upload,blueimp,Php,Jquery,File,Upload,Blueimp,我正在使用Blueimp jQuery文件上传插件上传图像文件 我使用的是演示中的默认“Basic Plus”,并启用了自动上载功能。一旦我把文件放到放置区,我就可以看到对server/php/的文件上传调用。但文件似乎并没有被上传 这是我的密码: <form> <div class="asset_upload has_file js-asset-upload project required"> <div class="error">
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>
从计算机中选择图像这是主图像。JPEG、PNG、GIF
处理。。。
/*jslint:true,regexp:true*/
/*全局窗口,$*/
$(函数(){
"严格使用",;
//将此更改为服务器端上载处理程序的位置:
var url='server/php/';
$('#fileupload')。fileupload({
url:url,
数据类型:“json”,
自动上传:对,
acceptFileTypes:/(\.\/)(gif | jpe?g | png)$/i,
最大文件大小:999000,
方法:“GET”,
dropZone:$(“#文件上载”),
//启用图像大小调整,Android和Opera除外,
//它实际上支持图像大小调整,但无法
//通过XHR请求发送Blob对象:
disableImageResize:/Android(?。*Chrome)| Opera/
.test(window.navigator.userAgent),
}).on('dragover',功能(e){
var dropZone=$('.asset_upload.upload'),
超时=window.dropZoneTimeout;
如果(!超时){
dropZone.addClass('in');
}否则{
clearTimeout(超时);
}
var found=false,
node=e.target;
做{
如果(节点===dropZone[0]){
发现=真;
打破
}
node=node.parentNode;
}while(node!=null);
如果(找到){
addClass('hover');
}否则{
dropZone.removeClass('hover');
}
window.dropZoneTimeout=setTimeout(函数(){
window.dropZoneTimeout=null;
dropZone.removeClass('处于悬停状态');
}, 100)
}).on('fileuploadadd',函数(e,数据){
//隐藏错误
$('.error').hide().children().text('');
}).on('fileuploadprocessalways',函数(e,数据){
var指数=data.index,
file=data.files[index];
if(file.preview){
//节点
//.prepend(“
”)
//.prepend(file.preview);
}
if(file.error){
$(“.error”)
.fadeIn()
.儿童()
.text(file.error);
}
if(索引+1==data.files.length){
//data.context.find('按钮')
//.text(“上载”)
//.prop('disabled',!!data.files.error);
}
}).on('fileuploadprogressall',函数(e,数据){
var progress=parseInt(data.loaded/data.total*100,10);
$('.progress').fadeIn();
}).on('fileuploaddone',函数(e,数据){
警报(data.result.files);
$.each(data.result.files,函数(索引,文件){
if(file.url){
变量链接=$('')
.attr('target','u blank')
.prop('href',file.url);
$(data.context.children()[index])
.wrap(link);
}else if(file.error){
var error=$('').text(file.error);
$(data.context.children()[index])
.append(“
”)
.append(错误);
}
$('.progress').fadeOut();
});
}).on('fileuploadfail',函数(e,数据){
$.each(数据文件、函数(索引){
var错误='文件上载失败';
$($('.error').children()[index])
.append(“
”)
.append(错误);
$('.progress').fadeOut();
});
}).prop('disabled',!$.support.fileInput)
.parent().addClass($.support.fileInput?未定义:“已禁用”);
});
根据server/php
的响应,我可以看到{“文件”:[]}
因此文件显然没有上传
我可以将请求视为https://localhost/dropzone/server/php/index.php?[对象%20FormData]&=1478101410337
并获取{“文件”:[]}
作为响应
我是这个插件的新手,如果有任何帮助,我将不胜感激。仅仅使用javascript库上传文件是行不通的
您需要有代码(在本例中是php文件)来处理文件到达服务器时的上传。除非你有这样的功能,否则仅仅使用javascript插件是行不通的。你如何从服务器获得响应?你的PHP代码在哪里?您是否尝试过转储
$\u文件
变量以查看从前端实际得到的信息?你有一个server/php
端点吗?没有,我使用的是演示本身的默认php文件,它位于server/php
路径。你有没有做过任何调试,或者你只是冲到这里,希望我们神奇地知道你的设置是什么样子?对我来说,我认为
中缺少enctype='multipart/form data'
,这可能是原因之一……还有一个post方法。当然,有一个php文件来处理请求。正如我在问题中提到的,我使用的是位于server/php