Php 迷你AJAX文件在同一页面上上载多个上载块

我正在使用以下插件：

我的问题是在同一页面上有多个上载实例（例如1页眉图像2页脚图像）

但是只有第一个输入真正起作用，另一个不起作用，我没有得到错误的客户端或服务器端

如果我在谷歌上尝试寻找替代方案，我会得到数百万次“同时多次上传”，这不是我想要的

以下是页面代码：

        <form id='upload' method='post' action='URLtoServerside' enctype='multipart/form-data'>
            <div id='drop'>
                Drop Here

                <a>Browse</a>
                <input type='file' name='upl' multiple />
            </div>
            <input style='visibility:hidden' id='".$var2['id']."' value='page_session_weo' />

            <ul style='display:none'>
                <!-- The file uploads will be shown here -->
            </ul>
        </form>

        <form id='upload' method='post' action='URLtoServerside' enctype='multipart/form-data'>
            <div id='drop'>
                Drop Here

                <a>Browse</a>
                <input type='file' name='upl' multiple />
            </div>
            <input style='visibility:hidden' id='".$var2['id']."' value='page_session_weo' />

            <ul style='display:none'>
                <!-- The file uploads will be shown here -->
            </ul>
        </form>

有人可以告诉我如何让这个工作在同一个页面上的多个上传，或推荐一个替代方案

（我确实需要拖放和“浏览”功能）

js

var attachname=“attach”；
var i=1；
函数addInput（）{
如果（i>0）{
var attach=attachname+i；
如果（创建输入（附加））
i=i+1；
}
} 
函数createInput（nm）{
var AEElement=document.createElement（“输入”）；
aeelement.name=nm；
aElement.id=nm；
aElement.type=“文件”；
aeelement.size=“50”；
if（document.getElementById（“upload”）.appendChild（AEElement）==null）
返回false；
返回true；
}  

---

我刚遇到这个问题

我的解决方案：

我用script2.js或其他东西从miniupload复制script.js。 在那个脚本中，我做的唯一一件事就是将名称从upload改为upload\u文件，再从drop改为drop\u文件。 像这样：

