2

こんにちは私の問題は、動的に拡張するフォームがあることです。これを使用してファイルをeコマースWebサイトにアップロードし、製品の写真をアップロードします。アップロードする前にサイズを制限し、拡張子をフィルタリングしたいのですが、JavaScriptやjQueryを使用する初心者です...

私はそれらを検証するための助けが必要です、なぜなら私は物事のPHP側を扱うことができると思うからです:)ここに私の実験的なコードがあります：

<script language="Javascript" type="text/javascript">
var counter = 1;
var limit = 10;
function addInput(divName){
     if (counter == limit)  {
          alert("You have reached the maximum of " + counter + " fotos");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "Foto " + (counter + 1) + " <br><input type='file' name='myInputs[]'>";
      document.getElementById(divName).appendChild(newdiv);
      counter++;
 }
}
</script>

<form method="POST" enctype="multipart/form-data"> 
     <div id="dynamicInput">
          Foto 1<br><input type="file" name="myInputs[]">
 </div>
 <input type="button" value="Add more fotos" onClick="addInput('dynamicInput');">
</form>

前もって感謝します

編集：

送信されたファイルの種類を確認できますが、別のファイルフィールドをループできません...

私はフィドルhttp://jsfiddle.net/Glink/sGCeK/にこのコードを持っています

それはあなたが私を助けるのを助けるかもしれません...

もう1つの質問ですが、xHTMLでコードを使用している場合、HTML5に更新するのは非常に難しいですか？

改めてよろしくお願いします...

4

2 に答える 2

1

あなたは正しい方向に進んでいますが、javascriptでjQueryを使用してみてください。私はあなたが物事をはるかに簡単に見つけることができると思います。私はあなたが達成しようとしていると思うことの簡単な例を書きました。さらに詳しい説明が必要な場合は、お気軽にお問い合わせください。

例

HTML：

<form method="POST" enctype="multipart/form-data" id="theForm"> 
 <label class="dynamicInput">
      Foto 0<input type="file" name="myInputs1">
 </label>
<br/>
</form>

JS：

var counter = 1;
var limit = 10;


$("#addButton").click(function(){
htmlString = '<label class="dynamicInput">Foto'+ counter +'<input type="file" name="myInputs '+ counter + '"></label><br/>'

 if(limit > counter)
$("#theForm").append(htmlString);
counter++;
});
​

更新：質問を読んでいない、ボックスに新しいフィールドを追加するだけだと思った。アップロードのファイルサイズについては、次を使用してその数を取得できます。

this.files[0].fileSize

例：更新された例

拡張機能をチェックすることに関しては、私がこれを行うために見つけた簡単な方法はありません。おそらく、ある種の正規表現を使用する必要があります。このようなもの：

ファイル拡張子の例

それはあなたを正しい道に導くはずです。

于 2012-11-08T18:54:35.023 に答える
0

こんにちは、これは私自身の質問に答えるのは厄介ですが、ここにあります：

ファイルタイプを確認し、ループがこのフィドルにあることを確認します：http: //jsfiddle.net/Glink/sGCeK/

$(document).ready(function() {

    var counter = 1;
    var limit = 5;
    $("#btn2").click(function() {

        if (counter == limit) {
            alert("You have reached the limit of " + counter + " fotos");
        } else {
            $("#dynamicInput").append("<br>Foto <br><input class='test' type='file' name='myInputs[]'>");
        }
        counter++;
    });


    $("form").submit(function() {

        $('.test').each(function(i, obj) {

            var file = $(this).val();
            var ext = $(this).val().substr(($(this).val().lastIndexOf('.') + 1));
            //alert(file);
            if (ext == "jpg" || ext == "png" || ext == "JPG" || ext == "jpeg") {
                alert("File: " + file + " Valid");
                //return true;
            } else {
                alert("Invalid file only files with extension. Jpeg,. Jpg or. Png are accepted.");
                return false;
            }
        });
    });
});

[フィールドの追加]ボタンにクラスを追加するのを忘れたため、最初の投稿を編集したときにループできませんでした。言語に慣れていないため、それを見逃し、コードを確認するときに問題が見つかりました。 。

これが私の最後の編集です。私の実装の終了コードはここにあります：http： //jsfiddle.net/Glink/Ak2QA/

良い方法を使用しているかどうかはわかりませんが、今のところ機能しています。このプロジェクトが終了すると、jQueryとjsについて詳しく知ることができます...

xHTMLを使用しているのでファイルサイズはどうなりますかJavaScriptを使用することは不可能ですFlashまたはSilverLightを使用する必要があり、使用したくないので使用しません...

HTML5を使用している場合は、ここに投稿されているものを使用して可能です： jQueryでファイル入力サイズを確認する方法は？

まだ無効なファイルを見つけたときに理解できないバグがあり、falseを返してもフォームを送信します...なぜここに投稿するのかがわかったら...

于 2012-11-12T10:35:10.410 に答える