0

次のプラグインを使用しています: http://tutorialzine.com/2013/05/mini-ajax-file-upload-form/

私が抱えている問題は、同じページに複数のアップロード インスタンスがあることです (たとえば、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>

PHP コード:

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

誰かが同じページで複数のアップロードでこれを機能させる方法を教えてください.

（ドラッグアンドドロップと「ブラウズ」機能が必要です）

4

3 に答える 3

0

私はちょうどこの問題に来ました。

私の解決策：

script2.js などを使用して miniupload から script.js を複製します。そのスクリプトで、名前を upload から upload_files に、drop から drop_files に変更しただけです。このような：

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>

そしてcssも修正します。元のcssは次のようになります。

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

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

「クリーンな」ソリューションではありませんが、機能します:)

于 2015-02-11T20:53:47.513 に答える
0 
<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;
      }

于 2013-07-10T13:12:02.533 に答える