var ul = $('#upload_files ul');

    $('#drop_files a').click(function(){
        // Simulate a click on the file input button
        // to show the file browser dialog
        $(this).parent().find('input').click();
    });

    // Initialize the jQuery File Upload plugin
    $('#upload_files').fileupload({
    (...)

我的HTML：

 <form id="upload" method="post" enctype="multipart/form-data">
                                <div id="drop" style="text-align:center ;align-content:center">
                                    Add images
                                    <a>Select</a>
                                    <input type="file" name="upl" multiple />
                                </div>
                                <ul>
                                    <!-- The img uploads will be shown here -->
                                </ul>
                            </form>


<form id="upload_files" method="post" enctype="multipart/form-data">
                                <div id="drop_files" style="text-align:center ;align-content:center">
                                    Add files
                                    <a>Select</a>
                                    <input type="file" name="upl_file" multiple />
                                </div>
                                <ul>
                                    <!-- The file uploads will be shown here -->
                                </ul>
                            </form>

我添加了反映上传文件的代码

#upload_files{
    font-family:'PT Sans Narrow', sans-serif;
    background-color:#373a3d;

    background-image:-webkit-linear-gradient(top, #373a3d, #313437);
    background-image:-moz-linear-gradient(top, #373a3d, #313437);
    background-image:linear-gradient(top, #373a3d, #313437);

    width:250px;
    padding:30px;
    border-radius:3px;

    margin:20px 20px 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

---

这不是一个“干净”的解决方案，但它是有效的：）

我有这个问题很久了，直到我想我会解决它。这就是我所做的

在表单中，我向

#upload

和

#drop

元素添加了类。我将它们重命名为

#upload1

，

#upload2

和

#drop1

，

#drop2

<form id="upload1" class="upload" method="post" action="upload.php" enctype="multipart/form-data">
    <div id="drop1" class="drop">
...

我还将

#upload

的所有实例替换为

$this

，将

#drop

的所有实例替换为

$this.find（'.drop'）

基本上，您将用类名替换ID，并相应地调整脚本，并将其全部封装在一个大的each循环中

另外，我还喜欢在我的脚本文件中添加一个完整的回调，这样我就可以完成所有事情

complete:function() {
},

请让我知道这是否适合你

更新： 修改代码以动态工作：

(function($){
$(document).ready(function(){



    $(document).on('click','.drop a', function(){

        var $drop = $(this);
        var $this = $drop.closest('.upload');
        var ul = $this.find('ul');

        $this.parent().find('input').click();
        //console.log($this.find('.drop'));
    });


    window.init_file_upload = function($element) {

        // Initialize the jQuery File Upload plugin
        $($element).fileupload({

            //var $this = $(this);
            // This element will accept file drag/drop uploading
            dropZone: $element.find('.drop'),
            // This function is called when a file is added to the queue;
            // either via the browse button, or via drag/drop:
            add: function (e, data) {

                ul = $element.find('ul');
                //console.log('adsf');
                $('.ajaxform button.submit').attr('disabled','disabled');
                var tpl = $('<li class="working"><input type="text" value="0" data-width="48" data-height="48"'+
                    ' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span><i class="fa fa-check-circle-o"></i> OK</span></li>');

                // Append the file name and file size
                tpl.find('p').text(data.files[0].name)
                             .append('<i>' + formatFileSize(data.files[0].size) + '</i>');

                // Add the HTML to the UL element
                ul[0].innerHTML = '';
                data.context = tpl.appendTo(ul);

                // Initialize the knob plugin
                tpl.find('input').knob();

                // Listen for clicks on the cancel icon
                tpl.find('span').click(function(){

                    if(tpl.hasClass('working')){
                        jqXHR.abort();
                    }

                    tpl.fadeOut(function(){
                        tpl.remove();
                    });

                });

                // Automatically upload the file once it is added to the queue
                var jqXHR = data.submit();
            },

            progress: function(e, data){

                // Calculate the completion percentage of the upload
                var progress = parseInt(data.loaded / data.total * 100, 10);

                // Update the hidden input field and trigger a change
                // so that the jQuery knob plugin knows to update the dial
                data.context.find('input').val(progress).change();

                if(progress == 100){
                    data.context.removeClass('working');
                }
            },

            complete:function(e, data) {
                // console.log(e,data);
                var _data = $.parseJSON(e.responseText);
                // console.log(_data);
                postAjax(_data);
                $('.ajaxform button.submit').removeAttr('disabled');
            },

            fail:function(e, data){
                // Something has gone wrong!
                data.context.addClass('error');
            }

        });
    }
    $('.upload').each(function() {
        window.init_file_upload($(this));

    });
    // Simulate a click on the file input button
    // to show the file browser dialog


    // Prevent the default action when a file is dropped on the window
    $(document).on('drop dragover', function (e) {
        e.preventDefault();
    });

    // Helper function that formats the file sizes
    function formatFileSize(bytes) {
        if (typeof bytes !== 'number') {
            return '';
        }

        if (bytes >= 1000000000) {
            return (bytes / 1000000000).toFixed(2) + ' GB';
        }

        if (bytes >= 1000000) {
            return (bytes / 1000000).toFixed(2) + ' MB';
        }

        return (bytes / 1000).toFixed(2) + ' KB';
    }

});
})(jQuery);

（函数（$）{
$（文档）.ready（函数（）{
$（文档）。在（'单击'，'上。删除一个'，函数（）{
var$drop=$（本）；
var$this=$drop.closest（'.upload'）；
var ul=$this.find（'ul'）；
$this.parent（）.find（'input'）。单击（）；
//log（$this.find（'.drop'））；
});
window.init\u file\u upload=函数（$element）{
//初始化jQuery文件上传插件
$（$element）.fileupload({
//var$this=$（this）；
//此元素将接受文件拖放上载
dropZone:$element.find（'.drop'），
//将文件添加到队列时调用此函数；
//通过浏览按钮或通过拖放：
添加：功能（e、数据）{
ul=$element.find（'ul'）；
//console.log（'adsf'）；
$（'.ajaxform button.submit'）.attr（'disabled'，'disabled'）；
var tpl=$（'li class=“working”>正常）；
//附加文件名和文件大小
tpl.find（'p'）.text（data.files[0].name）
.append（“”+formatFileSize（data.files[0].size）+“”）；
//将HTML添加到UL元素
ul[0]。innerHTML=''；
data.context=tpl.appendTo（ul）；
//初始化旋钮插件
tpl.find（'input'）.knob（）；
//收听“取消”图标上的单击
tpl.find（'span'）。单击（函数（）{
if（tpl.hasClass（“工作”））{
jqXHR.abort（）；
}
tpl.fadeOut（函数（）{
tpl.remove（）；
});
});
//将文件添加到队列后自动上载该文件
var jqXHR=data.submit（）；
},
进度：功能（e、数据）{
//计算上载的完成百分比
var progress=parseInt（data.loaded/data.total*100,10）；
//更新隐藏的输入字段并触发更改
//让jQuery旋钮插件知道如何更新拨号盘
data.context.find（'input'）.val（progress.change（）；
如果（进度==100）{
data.context.removeClass（'working'）；
}
},
完成：功能（e、数据）{
//控制台日志（e，数据）；
var_data=$.parseJSON（e.responseText）；
//console.log（_数据）；
postAjax（_数据）；
$（'.ajaxform button.submit'）.removeAttr（'disabled'）；
},
失败：功能（e，数据）{
//出了点问题！
data.context.addClass（'error'）；
}
});
}
$（'.upload'）。每个（函数（）{
初始化文件上传（$（this））；
});
//模拟单击“文件输入”按钮
//显示“文件浏览器”对话框的步骤
//防止在窗口上删除文件时执行默认操作
$（文档）.on（'drop dragover'，函数（e）{
e、 预防默认值（）；
});
//用于格式化文件大小的辅助函数
函数formatFileSize（字节）{
如果（字节类型！=='number'）{
返回“”；
}
如果（字节数>=100000000）{
返回（字节/100000000）.toFixed（2）+“GB”；
}
如果（字节>=1000000）{
#upload_files{
    font-family:'PT Sans Narrow', sans-serif;
    background-color:#373a3d;

    background-image:-webkit-linear-gradient(top, #373a3d, #313437);
    background-image:-moz-linear-gradient(top, #373a3d, #313437);
    background-image:linear-gradient(top, #373a3d, #313437);

    width:250px;
    padding:30px;
    border-radius:3px;

    margin:20px 20px 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

<form id="upload1" class="upload" method="post" action="upload.php" enctype="multipart/form-data">
    <div id="drop1" class="drop">
...

(function($){
    $('.upload').each(function (_key, _value) {
        var $this = $(this);
        var ul = $this.find('ul');

        $this.find('#drop a').click(function(){
        ...
    });

})(jQuery);

complete:function() {
},

(function($){
$(document).ready(function(){



    $(document).on('click','.drop a', function(){

        var $drop = $(this);
        var $this = $drop.closest('.upload');
        var ul = $this.find('ul');

        $this.parent().find('input').click();
        //console.log($this.find('.drop'));
    });


    window.init_file_upload = function($element) {

        // Initialize the jQuery File Upload plugin
        $($element).fileupload({

            //var $this = $(this);
            // This element will accept file drag/drop uploading
            dropZone: $element.find('.drop'),
            // This function is called when a file is added to the queue;
            // either via the browse button, or via drag/drop:
            add: function (e, data) {

                ul = $element.find('ul');
                //console.log('adsf');
                $('.ajaxform button.submit').attr('disabled','disabled');
                var tpl = $('<li class="working"><input type="text" value="0" data-width="48" data-height="48"'+
                    ' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span><i class="fa fa-check-circle-o"></i> OK</span></li>');

                // Append the file name and file size
                tpl.find('p').text(data.files[0].name)
                             .append('<i>' + formatFileSize(data.files[0].size) + '</i>');

                // Add the HTML to the UL element
                ul[0].innerHTML = '';
                data.context = tpl.appendTo(ul);

                // Initialize the knob plugin
                tpl.find('input').knob();

                // Listen for clicks on the cancel icon
                tpl.find('span').click(function(){

                    if(tpl.hasClass('working')){
                        jqXHR.abort();
                    }

                    tpl.fadeOut(function(){
                        tpl.remove();
                    });

                });

                // Automatically upload the file once it is added to the queue
                var jqXHR = data.submit();
            },

            progress: function(e, data){

                // Calculate the completion percentage of the upload
                var progress = parseInt(data.loaded / data.total * 100, 10);

                // Update the hidden input field and trigger a change
                // so that the jQuery knob plugin knows to update the dial
                data.context.find('input').val(progress).change();

                if(progress == 100){
                    data.context.removeClass('working');
                }
            },

            complete:function(e, data) {
                // console.log(e,data);
                var _data = $.parseJSON(e.responseText);
                // console.log(_data);
                postAjax(_data);
                $('.ajaxform button.submit').removeAttr('disabled');
            },

            fail:function(e, data){
                // Something has gone wrong!
                data.context.addClass('error');
            }

        });
    }
    $('.upload').each(function() {
        window.init_file_upload($(this));

    });
    // Simulate a click on the file input button
    // to show the file browser dialog


    // Prevent the default action when a file is dropped on the window
    $(document).on('drop dragover', function (e) {
        e.preventDefault();
    });

    // Helper function that formats the file sizes
    function formatFileSize(bytes) {
        if (typeof bytes !== 'number') {
            return '';
        }

        if (bytes >= 1000000000) {
            return (bytes / 1000000000).toFixed(2) + ' GB';
        }

        if (bytes >= 1000000) {
            return (bytes / 1000000).toFixed(2) + ' MB';
        }

        return (bytes / 1000).toFixed(2) + ' KB';
    }

});
})(jQuery);