Fineuploader插件不起作用 - 我错过了什么?



我正在尝试使用Fineuploader S3从客户端直接上传到亚马逊。我引用了以下文件:

s3.jquery.fineuploader-4.4.0.min.js

我正在使用默认模板:

<div id="fineUploader"></div>
    <script type="text/template" id="qq-template">
        <div class="qq-uploader-selector qq-uploader">
            <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
                <span>Drop files here to upload</span>
            </div>
            <div class="qq-upload-button-selector qq-upload-button">
                <div>Browse...</div>
            </div>
            <span class="qq-drop-processing-selector qq-drop-processing">
                <span>Processing dropped files...</span>
                <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
            </span>
            <ul class="qq-upload-list-selector qq-upload-list">
                <li>
                    <div class="qq-progress-bar-container-selector">
                        <div class="qq-progress-bar-selector qq-progress-bar"></div>
                    </div>
                    <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                    <span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span>
                    <span class="qq-upload-file-selector qq-upload-file"></span>
                    <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
                    <span class="qq-upload-size-selector qq-upload-size"></span>
                    <a class="qq-upload-cancel-selector qq-upload-cancel" href="#">Cancel</a>
                    <a class="qq-upload-retry-selector qq-upload-retry" href="#">Retry</a>
                    <a class="qq-upload-delete-selector qq-upload-delete" href="#">Delete</a>
                    <span class="qq-upload-status-text-selector qq-upload-status-text"></span>
                </li>
            </ul>
        </div>
    </script>

并像这样初始化:

$('#fineUploader').fineUploaderS3({
            debug: true,
            autoUpload: true,
            request: {
                endpoint: "http://mybucket.s3.amazonaws.com",
                accessKey: "MY_AWS_PUBLIC_ACCESS_KEY"//,
                //params: { category: "foobar" }
            },
            signature: {
                endpoint: "/s3/signtureHandler"
            },
            uploadSuccess: {
                endpoint: "/s3/uploadSuccessful"
            }, // etc etc etc.

脚本似乎有效,因为我看到一个"浏览"按钮,该按钮可让您使用文件对话框选择文件。但是一旦我选择一个文件并单击"打开",就没有任何反应。我以为它会尝试开始上传,但它只是关闭了文件对话框。

我在这里错过了什么吗?我需要做什么才能上传文件?

谢谢!

编辑:这是浏览器控制台的输出:

[精细上传 4.4.0] 解析模板
[精细上传器 4.4.0]模板解析完成
[精细上传器 4.4.0]DOM
中的渲染模板[精细上传器 4.4.0]模板渲染完成
event.returnValue 已弃用。请改用标准 event.preventDefault()。(jquery-1.10.2.js:5388)

嗯,我似乎已经想通了。似乎不知何故,来自 FineUploader 的事件并没有通过我的 DOM 冒泡。这是因为我在 Knockout JS "with" 绑定中有一个上传按钮,我猜这是在幕后交换 DOM 元素。摆脱"with"绑定解决了这个问题。

非常感谢大家的帮助!非常感谢!

最新更新