idフィールドを動的に生成しようとしています

-2

動的にアップロードされた各イメージに対してidフィールドを動的に生成しようとしています。私はそれを達成する方法が分からない。以下にjqueryコードを示します。この問題の考え方はどれも分かります。idフィールドを動的に生成しようとしています

コード

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> 

<!DOCTYPE html> 
<html> 
<head> 
    <style>   
input[type="file"] { 

display:block; 
} 
.imageThumb { 
max-height: 75px; 
border: 2px solid; 
margin: 10px 10px 0 0; 
padding: 1px; 
} 
    </style> 
    <title></title> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     Find the bellow HTML code 
     <h2>preview multiple images before upload using jQuery</h2> 
     <input type="file" id="files" name="files[]" multiple /> 
    </form> 
    <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      if (window.File && window.FileList && window.FileReader) { 
       $("#files").on("change", function (e) { 
        var files = e.target.files, 
        filesLength = files.length; 
        for (var i = 0; i < filesLength ; i++) { 
         var f = files[i] 
         var fileReader = new FileReader(); 
         fileReader.onload = (function (e) { 
          var file = e.target; 
          $("<img></img>", { 
           class: "imageThumb", 
           src: e.target.result, 
           title: file.name 
          }).insertAfter("#files"); 
         }); 
         fileReader.readAsDataURL(f); 
        } 
       }); 
      } else { alert("Your browser doesn't support to File API") } 
     }); 
    </script> 

</body> 
</html>

出典

2017-11-30 hari

idフィールドは何ですか？ファイル入力からファイルを取得してimgタグ –

に表示する理由このブログではなく、ここで尋ねる理由http://www.splessons.com/jquery-upload-multiple-images-with-preview/ – plonknimbuzz

@KalaiselvanA上記のコード私たちは別の画像をアップロードすることができ、それらの画像のそれぞれについてもidフィールドを生成したい。私はそれをどうするか考えていない。 – hari

あなたは、いくつかの静的IDコンポーネントを保ち、そしてそれに新しいイメージが作成されるたびに動的コンポーネントを追加することによって、動的にIDを作成することができます。

粗製の例は次のようになります。それらが追加された後に、クライアント側で画像の修正を期待されていない限り、あなたはおそらくIDを必要としない、と述べた

<script type="text/javascript"> 
    $(document).ready(function() { 


     var idStatic = 'Image_'; //Static component of ID 
     var imgCount = 0; // Dynamic component of ID, will be incremented and appended to idStatic for each new image. 


     if (window.File && window.FileList && window.FileReader) { 
      $("#files").on("change", function (e) { 
       var files = e.target.files, 
       filesLength = files.length; 
       for (var i = 0; i < filesLength ; i++) { 
        var f = files[i] 
        var fileReader = new FileReader(); 
        fileReader.onload = (function (e) { 
         var file = e.target; 

         imgCount++; // Increment dynamic part, so that id is unique. 

         $("<img></img>", { 
          "class": "imageThumb", 
          src: e.target.result, 

          id: (idStatic + imgCount), // tell jquery to add the id for new element. 
          name: 'images[]', // give a name, so that server recognises it on form submit. Can be same as id. 

          title: file.name, 

         }).insertAfter("#files"); 
        }); 
        fileReader.readAsDataURL(f); 
       } 
      }); 
     } else { alert("Your browser doesn't support to File API") } 
    }); 
</script>

。追加の名前属性で十分です。

出典

2017-11-30 06:53:37 elem4th

idフィールドを動的に生成しようとしています

答えて

関連する問題