Blueimp jquery文件上传插件在上传100%后抛出错误到机架空间云存储
Blueimp jquery file upload plugin throwing error after uploading 100% is done to rackspace cloud storage
我一直在尝试从我的网站将文件上传到机架空间存储。我按照以下 api 指南创建了将文件上传到机架空间的表单。http://docs.rackspace.com/files/api/v1/cf-devguide/content/FormPost-d1a555.html第 7.2、7.2.1 和 7.2.2 节
如果我进行正常的表单提交,它完全可以正常工作。该文件被上传到机架空间存储并返回状态 201 和一条空白消息。我检查了容器中的文件并成功上传。
但是现在当我尝试使用 Blueimp jQuery 文件上传插件集成进度条时,问题就来了。
这是我初始化文件上传插件的代码
$(function () {
'use strict';
// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload({maxChunkSize: 10000000});
if (window.location.hostname === 'blueimp.github.com') {
// Demo settings:
$('#fileupload').fileupload('option', {
url: '//jquery-file-upload.appspot.com/',
maxFileSize: 5000000,
acceptFileTypes: /('.|'/)(gif|jpe?g|png)$/i,
process: [
{
action: 'load',
fileTypes: /^image'/(gif|jpeg|png)$/,
maxFileSize: 20000000 // 20MB
},
{
action: 'resize',
maxWidth: 1440,
maxHeight: 900
},
{
action: 'save'
}
]
});
// Upload server status check for browsers with CORS support:
if ($.support.cors) {
$.ajax({
url: '//jquery-file-upload.appspot.com/',
type: 'HEAD'
}).fail(function () {
$('<span class="alert alert-error"/>')
.text('Upload server currently unavailable - ' +
new Date())
.appendTo('#fileupload');
});
}
} else {
// Load existing files:
console.log("mukibul");
$('#fileupload').each(function () {
var that = this;
console.log("result1");
$.getJSON(this.action, function (result) {
if (result && result.length) {
console.log("result");
console.log(result);
$(that).fileupload('option', 'done')
.call(that, null, {result: result});
}
});
});
}});
这是用于上传文件的 Web 表单
<form id="fileupload" action="https://storage101.dfw1.clouddrive.com/v1/MossoCloudFS_4d6c7b53-7b5a-458c-8a2d-957971f293bb/tranceyatralocal/${sessionScope.tyUser.userID}/${albumDetails.albumId}" method="POST" enctype="multipart/form-data">
<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<input type="hidden" name="redirect" value="http://localhost:8080/impianlabs/home/uploadResponse.htm" />
<input type="hidden" name="max_file_size" value="${max_file_size}" />
<input type="hidden" name="max_file_count" value="10" />
<input type="hidden" name="expires" value="${expires}" />
<input type="hidden" name="signature" value="${hmac}" />
<div class="row fileupload-buttonbar" style="margin:10px;">
<div class="span7" style="">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="icon-plus icon-white"></i>
<span>Add files...</span>
<input type="file" name="files[]" multiple>
</span>
<button type="submit" class="btn btn-primary start">
<i class="icon-upload icon-white"></i>
<span>Start upload</span>
</button>
<button type="reset" class="btn btn-warning cancel">
<i class="icon-ban-circle icon-white"></i>
<span>Cancel upload</span>
</button>
<button type="button" class="btn btn-danger delete">
<i class="icon-trash icon-white"></i>
<span>Delete</span>
</button>
<input type="checkbox" class="toggle">
</div>
<!-- The global progress information -->
<div class="span5 fileupload-progress fade">
<!-- The global progress bar -->
<div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<div class="bar" style="width:0%;"></div>
</div>
<!-- The extended global progress information -->
<div class="progress-extended"> </div>
</div>
</div>
<!-- The loading indicator is shown during file processing -->
<div class="fileupload-loading"></div>
<br>
<!-- <div>
<ul id="filePreview">
</ul>
</div> -->
<!-- The table listing the files available for upload/download -->
<table role="presentation" class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
</form>
当我上传任何文件时,它开始正常上传,进度开始按预期显示。在chrome Spect->Network选项卡中,我可以看到对机架空间服务器的两个请求。一个是返回 200 的方法 OPTIONS,另一个是方法 POST,它保持处于挂起状态,直到进度条达到 100%,但一旦达到 100%,POST 方法的状态就会更改为已取消,并且 jquery 文件上传插件在网页中打印错误 true。我无法理解为什么插件会抛出错误。我检查了容器,发现文件已成功上传。
我使用 curl 在机架空间中设置了 CORS 所需的所有标头。但不确定我做错了什么。任何帮助解决问题将不胜感激。
注意:我正在使用弹簧 mvc 作为应用程序。
谢谢穆基布尔
目前,Cloud Files 和底层的 Openstack Swift 组件确实支持 POST 上传,因为您已经成功使用了 (文档在这里和这里)。不幸的是,似乎有一个已知问题,由于响应中缺少标头,导致 CORS 无法正常工作。
该更改已合并到master中,但尚未部署到Rackspace的Cloud Files运行版本中。我与我们的 CF 团队就解决此问题的时间表进行了询问,以便我们可以为此找到真正的解决方案。
更新:该脚本无法在Chrome中为我上传,但在Firefox中工作。Chrome 报告 POST 已如您所描述的那样被取消,但 Firefox 会完成它并获得 HTTP 303 响应以及预期的重定向 URI,并且该文件存在于容器中。我正在查看插件的代码,看看它如何处理响应中的成功/失败。
刚刚从 Rackspace 中发现此合并不在路线图中,目前也没有进行测试。我认为这不会在不久的将来发生。
希望有一天他们会实施它。现在,我只是在将页面标题提供给浏览器之前覆盖控制器中的页面标题。
- Node.js v6.2.0类扩展不是函数错误
- Jquery菜单操作不稳定,定位不正确,存在一般错误
- document.open/document.write没有正确地清除chrome中的文档——这是chrome的错误吗
- socket.io:断开连接事件 - “传输关闭”、“客户端命名空间断开连接”、“传输错误”和“强制关闭”
- IE中的Javascript命名空间抛出错误
- ThreeJS错误的顶点空间排列
- jQuery AJAX 调用以发布消息 - 错误 堆栈空间不足
- Blueimp jquery文件上传插件在上传100%后抛出错误到机架空间云存储
- 命名空间模式导致 JSLint“函数在定义之前已使用”错误
- 错误变量空间未定义原因
- Gridster remove_widget抛出错误,remove()不会从网格中删除小部件空间
- MSXML4与MSXML6 XSLT解析命名空间错误
- 保存更改时出现Java堆空间错误
- gadicc/ Meteor -reactive-window Meteor Package的预期空间错误问题
- 流星css -s3错误与CollectionFS "FS.TempStore.未设置存储空间
- JavaScript命名空间未捕获类型错误
- JQuery Ajax调用返回“错误:没有足够的存储空间来完成此操作”
- 在IE11中使用aureliajs和babel-polyfill时出现堆栈空间错误
- 从 XSLT 调用函数错误: 命名空间不包含任何函数
- 想要防止用户输入任何空间在文本字段提供错误时,他这样做