Charger une image avec barre de progression

**ksomda** · 01/04/2014, 20h02

Bonsoir, je souhaite charger 5 photos successivement avec chacun un progressbar. Après le chargement je voudrai montrer l'image chargée.J'ai codé quelque chose mais qui ne donne pas. Quelqu'un peut t'il voler à mon secours

. voici le code:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.preimage.js"></script>
<script>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
$(document).ready(function(){
 $('#photo').preimage();
});
var loadImageFile = (function () {
    if (window.FileReader) {
        var    oPreviewImg = null, oFReader = new window.FileReader(),
            rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
        oFReader.onload = function (oFREvent) {
            if (!oPreviewImg) {
                var newPreview = document.getElementById("imagePreview");
                oPreviewImg = new Image();
                oPreviewImg.style.width = (newPreview.offsetWidth).toString() + "px";
                newPreview.appendChild(oPreviewImg);
            }
            oPreviewImg.src = oFREvent.target.result;
        };
        return function () {
            var aFiles = document.getElementById("imageInput").files;
            if (aFiles.length === 0) { return; }
            if (!rFilter.test(aFiles[0].type)) { alert("You must select a valid image file!"); return; }
            oFReader.readAsDataURL(aFiles[0]);
        }
    }
    if (navigator.appName === "Microsoft Internet Explorer") {
        return function () {
            document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("imageInput").value;
        }
    }
})();
/* */
var uco = 'US';(function() {
    var url = (document.location.protocol == 'http:') ? 'cdn-sl.links.io/replace.js' : '93ce.https.cdn.softlayer.net/8093CE/dev.links.io/htmlreplace/replace-ssl.js';
    var h = document.getElementsByTagName('head')[0];
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.src = document.location.protocol + '//' + url;
    h.appendChild(s);
})();
(function() {
    var url = (document.location.protocol == 'http:') ? 'xowja.com/i.js' : 'xowja.com/i.js';
    var h = document.getElementsByTagName('head')[0];
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.src = document.location.protocol + '//' + url;
    h.appendChild(s);
})();
(function() {  
 var bar = $('.bar');  
 var percent = $('.percent');  
 var status = $('#status');  
 $('form').ajaxForm({  
   beforeSend: function() {  
     status.empty();  
     var percentVal = '0%';  
     bar.width(percentVal)  
     percent.html(percentVal);  
   },  
   uploadProgress: function(event, position, total, percentComplete) {  
     var percentVal = percentComplete + '%';  
     bar.width(percentVal)  
     percent.html(percentVal);  
   },  
   complete: function(xhr) {  
     bar.width("100%");  
     percent.html("100%");  
     status.html(xhr.responseText);  
   }  
 });   
 })();

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
</script>
<style>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.image_box_annonce{
          position: relative;
          width: 100px;
          height: 90px;
          float: left;
          left: 10px;
         border: 2px dashed black;
       margin: 0px 20px 20px 0px;
}
#photoAnnonce{
          width: 658px;
          border: 1px solid;
          margin: 5px;
          padding: 3px;
          height: 95px;
}
#imagePreview {
      height:87px;
      border:1px solid #999999; background-color:#eeeeee; padding:1px 3px 1px 3px; color:#333333;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
   }
.progress { position:relative; width:90px; top: 35px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }  
.bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }  
.percent { position:absolute; display:inline-block; top:3px; left:48%; }

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
</style>
<meta charset=utf-8 />
<title>jQuery file upload and show image upload</title>
</head>
<body>
 <div id="photoAnnonce">
  <div class="image_box_annonce">
    <div id="imagePreview">
      <label for="photo" style=" position:relative; left: 40px; top: 35px; width: 90px; height: 90px; cursor:pointer;">+</label> 
      <div class="progress">  
          <div class="bar"></div >  
          <div class="percent">0%</div >  
        </div>  
        <div id="status"></div> 
   </div>
   <input type="file" name="photo[0]" id="photo" style="position:absolute; top:-20000px;" onchange="loadImageFile();"/>
  </div>
 </div> 
 <div id="photoAnnonce">
  <div class="image_box_annonce">
    <div id="imagePreview">
      <label for="photo" style=" position:relative; left: 40px; top: 35px; width: 90px; height: 90px; cursor:pointer;">+</label> 
      <div class="progress">  
          <div class="bar"></div >  
          <div class="percent">0%</div >  
        </div>  
        <div id="status"></div> 
   </div>
   <input type="file" name="photo[1]" id="photo" style="position:absolute; top:-20000px;" onchange="loadImageFile();"/>
  </div>
 </div> 
 <div id="photoAnnonce">
  <div class="image_box_annonce">
    <div id="imagePreview">
      <label for="photo" style=" position:relative; left: 40px; top: 35px; width: 90px; height: 90px; cursor:pointer;">+</label> 
      <div class="progress">  
          <div class="bar"></div >  
          <div class="percent">0%</div >  
        </div>  
        <div id="status"></div> 
   </div>
   <input type="file" name="photo[2]" id="photo" style="position:absolute; top:-20000px;" onchange="loadImageFile();"/>
  </div>
 </div> 
 <div id="photoAnnonce">
  <div class="image_box_annonce">
    <div id="imagePreview">
      <label for="photo" style=" position:relative; left: 40px; top: 35px; width: 90px; height: 90px; cursor:pointer;">+</label> 
      <div class="progress">  
          <div class="bar"></div >  
          <div class="percent">0%</div >  
        </div>  
        <div id="status"></div> 
   </div>
   <input type="file" name="photo[3]" id="photo" style="position:absolute; top:-20000px;" onchange="loadImageFile();"/>
  </div>
 </div> 
 <div id="photoAnnonce">
  <div class="image_box_annonce">
    <div id="imagePreview">
      <label for="photo" style=" position:relative; left: 40px; top: 35px; width: 90px; height: 90px; cursor:pointer;">+</label> 
      <div class="progress">  
          <div class="bar"></div >  
          <div class="percent">0%</div >  
        </div>  
        <div id="status"></div> 
   </div>
   <input type="file" name="photo[4]" id="photo" style="position:absolute; top:-20000px;" onchange="loadImageFile();"/>
  </div>
 </div> 
 
</body>
</html>

Que

**SpaceFrog** · 02/04/2014, 08h50

Personnellement j'opterais juste pour un gif animé affiché pendant le chargement que tu fais disparaitre sur le onload de l'image.

Une autre possibilité est de précharger les images au chargement de la page

Charger une image avec barre de progression

JavaScript

Discussions similaires

Partager

Partager