动态使用bleuimp上传jquery文件

Dynamically use bleuimp jquery file upload

本文关键字：jquery 文件 上传 bleuimp 动态      更新时间：2023-09-26

我使用的是blueimp JQuery fileupload，但是我想动态地使用它。我有大约5个元素在我的网页上，他们每个人都应该调用javascript函数(自动上传)当一个文件被选中。下面是bleuimp基本版的JQuery文件上传。我没有使用名为#fileupload的div，而是使用id为#fileupload1至#fileupload5的5个div。

我想让javascript代码工作的所有5 #fileupload id使用一个单一的javascript块。所以基本上我希望使用下面的代码，但所有5个元素。有办法做到这一点吗?如果有的话，有人能给我举个例子吗?谢谢你的帮助。

$(function () {
    'use strict';
    // Change this to the location of your server-side upload handler:
    var url = window.location.hostname === 'blueimp.github.io' ?
                '//jquery-file-upload.appspot.com/' : 'server/php/';
    $('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo('#files');
                alert('DONE');
            });
        },
        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');
});

我找到了一个解决方案。也许不是最好的，但到目前为止，它适合我。

$('.dp-upload-container').each(function () {
// Code from $(function() { }); here using different ID's and classes dynamically.
});
相关文章：