Mini AJAX file Download several download blocks on the same page

advertisements

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)


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