Jquery文件上传多个上传案例

Question

我正在使用blueimp上传的jQuery文件 https://github.com/blueimp/jQuery-File-Upload

<div class="logo">
        <img id="logoImg" src="" alt="">
        <input class="fileupload" type="file" name="files[]" multiple>
        <div id="progress" class="progress">
            <div class="progress-bar progress-bar-success"></div>
        </div>
        <input id="logoFile" name="logo" type="hidden" value="" />
    </div>

<script>
/*jslint unparam: true */
/*global window, $ */
$(function () {
    'use strict';
    // Change this to the location of your server-side upload handler:
    var url =  '/templates/nwmadm/plugins/upload-controller/upload.php';
    $('.fileupload').fileupload({
        url: url,
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('#logoFile').attr("value", file.url);
                $('#logoImg').attr("src", file.url);
            });
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css(
                'width',
                progress + '%'
            );
        }
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>

上传效果很好，但只能上传一次。但是如果我想制作它们中的多个，我需要代码更多的潜水员。

我真的很喜欢$.each函数来查找父级并在其中搜索元素来设置输入的值。

我试过这个，但它似乎不起作用，因为这是json字符串。

<div class="uploadForm">
        <img class="previewImg" src="" alt="">
        <input class="fileupload" type="file" name="files[]" multiple>
        <div id="progress" class="progress">
            <div class="progress-bar progress-bar-success"></div>
        </div>
        <input class="uploadedFile" name="logo" type="hidden" value="" />
    </div>

<script>
/*jslint unparam: true */
/*global window, $ */
$(function () {
    'use strict';
    // Change this to the location of your server-side upload handler:
    var url =  '/templates/nwmadm/plugins/upload-controller/upload.php';
    $('.fileupload').fileupload({
        url: url,
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $(this).parent().find(".previewImg").attr("src", file.url);
                $(this).parent().find(".uploadedFile").attr("value", file.url);
            });
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css(
                'width',
                progress + '%'
            );
        }
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>