如何配置jquery文件上传插件

Question

我正在尝试使用jquery file upload 插件和 ruby​​ on rails 来上传文件。以下是我的目标。

• 可以拖放多个文件

• 我一次只能发送一个文件。我有 10 个文件意味着插件应该用文件名 filedata 一个一个地发送。

• 选择文件后，可以在发送到服务器之前将其删除。

• 它应该显示文件上传进度

但是使用示例代码，当我尝试拖放文件时，它只会向服务器发送一个文件，并且不会在 filePreview 中显示文件名。如果启用了自动上传，它将发送所有选定的文件。但它仍然没有在文件预览中显示文件名。要删除选定的文件，我收到了来自 here 的建议。但是在单击开始上传按钮后，我收到了 javascript 错误。它说“ncaught TypeError：无法读取未定义的属性'大小'”。请帮助解决这个问题。提前致谢。

示例代码在这里。

<%= javascript_include_tag 'application/jquery.ui.widget' %>
<%= javascript_include_tag 'application/jquery.iframe-transport' %>
<%= javascript_include_tag 'application/jquery.fileupload' %>
<script type="text/javascript">
    $('#filedata').fileupload({
        options: {
            singleFileUploads: false,
            sequentialUploads: true,
            autoUpload: false,
            dropZone: $('#file-form')
        },
        change: function (ev, data) {
            $.each(data.files, function (index, file) {
                alert('Selected file: ' + file.name);
                alert('Selected file size: ' + file.size);
                $("#filePreview").append(
                    $('<span>').text(file.name)
                    .append('<a class="removeButton" href="#"> <img src="/oldimages/note_deletebut.png"/> </a>')
                    .attr('id', 'fileSpan')
                    .append($('<br>'))
                );
            });
        },
        add: function (e, data) {
            $(".removeButton").click(function() {
               $(this).parent().remove();
               data.files.splice(0,1); //To test
            });
            $("#triggerUpload").off('click').on('click',function () {           
                data.submit();
            });
        },
        formData: {
        },
        url: "URL",
        done: function (e, data) {
            console.log("success")
            console.log(data.result)
        }
    });
</script>
<form id="file-form" enctype="multipart/form-data" method="post" name="fileinfo">
    <div class="upload-droparea fnt6c"> Drop files here<br>or <br>
        <span class="btn btn-default orngbtn lesbtn filesbg uplod-btn">
            <span>Select Files</span>
            <input type="file" id="filedata" name="filedata" multiple>
        </span>
    </div>
    <div id="filePreview"></div>
    <button id="triggerUpload" value="Start Upload" class="btn btn-default orngbtn lesbtn filesbg" type="button">Start Upload
    </button>
    <button data-dismiss="modal" id="cancelUpload" value="Cancel" class="btn btn-default orngbtn lesbtn filesbg" type="button">Cancel</button>
</form>

Answer 1

我遇到了同样的错误（在 fileupload-ui.js 的第 116 行）。我的模板出现错误，导致索引比添加的图片多，导致数据元素未定义

Answer 2

我的模板如下所示：

{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <td rowspan="2" class="preview" style="width: 80px;">
			<span class="fade"></span>
		</td>
        <td class="name">
			<span>{%=file.name%}</span>
			<div class="start" style="display: none;">
			{% if (!o.options.autoUpload) { %}
                <button class="btn btn-primary">
                    <i class="icon-upload icon-white"></i>
                    <span>{%=locale.fileupload.start%}</span>
                </button>
            {% } %}
			</div>
		</td>
        <td class="size" width="100px" rowspan="2" valign="top"><span>{%=o.formatFileSize(file.size)%}</span></td>
        <td class="cancel" width="25px" rowspan="2" valign="top">
			{% if (!i) { %}
            <button class="btn btn-warning" style="border: none; background: none; cursor: pointer;">
                <i class="icon-ban-circle icon-white"></i>
                <span><img src="<?php echo targets; ?>admin/images/icon_del.png" /></span>
            </button>
			{% } %}
		</td>
    </tr>
	<tr class="template-upload fade" style="height: 35px;">
		<td valign="middle" align="center">
		{% if (file.error) { %}
			<span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}
        {% } else if (o.files.valid && !i) { %}
			<div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
				<div class="bar" style="width:0%;">
				</div>
			</div>
        {% } else { %}
        {% } %}
		</td>
	</tr>
{% } %}

如您所见，我每个项目（=图片）有 2 行，这导致了错误...