Question

我正在尝试使用http://valums.com/ajax-upload/通过AJAX上传文件。原因是因为它满足了我的需求。但是，我需要自定义行为，我无法弄明白。根据文档，我应该可以使用FileUploaderBasic，但我甚至无法使用FileUploaderBasic显示上传按钮。目前，我正在尝试以下方法：

<div id="file-uploader">                
    <noscript>                      
        <p>Please enable JavaScript to use file uploader.</p>           
    </noscript>             
</div>
<div id="progressbar" style="width:300px;"></div>

<script type="text/javascript">
    $().ready(function () {
        var u = new uploader.FileUploaderBasic({
            element: document.getElementById('file-uploader'),
            action: '/files/upload',
            debug: true,
            onProgress: function (id, fileName, loaded, total) {
                $("#progressbar").progressbar("value", 50);
            },
            onComplete: function(id, fileName, responseJSON){
                $("#progressbar").progressbar("value", 100);            
            },
        });

        $("#progressbar").progressbar({
            value: 0
        });
    });
</script>

对于正在上传的每个文件，我想显示一个进度条。在进度条右侧，我想显示已完成上传的百分比。在进度条下方，我想显示文件名和文件的总大小。我知道HTML的内容类似于以下内容：

<table border='0' cellpadding='0' cellspacing='0'>
  <tr><td rowspan='2'>[img]</td>
    <td>[Progress Bar]</td>
    <td>[%]</td>
  </tr>

  <tr><td colspan='2'>[filename] - [filesize]</td></tr>
</table>

我只是不确定如何使用FileUploaderBasic完成此操作。我究竟做错了什么？我已经到了绝望的地步。请帮忙！

Answer 1

尝试更改

element: document.getElementById('file-uploader')

到

button: document.getElementById('file-uploader')

使用AJAX上传自定义AJAX文件上传器

1 个答案: