Bonjour

J'utilise ce code pour uploader des fichiers
Code asp : 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
<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Master/Master.Master"
    CodeBehind="Upload.aspx.vb" Inherits="Jquery.Upload" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript" src="script/jquery.ajax_upload.0.6.js"></script>
    <script type="text/javascript">
 
        $(document).ready(function () {
            $('#button1').button();
            var button = $('#button1'), interval;
            $.ajax_upload(button, {
                action: 'FileHandler.ashx',
                name: 'myfile',
                onSubmit: function (file, ext) {
                    // change button text, when user selects file
                    button.text('Uploading');
 
                    // If you want to allow uploading only 1 file at time,
                    // you can disable upload button
                    this.disable();
 
                    // Uploding -> Uploading. -> Uploading...
                    interval = window.setInterval(function () {
                        var text = button.text();
                        if (button.text().length < 13) {
                            button.text(button.text() + '.');
                        } else {
                            button.text('Uploading');
                        }
                    }, 200);
                },
                onComplete: function (file, response) {
                    button.text('Upload');
 
                    // Although plugins emulates hover effect automatically,
                    // it doens't work when button is disabled
                    button.removeClass('hover');
 
                    window.clearInterval(interval);
 
                    // enable upload button
                    this.enable();
 
                    // add file to the list
                    $('<li></li>').appendTo('#example1 .files').text(file);
                }
            });
 
        });</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<ul>
	<li id="example1" class="example">
		<p>You can style button as you want</p>
		<div class="wrapper">
			<div id="button1">Upload</div>
		</div>
		<p>Uploaded files:</p>
		<ol class="files"></ol>
	</li>
</ul>
 
</asp:Content>

ça marche nickel. J'utilise $('#button1').button(); pour avoir un style de bouton identique sur tout le site.

Mais quand le chargement est complet, mon bouton rétrécie. En fait, il n'y a plus d'espace entre les bords du bouton et le text à l'intérieur.

Je ne vois pas pourquoi?

Voici le code généré
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
 
</title>
    <script src="/script/jquery-1.9.0.js" type="text/javascript"></script>
    <script src="/script/jquery-ui-1.10.0.custom.min.js" type="text/javascript"></script>
    <script src="/script/MsgResult.js" type="text/javascript"></script>
    <link href="/CSS/ui-lightness/jquery-ui-1.10.0.custom.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="script/jquery.ajax_upload.0.6.js"></script>
    <script type="text/javascript">
 
        $(document).ready(function () {
            $('#button1').button();
            var button = $('#button1'), interval;
            $.ajax_upload(button, {
                action: 'FileHandler.ashx',
                name: 'myfile',
                onSubmit: function (file, ext) {
                    // change button text, when user selects file
                    button.text('Uploading');
 
                    // If you want to allow uploading only 1 file at time,
                    // you can disable upload button
                    this.disable();
 
                    // Uploding -> Uploading. -> Uploading...
                    interval = window.setInterval(function () {
                        var text = button.text();
                        if (button.text().length < 13) {
                            button.text(button.text() + '.');
                        } else {
                            button.text('Uploading');
                        }
                    }, 200);
                },
                onComplete: function (file, response) {
                    button.text('Upload');
 
                    // Although plugins emulates hover effect automatically,
                    // it doens't work when button is disabled
                    button.removeClass('hover');
 
                    window.clearInterval(interval);
 
                    // enable upload button
                    this.enable();
 
                    // add file to the list
                    $('<li></li>').appendTo('#example1 .files').text(file);
                }
            });
 
        });</script>
 
    <style type="text/css">
        #checkmark
        {
            position: absolute;
            left: 0px;
            top: 10px;
            margin-right: 20px;
        }
    </style>
</head>
<body>
    <form method="post" action="Upload.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkhx8e1Rv+SI/PtJs/vNongGV/lmD/hZtmbimxcxhKTAY=" />
</div>
 
    <div>
 
<ul>
	<li id="example1" class="example">
		<p>You can style button as you want</p>
		<div class="wrapper">
			<div id="button1">Upload</div>
		</div>
		<p>Uploaded files:</p>
		<ol class="files"></ol>
	</li>
</ul>
 
 
    </div>
    </form>
    <div id="MsgBack" title="Download complete">
        <div class='subcontent-box' id='Errortitre'>
        </div>
    </div>
</body>
</html>