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

Question

I am using the following plugin: http://tutorialzine.com/2013/05/mini-ajax-file-upload-form/

The problem I have is that I have multiple upload instances on the same page (for example 1-header image 2-footer image)

But only the first input actually works, the other one does not and I don't get an error client or server side..

If I Google to try find an alternative I get millions of "multiple uploads at the same time" which is not what im looking for.

here is the page code:

        <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>

PHP Code:

$allowed = array('png');

if(isset($_FILES['upl']) && $_FILES['upl']['error'] == 0){

    $extension = pathinfo($_FILES['upl']['name'], PATHINFO_EXTENSION);

    if(!in_array(strtolower($extension), $allowed)){
        echo '{"status":"error"}';
        exit;
    }

    if(move_uploaded_file($_FILES['upl']['tmp_name'], 'images/'.$name.'.png')){
        echo '{"status":"success"}';
        exit;
    }
}

echo '{"status":"error"}';
exit;

Can someone please either tell me how to get this to work with multiple uploads on the same page, or recommend an alternative.

(I do require drag and drop as well as 'browse' functionality)

Answer 1

<input type="button" name="button" value="添加附件" onclick="addInput()">
<span id="upload"></span>

js

<script type="text/javascript">
    var attachname = "attach";
    var i=1;
      function   addInput(){
        if(i>0){
              var attach = attachname + i ;
              if(createInput(attach))
                  i=i+1;
          }

      } 
      function createInput(nm){   
          var  aElement=document.createElement("input");   
         aElement.name=nm;
         aElement.id=nm;
         aElement.type="file";
         aElement.size="50";
         if(document.getElementById("upload").appendChild(aElement) == null)
              return false;
         return true;
      }  

Answer 2

I just came with this problem.

My solution:

I duplicate the script.js from miniupload with script2.js or whatever. In that script, the only thing I did was changing name from upload to upload_files and drop to drop_files. Like this:

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({
    (...)

My 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>

And then modify the css too. the original css is like this:

#upload{
    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);
}

I added code to reflect upload_files

#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);
}

Its not a "clean" solution, but it works :)

Answer 3

I was having this issue for a long time, until I figured I would fix it. Here's what I did.

In the form, I added classes to the #upload and #drop elements. I renamed them to #upload1 , #upload2 and #drop1 , #drop2

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

On the JS side (script.js), I wrapped the whole thing in a proper jQuery init and I added a jQuery each at the top and wrapped the entire main area in this:

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

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

})(jQuery);

I also replaced all instances of #upload with $this and all instances of #drop with $this.find('.drop')

Basically, you're replacing the ids with class names, and adjusting your script accordingly, and wrap it all in a big each loop.

PS. I also like to add a complete callback to my script file so I can do things after everything.

complete:function() {
},

Please let me know if this works for you.

UPDATE: Modified the code to work dynamically:

(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);