Hugging Face's logo

Spaces:
0x1668
/
test
Running

App Files Community
test
File size: 7,308 Bytes
0ec97f1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <title>Ajax Image upload</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/hcg-image-upload.css">

</head>
<body>


 <div class="container-fluid p-5">

  <ul class="nav nav-pills">
      <li class="nav-item">
        <a class="nav-link" href="jquery-image-upload.php">JQuery Image upload</a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="jquery-multiple-image-upload.php">JQuery multiple Images upload</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="index.php">Image upload</a>
      </li>
  </ul>

<br>

  <div class="text-center"><h3>JQuery multiple Images upload</h3></div>
  <hr>

  <div class="row p-2">

    <div class="col-sm border p-2 m-2 rounded">
      <form action="" method="post" enctype="multipart/form-data" id="multiple-upload">
        <div class="row align-items-center">
          <div class="col-sm mb-2">
            <input type="file" class="form-control-file" name="file_image">
          </div>

          <div class="col-sm mb-2">
            <button type="submit" class="btn btn-primary btn-sm">upload</button>
          </div>
        </div>
      </form>
    </div>


    <div class="col-sm border p-2 m-2 rounded">
      <div id="uploaded_images_preview"></div>
    </div>

  </div>
<hr>

<div style="background: #f0f3f3; overflow:auto;width:auto;border: 1px solid #ced4da;padding:5px;"><pre style="margin: 0; line-height: 125%"><span style="color: #330099;">&lt;link</span> <span style="color: #330099">rel=</span><span style="color: #CC3300">&quot;stylesheet&quot;</span> <span style="color: #330099">href=</span><span style="color: #CC3300">&quot;css/upload-images.css&quot;</span><span style="color: #330099;">&gt;</span>
<span style="color: #330099;">&lt;script </span><span style="color: #330099">src=</span><span style="color: #CC3300">&quot;https://code.jquery.com/jquery-3.5.1.min.js&quot;</span><span style="color: #330099;">&gt;&lt;/script&gt;</span>
<span style="color: #330099;">&lt;script </span><span style="color: #330099">src=</span><span style="color: #CC3300">&quot;js/hcg-image-upload.js&quot;</span><span style="color: #330099;">&gt;&lt;/script&gt;</span>
</pre></div>

<br>

<div style="background: #f0f3f3; overflow:auto;width:auto;border: 1px solid #ced4da;padding:5px;"><pre style="margin: 0; line-height: 125%"><span style="color: #330099;">&lt;form</span> <span style="color: #330099">action=</span><span style="color: #CC3300">&quot;&quot;</span> <span style="color: #330099">method=</span><span style="color: #CC3300">&quot;post&quot;</span> <span style="color: #330099">enctype=</span><span style="color: #CC3300">&quot;multipart/form-data&quot;</span> <span style="color: #330099">id=</span><span style="color: #CC3300">&quot;multiple-upload&quot;</span><span style="color: #330099;">&gt;</span>
  <span style="color: #330099;">&lt;div</span> <span style="color: #330099">class=</span><span style="color: #CC3300">&quot;row align-items-center&quot;</span><span style="color: #330099;">&gt;</span>
    <span style="color: #330099;">&lt;div</span> <span style="color: #330099">class=</span><span style="color: #CC3300">&quot;col-sm&quot;</span><span style="color: #330099;">&gt;</span>
      <span style="color: #330099;">&lt;input</span> <span style="color: #330099">type=</span><span style="color: #CC3300">&quot;file&quot;</span> <span style="color: #330099">class=</span><span style="color: #CC3300">&quot;form-control-file&quot;</span> <span style="color: #330099">name=</span><span style="color: #CC3300">&quot;file_image&quot;</span><span style="color: #330099;">&gt;</span>
    <span style="color: #330099;">&lt;/div&gt;</span>

    <span style="color: #330099;">&lt;div</span> <span style="color: #330099">class=</span><span style="color: #CC3300">&quot;col-sm text-right&quot;</span><span style="color: #330099;">&gt;</span>
      <span style="color: #330099;">&lt;button</span> <span style="color: #330099">type=</span><span style="color: #CC3300">&quot;submit&quot;</span> <span style="color: #330099">class=</span><span style="color: #CC3300">&quot;btn btn-primary btn-sm&quot;</span><span style="color: #330099;">&gt;</span>upload<span style="color: #330099;">&lt;/button&gt;</span>
    <span style="color: #330099;">&lt;/div&gt;</span>
  <span style="color: #330099;">&lt;/div&gt;</span>
<span style="color: #330099;">&lt;/form&gt;</span>
</pre></div>


<br>

<div style="background: #f0f3f3; overflow:auto;width:auto;border: 1px solid #ced4da;padding:5px;"><pre style="margin: 0; line-height: 125%">$(<span style="color: #006699;">function</span>() {
  $(<span style="color: #CC3300">&quot;#multiple-upload&quot;</span>).hcgImageUploads({
    multiple <span style="color: #555555">:</span> <span style="color: #006699;">true</span>,
    previewImages <span style="color: #555555">:</span> <span style="color: #006699;">true</span>,
    maxUpload <span style="color: #555555">:</span> <span style="color: #FF6600">100</span>,
    url<span style="color: #555555">:</span> <span style="color: #CC3300">&#39;upload.php&#39;</span>,
    complete<span style="color: #555555">:</span> <span style="color: #006699;">function</span> (success_imgs, error_imgs) {
      alert(<span style="color: #CC3300">&#39;done. \n success &#39;</span><span style="color: #555555">+</span>success_imgs.length <span style="color: #555555">+</span><span style="color: #CC3300">&#39;\n error &#39;</span><span style="color: #555555">+</span>error_imgs.length);
    },
    success<span style="color: #555555">:</span> <span style="color: #006699;">function</span>(img_array) {
      console.log(img_array.url);
      $(<span style="color: #CC3300">&quot;#uploaded_images_preview&quot;</span>).append(<span style="color: #CC3300">&#39;&lt;img src=&quot;&#39;</span><span style="color: #555555">+</span>img_array[<span style="color: #CC3300">&#39;url&#39;</span>]<span style="color: #555555">+</span><span style="color: #CC3300">&#39;&quot; width=&quot;50px&quot; height=&quot;50px&quot; style=&quot;margin: 2px;&quot;/&gt;&#39;</span>);
    },
    error<span style="color: #555555">:</span> <span style="color: #006699;">function</span> (error_img_array) {
      console.log(error_img_array.name);
    }
  });

});
</pre></div>


</div>

<script src="./js/jquery-3.5.1.min.js"></script>
<script src="./js/hcg-image-upload.js"></script>

<script>
  $(function() {
    $("#multiple-upload").hcgImageUploads({
     multiple : true,
     previewImages : true,
     maxUpload : 1000,
     url: 'upload.php',
     complete: function (success_imgs, error_imgs) {
      $("#uploaded_images_preview").prepend('<div style="margin-bottom:10px">success '+success_imgs.length +'<br> error '+error_imgs.length+'</div>');
    },
    success: function(img_array) {
      //console.log(img_array);
      $("#uploaded_images_preview").append('<img src="'+img_array['url']+'" width="50px" height="50px" style="margin: 2px;"/>');
    },
    error: function (error_img_array) {
      //console.log(error_img_array);
    }
  });

  });
</script>

</body>
</html>