我能忽略什麼？當我使用鼠標進行數據上傳時，但是當我使用觸摸進行簽名時，數據不會上傳

我遇到了問題，而且我只遇到了另一個遇到同樣問題的人，重新也還是輸了。我使用szimek的簽名板，當我用鼠標或觸控板簽名時，圖像數據會上傳到我的/上傳文件夾。但是，當我在任何瀏覽器中使用我的手指在任何觸摸表面（ipad，iphone，android，我的microsoft pc的觸摸屏）上簽名時，都會導致數據無法上傳到我的/ upload文件夾。或者任何地方，就此而言。我能忽略什麼？當我使用鼠標進行數據上傳時，但是當我使用觸摸進行簽名時，數據不會上傳

HTML：

Employee Name: <input type="text" name="employee1" /><br> 
<label>Signature:</label> 
<div id="signature-pad-1" class="m-signature-pad" style="margin-top:12px; margin-bottom:12px;margin-left:12px;margin-right:12px;"> 
    <div class="m-signature-pad--body"> 
    <canvas></canvas> 
     <input id ="siginput1" type="hidden" name="signature1" value=''/> 

    </div> 
</div> 
<br> 
<span id="clear1" onclick="clear1();" style="border: 1px solid #e8e8e8;border-radius:5px;cursor:pointer;padding:2px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.27), 0 0 24px rgba(0, 0, 0, 0.08) inset;">Clear</span> 
<br><hr><br>

PHP處理簽名：

$signature1 = $_POST['signature1']; 
$encoded_image1 = explode(",", $signature1)[1]; 

$decoded_image1 = base64_decode($encoded_image1); 
$sig1_new_name = uniqid('', true) . '.png'; 
file_put_contents('uploads/' . $sig1_new_name, $decoded_image1); 

$message .= "<div><h3>Signature: </h3><div><img src='http://site/uploads/" .$sig1_new_name. "' width='300' height='150'><br>$employee1</div></div><hr>";

我使用szimek的JavaScript此：

signature_pad.min.js

這：

app.js

這是在殺我。我必須忽略JavaScript中的某些內容，但其他人似乎沒有這個問題，所以也許是在我的js實現中。任何幫助將不勝感激！謝謝。

來源

2016-12-09 W0V3N

我沒有看到任何方式爲用戶發佈表單。我會檢查你的JavaScript在手機上正常工作。 – miken32

您可能會遇到mouseup通常需要觸發實際鼠標的問題。您想要用於觸摸輸入的事件是touchend;這已在an existing thread中進一步討論。你的小提琴將成爲：

var wrapper1 = document.getElementById("signature-pad-1"), 
    canvas1 = wrapper1.querySelector("canvas"), 
    signaturePad1; 

var siginput1 = document.getElementById("siginput1") 

function handler(event) { 
    if (signaturePad1.isEmpty()) { 
     siginput1.value = ''; 
    } 
    else { 
     siginput1.value = signaturePad1.toDataURL('image/png'); 
    } 
}); 

canvas1.addEventListener("mouseup", handler); 
canvas1.addEventListener("touchend", handler); 

function clear1() { signaturePad1.clear(); } 

function resizeCanvas(canvas) { 
    var ratio = window.devicePixelRatio || 1; 
    canvas.width = 250; 
    canvas.height = 150; 
} 

resizeCanvas(canvas1); 
signaturePad1 = new SignaturePad(canvas1); 

$("#clear1").click(clear1);

來源

2016-12-10 00:15:45 gyre

男人，我愛你。這是確切的問題。非常感謝。我一整天都在強調這一點。我超新的JavaScript，所以這是可笑的幫助。再次謝謝你！ – W0V3N

我不知道所有，但我認爲鼠標鬆開事件在JavaScript中不帶觸摸設備的工作，你可以儘管添加touchend事件。這個應該在觸摸設備上工作。希望我可以幫助，無論如何，祝你好運:)

來源

2016-12-10 00:19:56

Woops，gyre比我快。 –

這是確切的問題。非常感謝！ – W0V3N

我能忽略什麼？當我使用鼠標進行數據上傳時，但是當我使用觸摸進行簽名時，數據不會上傳

回答

相關問題