标签: fine-uploader

我现在将这个精美上传器版本3.3.0加入,并在我的网站中集成所有lib我认为上传工作正常,但不行!我看到错误我的JavaScript控制台:

[FineUploader] Sending upload request for 0

[FineUploader] xhr - server response received for 0

[FineUploader] responseText = 

和错误firebug:

[FineUploader]尝试解析xhr响应文本时出错(SyntaxError:JSON.parse:意外的数据结束)

在行错误:jquery.fineuploader-3.3.0.min.js(第148行)

我用params:

$(document).ready(function () {
    $('#uploader').fineUploader({
    request: {
        endpoint: '/upload/'
      },
    classes: {
        success: 'alert alert-success',
        fail: 'alert alert-error'
         }, 
    text: {
        uploadButton: '<i class="icon-upload icon-white"></i> file target'
      },
       validation: {
      sizeLimit: 31457280 

      },             
    debug: true

    });
  });

如果我写的尺寸限制:10485760 - 它还可以!文件上传完成.如果写sizelimit:31457280文件没有上传到结尾,则进程中断为2或3%.帮我!哪个虫子？请帮帮我吧!

我想在一个典型的形式中使用FineUploader:

<form enctype="multipart/form-data" method="post"">
    <input name="fileupload" type="file" ">
    <input type="text" name="title" size="45" maxlength="100">
    <textarea name="description" cols="40" rows="8"></textarea>
    <input type="hidden" name="op" value="Add">
<input type="submit" value="Upload">

所以我真的想主要替换这<input name="fileupload" type="file" ">部分.

不幸的是我不熟悉JavaScript和jQuery jet,也不知道如何做到这一点.我找不到任何示例代码,其中FineUploader与要发送的其他数据一起使用.

我将不胜感激任何帮助!

谢谢Kashuda

我通过Fine Uploader使用手动上传.现在我想检查该文件是否已选中.

