0
Je crée un formulaire simple pour télécharger des fichiers en utilisant KendoUI, et fonctionne bien sur ma machine de développement (OSX Apache), mais téléchargé sur mon serveur (Linux Apache) il semble mauvais comme vous pouvez le voir dans les images. J'ai testé avec les mêmes résultats à la fois dans Firefox et Chrome, et les deux sont très bien à partir de la copie locale et mauvais de la télécommande. J'ai triplé vérifié que tous les fichiers sont les mêmes sur les serveurs locaux et distants.Différence dans la boîte de dialogue de téléchargement de KendoUI lorsqu'elle est hébergée sur le serveur linux direct sur OSX dev machine
vs 
Mon code est comme suit ...
<!doctype html>
<html>
<head>
<title>Test | Animation Tool</title>
<link href="./kendo/styles/kendo.common.min.css" rel="stylesheet"/>
<link href="./kendo/styles/kendo.kendo.min.css" rel="stylesheet"/>
<script src="./jquery.js"></script>
<script src="./kendo/js/kendo.all.min.js"></script>
<style type="text/css">
body{
background-Color: #f78049;
background-image: url(stripe.png);
background-repeat: repeat-y;
margin:0;padding:0;
font-family:sans-serif;
}
#sidebar{
background-Color: #f78049;
border: 3px solid #ef652a;
margin:0;padding:0;
width: 300px;
float: left;
height: 900px;
}
.step{
border-top: 3px solid #ef652a;
}
.step p.first{
display: inline;
}
.step-id{
background-color: #ef652a;
-moz-border-radius: 7px;
font-size: 30px;
margin: .2em .2em .2em 0;
padding: .1em .2em;
}
.t-button{
margin: 0 37px 0 37px;
width:203px;
top: 10px;
}
button.t-button{
margin: .2em 37px .2em 37px;
width:220px;
}
.t-upload-files{
margin: 0.2em 2.6em 1em;
}
#main{
float:left;
}
h1, h2{
margin:0;padding:0 0 0.3em;
text-align:center;
color:#ffd;
}
#phone,#anim{
width:401px;
height:875px;
background-image:url(phone.png);
position: absolute;
top:10px;
left:350px;
}
#anim{
background-image:url("files/spec.png");
background-position:0 0;
background-repeat:no-repeat;
height:480px;
left:391px;
top:144px;
width:320px;
}
a img{
border:none;
}
</style>
<script type="text/javascript">
$(function(){
var i=0, x={timer:null, frames:4, frameWidth:320, frameRate:150};
var addTestFile = function(filename){
$('#test-files').append(
$('<button />').addClass('t-button custom').html(filename).click(function(){
$anim = $('#anim').css({backgroundImage:'url("files/'+filename+'")'})
var loop = function(){
$anim.css({backgroundPosition:"0 0"}).animate({borderWidth:0},150,function(){
$anim.css({backgroundPosition:"-320px 0"}).animate({borderWidth:0},150,function(){
$anim.css({backgroundPosition:"-640px 0"}).animate({borderWidth:0},150,function(){
$anim.css({backgroundPosition:"-960px 0"}).animate({backgroundPosition:"-640px 0"},250,function(){
})
})
})
})
}
clearInterval(x.timer)
x.timer = setInterval(function(){
loop()
}, 950)
})
)
}
$.get('files.php',function(d){
$.each(d, function(i,file){
addTestFile(file)
})
})
$("#files").kendoUpload({
async: {
saveUrl: "./save.php",
// removeUrl: "./remove.php",
autoUpload: true
},
showFileList: true,
success: function(e){
$('.t-file').last().siblings().remove()
var filename = e.files[0].name.replace(/\s/g,'-')
$('#test-files button').filter(function(){
return $(this).text() == filename
}).remove()
addTestFile(filename)
console.log('uploaded' + e.files[0].name);
// return true;
},
error: function(e){
console.log("Error (" + e.operation + ")");
e.preventDefault(); // Suppress error message
}
});
});
</script>
</head>
<body>
<div id="sidebar">
<h2>Animation Tool</h2>
<div id='one' class='step'>
<span class='step-id'>1</span>
<p class="first">Get the specification image</p>
<p><a href="getspec.php" class='t-button'>Download image...</a></p>
</div>
<div id='two' class='step'>
<span class='step-id'>2</span>
<p class="first">Edit the downloaded image file</p>
</div>
<div id='three' class='step'>
<span class='step-id'>3</span>
<p class="first">Upload your edited file</p>
<input name="files" id="files" type="file" />
</div>
<div id='two' class='step'>
<span class='step-id'>4</span>
<p class='first'>Test you animation</p>
<span id='test-files'></span>
</div>
</div>
<div id="main">
<div id="anim"></div>
<div id="phone"></div>
</div>
</body>
</html>