Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/88.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Blueimp jquery文件上传插件在100%上传到rackspace云存储后抛出错误_Javascript_Jquery_File Upload_Blueimp_Rackspace - Fatal编程技术网

Javascript Blueimp jquery文件上传插件在100%上传到rackspace云存储后抛出错误

Javascript Blueimp jquery文件上传插件在100%上传到rackspace云存储后抛出错误,javascript,jquery,file-upload,blueimp,rackspace,Javascript,Jquery,File Upload,Blueimp,Rackspace,我一直试图从我的网站上传文件到rackspace存储。我按照下面的api指南创建表单,将文件上载到rackspace。 第7.2、7.2.1和7.2.2节 它完全可以很好地工作,如果我做一个正常的形式提交。该文件上载到rackspace storage,并返回状态201和空白消息。我检查了容器中的文件并成功上传了它 但是现在,当我尝试使用Blueimp jQuery文件上传插件集成progressbar时,问题来了 下面是我初始化fileupload插件的代码 $(function () { '

我一直试图从我的网站上传文件到rackspace存储。我按照下面的api指南创建表单,将文件上载到rackspace。 第7.2、7.2.1和7.2.2节

它完全可以很好地工作,如果我做一个正常的形式提交。该文件上载到rackspace storage,并返回状态201和空白消息。我检查了容器中的文件并成功上传了它

但是现在,当我尝试使用Blueimp jQuery文件上传插件集成progressbar时,问题来了

下面是我初始化fileupload插件的代码

$(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});
            }
        });
    });
}});
$(函数(){
"严格使用",;
//初始化jQuery文件上载小部件:
$('#fileupload').fileupload({maxChunkSize:10000000});
if(window.location.hostname=='blueimp.github.com'){
//演示设置:
$('#fileupload')。fileupload('选项'{
url:“//jquery file upload.appspot.com/”,
最大文件大小:5000000,
acceptFileTypes:/(\.\/)(gif | jpe?g | png)$/i,
过程:[
{
动作:“加载”,
文件类型:/^image\/(gif | jpeg | png)$/,
最大文件大小:20000000//20MB
},
{
操作:“调整大小”,
最大宽度:1440,
最大高度:900
},
{
行动:“保存”
}
]
});
//支持CORS的浏览器的上载服务器状态检查:
如果($.support.cors){
$.ajax({
url:“//jquery file upload.appspot.com/”,
类型:“头”
}).fail(函数(){
$('')
.text('上载服务器当前不可用-'+
新日期()
.appendTo(“#fileupload”);
});
}
}否则{
//加载现有文件:
控制台日志(“mukibul”);
$('#fileupload')。每个(函数(){
var=这个;
控制台日志(“结果1”);
$.getJSON(this.action,function(result){
if(result&&result.length){
控制台日志(“结果”);
控制台日志(结果);
$(that.fileupload('option','done'))
.call(即,null,{result:result});
}
});
});
}});
这是上传文件的网页表单

<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">&nbsp;</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 Inspect->Network选项卡中,我可以看到对rackspace服务器的两个请求。一个是返回200的方法选项,另一个是方法POST,它一直处于挂起状态,直到进度条达到100%,但一旦达到100%,POST方法的状态将更改为已取消,jquery文件上载插件将在网页中打印error true。我不明白为什么插件会抛出错误。我检查了容器,发现文件上传成功

我已经使用curl在rackspace中设置CORS所需的所有头文件。但我不确定我做错了什么。如能帮助解决此问题,我们将不胜感激

注意:我将SpringMVC用于应用程序

谢谢,
Mukibul

目前,云文件和底层Openstack Swift组件确实支持后期上传,因为您已经成功地使用了(文档和)。不幸的是,由于响应中缺少标头,似乎存在阻止CORS正常工作的错误

更改已合并到master中,但尚未部署到Rackspace的云文件运行版本。我与我们的CF团队就修复这一问题的时间表进行了询问,以便我们能够就此达成真正的解决方案


更新:该脚本无法在Chrome中为我上传,但可以在Firefox中运行。Chrome报告如您所述,POST被取消,但Firefox完成此操作并获得HTTP 303响应以及预期的重定向URI,并且文件存在于容器中。我正在查看插件的代码,以了解它如何处理其响应中的成功/失败。

刚刚从Rackspace中发现,此合并不在路线图中,当前也未进行测试。我不认为这会在不久的将来发生


希望有一天他们能实施它。现在,我只需在控制器中覆盖页面的标题,然后再将其提供给浏览器。

Mukibul-我正在编写一个示例,以尝试使其正常工作。我刚刚得到我的表格设置和上传正确。我正在努力添加BlueImp plugin.OP,我想我已经了解了问题所在。对于初学者,示例代码对实际输入调用.fileupload()方法。您可以在父窗体上调用它。接下来,您的$.getJSON()方法是最初命中端点的方法,导致未经授权的错误。我会在这方面做更多的工作,并很快为您发布答案。非常感谢Chris Rasco。期待你的回答。OP我现在能够复制你的问题,我看到你的确切行为。我仍在努力寻找解决方案。非常感谢克里斯的更新。如果您发现任何解决方法,请告诉我。我已经尝试过其他jquery文件上传程序,比如这个。但同样的,这个问题的答案也是一个空白。克里斯,找到其他解决方案了吗?我在AmazonS3上也面临同样的问题。试图修改f上的结果对象