$(document).ready(function() {
    var fineuploader = new qq.FineUploader({
        element: $('#fine-uploader')[0],
        request: {
            endpoint: '<?php echo site_url('pl_items/upload_images');?>'
        },
        multiple: true,
        autoUpload: false,
        onLeave: false,
        validation: {
            allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
            sizeLimit: 5120000 // 50 kB = 50 * 1024 bytes
        },
        text: { 
            uploadButton: '<i class="icon-plus icon-white"></i> Select Files' 
        },
        template: '<div class="qq-uploader">' +
                  '<pre class="qq-upload-drop-area"><span>{dragZoneText}</span></pre>' +
                  '<div class="qq-upload-button btn btn-danger">{uploadButtonText}</div>' +
                  '<div class="qq-drop-processing span1"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></div>' +
                  '<div><ul class="qq-upload-list"></ul></div>' +
                   '</div>',
        callbacks: {
            onComplete: function(id, name, response) {
                $('#frmDetails').append('<input …

因此,当我将文件上传到s3时,我想保留原始文件名,如果我使用它似乎可以工作

objectProperties:{key:"filename"},

我还想在S3中为对象添加前缀.所以,如果我上传foo.jpg,我希望S3对象键为'12345/foo.jpg'.我正在阅读文档,我没有提出明确的方向进入.

谢谢,j

短/通用版本:

我正在开发一个应用程序(不幸的是,出于其他原因),将document.domain每个页面的顶部设置为"true"域的子字符串:对于子域名,例如sub.app.local,document.domain = "app.local".我也在动态创建一个iframe并将其添加到页面中.iframe加载与父页面位于同一服务器上的文件.稍后,一些Javascript需要访问contentDocumentiframe 的属性.

这在现代浏览器中很好,但由于此错误导致IE9中出现问题.(请参阅最佳答案以获得对此原因的详细解释.)AFAIK,每个比IE9更新的浏览器都会自动继承document.domain以编程方式创建的iframe,因此这是IE9特有的.由于我的场景的一些独特要求(tldr:iframe src需要更改),上面帖子中的答案对我不起作用.

更长/特定于应用程序的版本:

我在IIS上运行的应用程序中使用FineUploader,将文件上传到S3.在现代浏览器中,一切都运行良好,但IE9支持给我带来麻烦,即使在遵循文档(支持IE9及更早版本)配置iframeSupport.localBlankPagePath选项之后也是如此.我有点难过!

• 我在FineUploader 4.0.3和5.0.3上都尝试过这个.
• 在IE11中一切正常.如果我在F12控制台中将文档模式切换为9,则会中断.
• 我没有打开CORS支持,因为我没有从其他域加载任何东西.
• 我在与我的页面相同的域中有一个虚拟/空白文件.
• 我可以看到(在"网络"面板中)来自AWS的包含Location密钥的HTTP 303响应,以及指向我的空白文档的值.如果我将整个网址粘贴到地址栏中,页面会正常加载,并且按预期显示为空白.
• 我已尝试添加X-Frame-Options SAMEORIGIN到服务器的响应标头,如此处所示,但它没有帮助.

我在控制台中遇到的错误是:

[Fine Uploader 5.0.3] Error when attempting to access iframe during handling of upload response (Access is denied.
)
[Fine Uploader 5.0.3] Amazon likely rejected the upload request

UPDATE

我已经确定它不是开箱即用的原因是因为应用程序设置document.domain了页面加载,并且它与(子集)不同location.host.FineUploader的303重定向机制到空白页面工作正常,但document.domainiframe的不同之处(由于IE9没有继承属性),因此拒绝访问.

实际的S3上传工作正常 …

从python web2py创建请求后.我从精细上传器收到以下错误

"我们计算的请求签名与您提供的签名不符.请检查您的密钥和签名方法."

这是我的服务器端代码

def _sign(key, msg):
    return hmac.new(key, msg.encode("utf-8"), hashlib.sha256).digest()

def getV4Signature(date_stamp, regionName, policy):
    kDate = _sign(('AWS4' + AWS_SECRET_KEY).encode('utf-8'), date_stamp)
    kRegion = _sign(kDate, regionName)
    kService = _sign(kRegion, 's3')
    kSigning = _sign(kService, 'aws4_request')
    kSignature = _sign(kSigning, policy)
    return binascii.hexlify(kSignature)

使用jQuery包装的Fineuploader v3.3版本.

是否可以使用上传文件夹中已有的文件填充文件列表？

我认为"_addToList(id,name)"应该可以解决问题,但我无法让它发挥作用.有任何想法吗？

我正在使用在新加坡EC2上托管的Django服务器.我还使用S3存储桶来保存通过Django Admin面板上传的文件.要上传文件,我正在使用django-s3direct.

当我在美国东部时间使用本地计算机上传文件时,它阻止我上传文件,引用:

<Message>Invalid according to Policy: Policy expired.</Message>

我已经尝试过以下解决方案:
Fine Uploader将"Policy expired"消息发送到S3以获取一些和此处:https://github.com/FineUploader/fine-uploader/issues/1387

当我检查上传的时间和UTC时间时,没有区别.我该如何解决这个错误？

编辑:需要注意的是,上传在localhost上完美运行,但在AWS EC2上托管的服务器上不起作用.

我正在使用FineUploader库上传大约 5GB 的文件。在 1MB 的块大小下一切正常，但我认为这个大小非常小，我想增加它。所以我尝试使用 10MB 并且它停止工作。尝试使用其他大小时，我发现从 4MB 或更多大小开始，上传停止工作。这里发生了什么？这是文件 API 还是浏览器的限制（我尝试过 Chrome 和 Firefox）？

我正在尝试使用FineUploader实现文件上传.一切都在工作,除了实际上传 - 当我选择一个文件时,它会立即添加到页面上,说"上传失败".查看Firefox检查器中的"网络"选项卡,甚至没有发生POST请求,我从FineUploader收到一条错误消息,指出响应无效JSON(如图).

这是我的客户端(部分)视图:

<div id="fine-uploader"></div>

@* This section is rendered into the page header *@
@section Scripts {
    <script src="/Scripts/fine-uploader/jquery.fine-uploader.js"></script>
    <link href="/Scripts/fine-uploader/fine-uploader-new.css" rel="stylesheet" />

    @* The following template is copied from the Validation example at https://fineuploader.com/demos.html in the jQuery tab *@
    <script type="text/template" id="qq-template">
        <div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here">
            <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
                <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
            </div>
            <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
                <span class="qq-upload-drop-area-text-selector"></span>
            </div>
            <div class="qq-upload-button-selector qq-upload-button">
                <div>Select files</div>
            </div>
            <span class="qq-drop-processing-selector qq-drop-processing">
                <span>Processing …