我试图让Blueimp的Jquery File Upload插件在我的网站上正常工作,但是我一生都无法用它来上传文件。我整天都在努力,被困住了。它将上传文件并将其提交到UploadHandler类,但是在尝试完成handle_file_upload功能时,它将达到:
handle_file_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,仅此而已。
ajax.file-upload.php
如果您想查看有关UploadHandler的完整代码,可以从github下载,对于我来说太大了,无法在此处发布。
有人可以告诉我为什么文件无法上传吗?是的,我已经完成了一些基本工作,例如检查文件夹是否为CHMOD777。我已经尝试过使用各种不同类型的文件(它们必须是图像,但必须限制为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'); });
这几乎是您通过插件获得的默认文件,只是ID更改为与我的表单匹配。
经过大量的测试和测试,我发现当您将输入的名称从更改为其他名称时,就会出现问题files。为什么我不知道。如果您想让它在页面上的多个输入上运行,这显然是一个问题…
files
我自己创建了一个非常简单的接口版本,它 确实 允许我更改文件名,因此它必须与它们使用的示例有关。我希望能够使用预览图像等(在我的简单测试中无法弄清的东西),因此我需要解决此问题。
以防万一其他人也陷入这个问题。该问题是由该paramName选项引起的,如果未设置该选项,它将使用输入名称中的值。默认情况下未设置它,因此在更改输入名称时,我也在更改paramName,这意味着它不再与从UploadHandler类返回的变量匹配。
paramName
解决方案是添加paramName: 'files[]'为选项。
paramName: 'files[]'