0
jquery와 ajax를 사용하여 이미지 업 로더를 만들고 있는데, 컴퓨터 브라우저에서는 정상적으로 작동하지만 모바일 브라우저에서는 작동하지 않습니다. 나는 그것을 한 번 작동 시키려고했지만 뭔가를 바꿨고 늦어지기 전까지는 눈치 채지 못했습니다. 누군가 내 코딩이 모바일 브라우저에서 작동하지 않는 이유를 알려주실 수 있습니까?jquery가 모바일 브라우저에서 작동하지 않습니다.
$ (document) .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>
먼저 휴대 전화에서 작동하지 않는 호버 이벤트가 있습니다. 코드가 두 번째로 크고, 문제에 대한 설명이 모호합니다. – madalinivascu
HTML의 요소는 모바일보기에서 동일한 ID입니까? –
** madalin ** 나는 hover가 휴대 전화에서 작동하지 않는다는 것을 알고 있습니다. PC 및 모바일 용 업로드 핸들러는 2 가지 유형이 있습니다. – uBidzz