我正在使用jquery和ajax创建一个图像上传器，它在计算机浏览器中可以正常工作，但在移动浏览器中不起作用。我确实让它工作了一次，但我改变了一些东西，直到它迟到才发现。有人可以告诉我为什么我的编码在移动浏览器中停止工作。
似乎$（文件）.ready（function（）{没有加载到手机上的页面加载，但我有其他js编码，它们都可以工作，但这一个是唯一停止工作的。
<script type="text/javascript">
function _(el){
return document.getElementById(el);
}
function sendFileToServer(formData,status){
var uploadURL ="{SITEURL}uploaded/index.php?action=1"; //Upload URL
var extraData ={}; //Extra Data.
var jqXHR=$.ajax({
xhr: function() {
var xhrobj = $.ajaxSettings.xhr();
if (xhrobj.upload) {
xhrobj.upload.addEventListener('progress', function(event) {
var percent = 0;
var position = event.loaded || event.position;
var total = event.total;
if (event.lengthComputable) {
percent = Math.ceil(position / total * 100);
}
//Set progress
status.setProgress(percent);
}, false);
}
xhrobj.addEventListener('load', function(event) {
_('returnMessage').innerHTML = event.target.responseText;
}, false);
return xhrobj;
},
url: uploadURL,
type: "POST",
contentType:false,
processData: false,
cache: false,
data: formData,
success: function(data){
status.setProgress(100);
$('#images').load('{SITEURL}uploaded/index.php?action=2 #displayImages').fadeIn("slow");
$('#setdefaultimg').load('{SITEURL}uploaded/index.php?action=4 #defaultPicture').fadeIn("slow");
$('#getdefaultimg').load('{SITEURL}uploaded/index.php?action=6 #defaultPicture').fadeIn("slow");
$("#file").val('');
$('.statusbar').hide();
}
});
status.setAbort(jqXHR);
}
var rowCount=0;
function createStatusbar(obj){
rowCount++;
var row="odd";
if(rowCount %2 ==0) row ="even";
this.statusbar = $("<div class='statusbar "+row+"'></div>");
this.filename = $("<div class='filename'></div>").appendTo(this.statusbar);
this.size = $("<span class='filesize'></span>").appendTo(this.statusbar);
this.progressBar = $('<div class="progress"><div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: '+row+'%"></div></div>').appendTo(this.statusbar);
this.abort = $("<div class='abort'>Abort</div>").appendTo(this.statusbar);
obj.after(this.statusbar);
this.setFileNameSize = function(name,size){
var sizeStr="";
var sizeKB = size/1024;
if(parseInt(sizeKB) > 1024){
var sizeMB = sizeKB/1024;
sizeStr = sizeMB.toFixed(2)+" MB";
}else{
sizeStr = sizeKB.toFixed(2)+" KB";
}
this.filename.html(name);
this.size.html(sizeStr);
}
this.setProgress = function(progress){
var progressBarWidth =progress*this.progressBar.width()/ 100;
this.progressBar.find('div').animate({ width: progressBarWidth }, 10).html(progress + "%");
if(parseInt(progress) >= 100){
this.abort.hide();
}
}
this.setAbort = function(jqxhr){
var sb = this.statusbar;
this.abort.click(function(){
jqxhr.abort();
sb.hide();
});
}
}
function handleFileUpload(files,obj){
for (var i = 0; i < files.length; i++) {
var fd = new FormData();
fd.append('file', files[i]);
var status = new createStatusbar(obj); //Using this we can set progress.
status.setFileNameSize(files[i].name,files[i].size);
sendFileToServer(fd,status);
}
}
function setDefaultImage(image){
var formdata = new FormData();
formdata.append("setDefaultImage", image);
var ajax = new XMLHttpRequest();
ajax.addEventListener("load", function(event) {
$("#setdefaultimg").load('{SITEURL}uploaded/index.php?action=4 #defaultPicture').fadeIn("slow");
$('#getdefaultimg').load('{SITEURL}uploaded/index.php?action=6 #defaultPicture').fadeIn("slow");
});
ajax.addEventListener("error", function(event) {
$("#returnMessage").innerHTML = "Didn't set the default image";
});
ajax.open("POST", "{SITEURL}uploaded/index.php?action=3");
ajax.send(formdata);
}
function DeleteImage(image){
var formdata = new FormData();
formdata.append("PictureName", image);
var ajax = new XMLHttpRequest();
ajax.addEventListener("load", function(event) {
$("#setdefaultimg").load('{SITEURL}uploaded/index.php?action=4 #defaultPicture').fadeIn("slow");
$('#getdefaultimg').load('{SITEURL}uploaded/index.php?action=6 #defaultPicture').fadeIn("slow");
$('#images').load('{SITEURL}uploaded/index.php?action=2 #displayImages').fadeIn("slow");
});
ajax.addEventListener("error", function(event) {
$("#returnMessage").innerHTML = "The picture didn't delete please try again";
});
ajax.open("POST", "{SITEURL}uploaded/index.php?action=5");
ajax.send(formdata);
}
$(document).ready(function(){
$('#images').load('{SITEURL}uploaded/index.php?action=2 #displayImages').fadeIn("slow");
$('#setdefaultimg').load('{SITEURL}uploaded/index.php?action=4 #defaultPicture').fadeIn("slow");
var obj = $("#dragandrophandler");
var obj2 = $("#manualhandler");
obj.on('dragenter', function (e) {
e.stopPropagation();
e.preventDefault();
$(this).css('border', '2px dotted #0B85A1');
});
obj.on('dragover', function (e) {
e.stopPropagation();
e.preventDefault();
});
obj.on('drop', function (e) {
$(this).css('border', '2px dotted #0B85A1');
e.preventDefault();
var files = e.originalEvent.dataTransfer.files;
//We need to send dropped files to Server
handleFileUpload(files,$('#statusUpload'));
});
$(document).on('dragenter', function (e) {
e.stopPropagation();
e.preventDefault();
});
$(document).on('dragover', function (e) {
e.stopPropagation();
e.preventDefault();
obj.css('border', '2px solid #0B85A1');
});
$(document).on('drop', function (e) {
e.stopPropagation();
e.preventDefault();
obj.css('border', '2px solid #0B85A1');
});
obj.css('border', '2px solid #0B85A1');
obj2.on('click tap vclick', function (e) {
var files = _('file').files;
//We need to send dropped files to Server
handleFileUpload(files,$('#statusUpload'));
});
$("div#images").hover(function () {
$('span').on('click', function() {
var imageName = $('img',this).attr('title');
setDefaultImage(imageName);
});
});
$("div#setdefaultimg").hover(function () {
var imageName = $('img',this).attr('title');
$("#deleteImage").click(function(){
DeleteImage(imageName);
});
});
});
</script>
这是要求的html页面。
<div id="imageUploader" class="modal fade">
<!-- INCLUDE uploadhandler.tpl -->
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">{L_3500_1015494} <button class="btn btn-danger btn-xs pull-right" data-dismiss="modal">{L_678}</button></h4>
</div>
<div class="modal-body">
<div class="well">
{MAXPICS}<br>{FREEMAXPIC}<br>{ALLOWEDPICTURETYPES}
</div>
<div id="returnMessage"></div>
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#dragNdropUploader" data-toggle="tab">Upload Photos</a></li>
<li><a href="#Default" data-toggle="tab">Default Picture</a></li>
<li><a href="#pickDefault" data-toggle="tab">Uploaded Images</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="Default">
<div id="setdefaultimg"></div>
</div>
<div role="tabpanel" class="tab-pane active" id="dragNdropUploader">
<div class="well" id="dragandrophandler" align="center"><b>{L_3500_1015894}</b></div>
<div class="input-group">
<form id="upload_form" enctype="multipart/form-data" method="post">
<input type="hidden" name="csrftoken" value="{_CSRFTOKEN}">
<div class="input-group-btn">
<input multiple="multiple" type="file" class="btn btn-info" name="file" id="file">
</div >
<br>
<button type="button" class="btn btn-success" value="Upload File" id="manualhandler">Upload File</button>
</form>
</div>
<div id="statusUpload"></div>
</div>
<div role="tabpanel" class="tab-pane" id="pickDefault">
<div class="alert alert-info" role="alert">Click on the picture that you want to use as your profile default picture.</div>
<div id="images"></div>
</div>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
从未开采过它正在处理漏洞时间，我不得不清除浏览器缓存。每次更新js时都会出现愚蠢的浏览器缓存，我每次都要清除浏览器缓存。