Javascript Jquery文件上载始终失败,文件上载被中止
我试图让插件在我的网站上工作,但我的生活不能让它上传文件。我一整天都在做这个,我被卡住了。它将上载文件并将其提交到UploadHandler类,但当它尝试完成Javascript Jquery文件上载始终失败,文件上载被中止,javascript,php,jquery,ajax,file-upload,Javascript,Php,Jquery,Ajax,File Upload,我试图让插件在我的网站上工作,但我的生活不能让它上传文件。我一整天都在做这个,我被卡住了。它将上载文件并将其提交到UploadHandler类,但当它尝试完成handle\u file\u upload函数时,它会: file_put_contents( $file_path, fopen('php://input', 'r'), $append_file ? FILE_APPEND : 0 ); 但它总是返回0。我不明白为什么文件不能上传。我得到的答复是: {"fil
handle\u file\u upload
函数时,它会:
file_put_contents(
$file_path,
fopen('php://input', 'r'),
$append_file ? FILE_APPEND : 0
);
但它总是返回0。我不明白为什么文件不能上传。我得到的答复是:
{"files":[
{"name":"1397489968-32",
"size":0,
"type":"multipart\/form-data; boundary=----WebKitFormBoundaryrmi4L2ouOmB4UTVm",
"error":"File upload aborted",
"deleteUrl":"http:\/\/onceridden.demomycms.co.uk\/eshop\/library\/ajax\/?file=1397489968-32",
"deleteType":"DELETE"}
]}
ajax.file upload.php
只实例化UploadHandler,其他什么都没有
如果您想查看UploadHandler的完整代码,可以从github下载,它太大了,我无法在这里发布
有人能告诉我为什么文件不能上传吗?是的,我已经做了一些基础工作,比如检查文件夹是否为CHMOD 777。我用不同类型的文件(它们必须是图像才能工作,仅限于jpg、png或gif)和大小尝试过这个方法;所有这些都会产生相同的结果
根据要求,这是JS文件:
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = '/eshop/library/ajax/ajax.file-upload.php',
uploadButton = $('<button/>')
.addClass('btn btn-primary')
.prop('disabled', true)
.text('Processing...')
.on('click', function () {
var $this = $(this),
data = $this.data();
$this
.off('click')
.text('Abort')
.on('click', function () {
$this.remove();
data.abort();
});
data.submit().always(function () {
$this.remove();
});
});
$('#register-photo').fileupload({
url: url,
dataType: 'json',
autoUpload: false,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
maxFileSize: 5000000, // 5 MB
// 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),
previewMaxWidth: 100,
previewMaxHeight: 100,
previewCrop: true
}).on('fileuploadadd', function (e, data) {
data.context = $('<div/>').appendTo('#register-files');
$.each(data.files, function (index, file) {
var node = $('<p/>')
.append($('<span/>').text(file.name));
if (!index) {
node
.append('<br>')
.append(uploadButton.clone(true).data(data));
}
node.appendTo(data.context);
});
}).on('fileuploadprocessalways', function (e, data) {
var index = data.index,
file = data.files[index],
node = $(data.context.children()[index]);
if (file.preview) {
node
.prepend('<br>')
.prepend(file.preview);
}
if (file.error) {
node
.append('<br>')
.append($('<span class="text-danger"/>').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);
$('#register-progress .progress-bar').css(
'width',
progress + '%'
);
}).on('fileuploaddone', function (e, data) {
$.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);
}
});
}).on('fileuploadfail', function (e, data) {
$.each(data.files, function (index, file) {
var error = $('<span class="text-danger"/>').text('File upload failed.');
$(data.context.children()[index])
.append('<br>')
.append(error);
});
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
});
$(函数(){
"严格使用",;
//将此更改为服务器端上载处理程序的位置:
var url='/eshop/library/ajax/ajax.file upload.php',
uploadButton=$('')
.addClass('btn btn primary')
.prop('disabled',true)
.text('正在处理…')
.on('单击',函数(){
变量$this=$(this),
data=$this.data();
美元这个
.off('单击')
.text(“中止”)
.on('单击',函数(){
$this.remove();
data.abort();
});
data.submit()始终(函数(){
$this.remove();
});
});
$(“#注册照片”).fileupload({
url:url,
数据类型:“json”,
自动上载:false,
acceptFileTypes:/(\.\/)(gif | jpe?g | png)$/i,
最大文件大小:5000000,//5 MB
//启用图像大小调整,Android和Opera除外,
//它实际上支持图像大小调整,但无法
//通过XHR请求发送Blob对象:
disableImageResize:/Android(?。*Chrome)| Opera/
.test(window.navigator.userAgent),
预览最大宽度:100,
预览最大高度:100,
previewCrop:true
}).on('fileuploadadd',函数(e,数据){
data.context=$(“”).appendTo(“#注册文件”);
$.each(data.files,函数(索引,文件){
变量节点=$(“”)
.append($('').text(file.name));
如果(!索引){
节点
.append(“
”)
.append(uploadButton.clone(true).data(data));
}
appendTo(data.context);
});
}).on('fileuploadprocessalways',函数(e,数据){
var指数=data.index,
file=data.files[index],
node=$(data.context.children()[index]);
if(file.preview){
节点
.prepend(“
”)
.prepend(file.preview);
}
if(file.error){
节点
.append(“
”)
.append($('').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);
$('#注册进度.进度条').css(
“宽度”,
进度+“%”
);
}).on('fileuploaddone',函数(e,数据){
$.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(错误);
}
});
}).on('fileuploadfail',函数(e,数据){
$.each(data.files,函数(索引,文件){
var error=$('').text('文件上载失败');
$(data.context.children()[index])
.append(“
”)
.append(错误);
});
}).prop('disabled',!$.support.fileInput)
.parent().addClass($.support.fileInput?未定义:“已禁用”);
});
它几乎是插件的默认文件,只是ID被更改以匹配我的表单
更新 经过多次尝试和测试,我发现当您将输入的名称从
文件更改为任何其他文件时,就会出现问题。为什么我不知道。这显然是一个问题,如果你想让它运行在一个页面上的多个输入
我自己创建了一个非常简单的界面版本,允许我更改文件名,所以这一定与他们使用的示例有关。我希望能够使用预览图像和类似的东西(我在简单的测试中无法弄清楚),所以我需要解决这个问题。这是为了防止其他人也遇到这个问题。该问题是由paramName
选项引起的,如果未设置该选项,将从输入名称中获取其值。它不是默认设置的,所以在更改输入名称时,我也更改了paramName,这意味着它不再匹配UploadHandler类返回的变量
解决方案是添加paramName:'files[]'
作为一个选项。我遇到了相同的问题(操作中止),并且有不同的答案
我上载文件的文件夹/目录没有