javascript - 如何让我的 Javascript 始终正确提交？-6ren

javascript - 如何让我的 Javascript 始终正确提交？

转载作者：行者123 更新时间：2023-11-28 01:32:24

我有一个 .php 文件，其中包含一些调用 Canvas 绘图的 javascript，提交表单后将上传 Canvas 绘图图像，并将 SQL 数据提交到数据库。 100% 的时间将上传 SQL 数据。我的问题是 javascript 不会总是上传。我的浏览器是 iPad 上的移动浏览器。任何帮助将不胜感激。下面是捕获图像的文件。然后将其上传到 upload_data.php。我正在使用 codeigniter 框架。

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8" />
 <title>Trailer Draw</title>

 <script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script> 
 <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
 <script type="text/javascript">
  $(document).ready(function () {
     initialize();
  });


  // works out the X, Y position of the click inside the canvas from the X, Y     position on the page
  function getPosition(mouseEvent, sigCanvas) {
     var x, y;
     if (mouseEvent.pageX != undefined && mouseEvent.pageY != undefined) {
        x = mouseEvent.pageX;
        y = mouseEvent.pageY;
     } else {
        x = mouseEvent.clientX + document.body.scrollLeft +  document.documentElement.scrollLeft;
        y = mouseEvent.clientY + document.body.scrollTop +  document.documentElement.scrollTop;
     }

     return { X: x - sigCanvas.offsetLeft, Y: y - sigCanvas.offsetTop };
  }

  function initialize(canvas, context, onload) {
     // get references to the canvas element as well as the 2D drawing context
     var sigCanvas = document.getElementById("canvasSignature");
     var context = sigCanvas.getContext("2d");
     context.strokeStyle = 'red';
     make_base();

  function make_base(){
     base_image = new Image();
     base_image.src = '/inc/img/inspection/trailer.png';
     base_image.onload = function(){
     context.drawImage(base_image, 2, 100);

      }
    }

     // This will be defined for the iPad
     var is_touch_device = 'ontouchstart' in document.documentElement;

     if (is_touch_device) {
        // create a drawer which tracks touch movements
        var drawer = {
           isDrawing: false,
           touchstart: function (coors) {
              context.beginPath();
              context.moveTo(coors.x, coors.y);
              this.isDrawing = true;
           },
           touchmove: function (coors) {
              if (this.isDrawing) {
                 context.lineTo(coors.x, coors.y);
                 context.stroke();
              }
           },
           touchend: function (coors) {
              if (this.isDrawing) {
                 this.touchmove(coors);
                 this.isDrawing = false;
              }
           }
        };

        // create a function to pass touch events and coordinates to drawer
        function draw(event) {

           // get the touch coordinates.  Using the first touch in case of  multi-touch
           var coors = {
              x: event.targetTouches[0].pageX,
              y: event.targetTouches[0].pageY
           };

           // Now we need to get the offset of the canvas location
           var obj = sigCanvas;

           if (obj.offsetParent) {
              // Every time we find a new object, we add its offsetLeft and offsetTop to curleft and curtop.
              do {
                 coors.x -= obj.offsetLeft;
                 coors.y -= obj.offsetTop;
              }
              // The while loop can be "while (obj = obj.offsetParent)" only, which does return null
              // when null is passed back, but that creates a warning in some editors (i.e. VS2010).
              while ((obj = obj.offsetParent) != null);
           }

           // pass the coordinates to the appropriate handler
           drawer[event.type](coors);
        }


        // attach the touchstart, touchmove, touchend event listeners.
        sigCanvas.addEventListener('touchstart', draw, false);
        sigCanvas.addEventListener('touchmove', draw, false);
        sigCanvas.addEventListener('touchend', draw, false);

        // prevent elastic scrolling
        sigCanvas.addEventListener('touchmove', function (event) {
           event.preventDefault();
        }, false); 
     }
     else {

        // start drawing when the mousedown event fires, and attach handlers to
        // draw a line to wherever the mouse moves to
        $("#canvasSignature").mousedown(function (mouseEvent) {
           var position = getPosition(mouseEvent, sigCanvas);

           context.moveTo(position.X, position.Y);
           context.beginPath();

           // attach event handlers
           $(this).mousemove(function (mouseEvent) {
              drawLine(mouseEvent, sigCanvas, context);
           }).mouseup(function (mouseEvent) {
              finishDrawing(mouseEvent, sigCanvas, context);
           }).mouseout(function (mouseEvent) {
              finishDrawing(mouseEvent, sigCanvas, context);
           });
        });

     }
  }


  // draws a line to the x and y coordinates of the mouse event inside
  // the specified element using the specified context
  function drawLine(mouseEvent, sigCanvas, context) {

     var position = getPosition(mouseEvent, sigCanvas);

     context.lineTo(position.X, position.Y);
     context.stroke();
  }

  // draws a line from the last coordiantes in the path to the finishing
  // coordinates and unbind any event handlers which need to be preceded
  // by the mouse down event
  function finishDrawing(mouseEvent, sigCanvas, context) {
     // draw the line to the finishing coordinates
     drawLine(mouseEvent, sigCanvas, context);

     context.closePath();

     // unbind any events which could draw
     $(sigCanvas).unbind("mousemove")
                 .unbind("mouseup")
                 .unbind("mouseout");
      }
   </script>
   <div>

    </div>

    <script>
        function uploadEx() {
            var canvas = document.getElementById("canvasSignature");
            var dataURL = canvas.toDataURL("image/png");
            document.getElementById('hidden_data').value = dataURL;
            var fd = new FormData(document.forms["form"]);

            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/inc/img/inspection/upload_data.php', true);

            xhr.upload.onprogress = function(e) {
                if (e.lengthComputable) {
                    var percentComplete = (e.loaded / e.total) * 100;
                    console.log(percentComplete + '% uploaded');
                  //alert('Succesfully uploaded');
                }
            };

            xhr.onload = function() {

            };
            xhr.send(fd);

            return false;
        };
        </script>

        </head>
        <style>
        input {
         margin-left: 200cm;
         }

         </style>

        <body>
        <h1>Trailer Inspection</h1>

        <div id="canvasDiv" align="center">
        <!-- It's bad practice (to me) to put your CSS here.  I'd recommend    the use of a CSS file! -->
  <canvas id="canvasSignature" width="955px" height="465px" style="border:2px  solid #000000;"></canvas>


    </div>
    <p><h2></h2></p>
    <p><h4></h4></p>

    <?php if( !empty($table)): ?>
    <p><h3></h3></p>
    <?php if(is_array($table)): ?>
    <?php foreach($table as $h1 => $t1): ?>
    <?php if( !is_int($h1)): ?>
    <p><h3><?php echo $h1; ?></h3></p>
    <?php else: ?>
    <br />
    <?php endif; ?>
    <?php if(is_array($t1)): ?>
    <?php foreach($t1 as $h2 => $t2): ?>
      <?php if( !is_int($h2)): ?>
        <p><h4><?php echo $h2; ?></h4></p>
      <?php else: ?>
        <br />
      <?php endif; ?>
      <?php echo $t2; ?>
    <?php endforeach; ?>
    <?php else: ?>
    <?php echo $t1; ?>
    <?php endif; ?>
    <?php endforeach; ?>
    <?php else: ?>
    <?php echo $table;?>

    <?php endif; ?>
    <?php else: ?>
    <?php endif; ?>



    <br />



    <?php if( !function_exists('form_open')): ?>
    <?php $this->load->helper('form'); ?>
    <?php endif;?>

                                                                                      <form onsubmit="uploadEx();" name="form" id="form" accept-charset="utf-8"  method="post">
              <input name="hidden_data" id="hidden_data" type="hidden" />
              <?php $this->load->helper('string');?>
              <?php $number = random_string('unique');?>
              <input name="sub_id" id="sub_id" type="hidden" value="<?php echo $number; ?>"/> 

              <div>

  <?php if( !empty($options1) AND !empty($label_display1) AND   !empty($field_name1)): ?>
  <?php echo form_label($label_display1.":",$field_name1); ?>
  <?php echo form_dropdown($field_name1,$options1)?>
  <?php endif; ?>

  <?php echo form_label('Carrier Code','car_code'); ?>
  <?php echo form_input(array('name'=>'car_code','type'=>'text')); ?>

  <?php echo form_label('Trailer Number','trlr_num'); ?>
  <?php echo form_input(array('name'=>'trlr_num','type'=>'text')); ?>

  <?php echo form_label('Truck Number','truck_num'); ?>
  <?php echo form_input(array('name'=>'truck_num','type'=>'text')); ?>

  <?php echo form_label('Temp','temp'); ?>
  <?php echo form_input(array('name'=>'temp','type'=>'text')); ?>

  <?php if( !empty($options) AND !empty($label_display) AND  !empty($field_name)): ?>
  <?php echo form_label($label_display.":",$field_name); ?>
  <?php echo form_dropdown($field_name,$options)?>
  <?php endif; ?>

  <?php echo form_label('License Plate','lic_plate'); ?>
  <?php echo form_input(array('name'=>'lic_plate','type'=>'text')); ?>

  <?php echo form_label('Seal','seal'); ?>
  <?php echo form_input(array('name'=>'seal','type'=>'text')); ?>

  <?php echo form_label('STN/Delivery Note','del_note'); ?>
  <?php echo form_input(array('name'=>'del_note','type'=>'text')); ?>

  <?php echo form_label('Ship Number','ship_num'); ?>
  <?php echo form_input(array('name'=>'ship_num','type'=>'text')); ?>

  <input type="hidden" name="draw_num" id="draw_num" value="<?php echo  $number; ?>" />

  <?php echo form_label('Driver Name','driver_name'); ?>
  <?php echo form_input(array('name'=>'driver_name','type'=>'text')); ?>

  <?php echo form_label('Check if Live','live_drop'); ?>
  <?php echo  form_checkbox(array('name'=>'live_drop','type'=>'checkbox','value'=>'1')); ?>


  <?php echo form_label('Check if Damaged','damaged'); ?>
  <?php echo form_checkbox(array('name'=>'damaged','type'=>'checkbox','value'=>'1')); ?>


  <?php echo form_label('Comment','comment'); ?>
  <textarea class="txtarea" style="height:100px; width:350px;" rows="3" name="comment" Id="comment" value=""> </textarea>

  <?php echo form_fieldset_close(); ?>

   </div>
  </br>
 </br>

 <input align="center" type ="submit" name="submit" onclick="uploadEx();">   </input>
</br>
</br>
</form>





</body>

</html>

下面是我的upload_data.php

<?php
$upload_dir = "upload/";
$img = $_POST['hidden_data'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$id = $_POST['sub_id'];
$file = $upload_dir . $id . ".png";
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
?>

最佳答案

一旦表单中有 onsubmit 事件，您就不需要在提交按钮中进行第二次调用。在这种情况下，提交按钮中的 onclick 事件可以在导致错误的 onsubmit 事件之前触发。

此外，您可以尝试通过更改以下参数使 XMLHttpRequest 同步，以避免脚本序列执行困惑:

相反:

xhr.open('POST', '/inc/img/inspection/upload_data.php', true);

更改为:

xhr.open('POST', '/inc/img/inspection/upload_data.php', false);

关于javascript - 如何让我的 Javascript 始终正确提交？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29905055/

文章推荐： javascript - 视差-元素毛刺

文章推荐： javascript - 像exe一样在Windows窗口中运行HTML页面

文章推荐： javascript - 什么时候不应该使用允许跨域？

文章推荐： javascript - jQuery - 单击基于 css 类和链接名称的链接

javascript - 如果输入 a 或 b 正确/正确，我如何执行操作？
这个问题已经有答案了: How to do case insensitive string comparison? (23 个回答) 已关闭 3 年前。用户在我的输入栏中写入“足球”，然后执行第 6
javascript - 字符 id= + 是 + 正确= + 正确不正确...我怎样才能使它成为 javascript 中的字符串
啊，不习惯 javascript 中的字符串。 character_id= + id + correct= + correctOrIncorrect 这就是我需要制作成字符串的内容。如果您无法猜测字符
javascript - jQuery计算价格不起作用(正确)
$(function() { var base_price = 0; CalculatePrice(); $(".math1").on('change', function(e) { Calc
kubernetes - 将Spinnaker部署到Spinnaker将管理的同一kubernetes集群是否安全/正确？
我找不到任何文章回答问题:将Spinnaker部署到Spinnaker将管理的同一Kubernetes集群是否安全/正确？我主要是指生产，HA部署。最佳答案我认为Spinnaker和Kuberne
c++ - 正确/快速的方法来更改命令行Qt5源内部版本的配置
我正在使用MSVC在Windows上从源代码(官方源代码发布，而不是从仓库中)构建Qt5(Qt 5.15.0)。我正在设置环境。变量，依赖项等，然后运行具有1600万个选项的configure，最后
java - 计数时数组越界[正确]
我需要打印一个包含重复单词的数组。我的数组已经可以工作，但我不知道如何正确计算单词数。我已经知道，当我的索引计数器 (i) 为 49 时，并且当 (i) 想要计数到 50 时，我会收到错误，但我不知道
javascript - 正确/错误取决于屏幕尺寸动态？
我正在遵循一个指南，该指南允许 Google map 屏幕根据屏幕尺寸禁用滚动。我唯一挣扎的部分是编写一个代码，当我手动调整屏幕大小时动态更改 True/False 值。这是我按照说明操作的网站，但
java - 未调用子类中的方法(正确)
我有一个类“FileButton”。它的目的是将文件链接到 JButton，FileButton 继承自 JButton。子类继承自此以使用链接到按钮的文件做有用的事情。 JingleCardButt
php - 如何仅显示来自好友列表的帖子。 (正确)
我的 friend 数组只返回一个数字而不是所有数字。 ($myfriends = 3) 应该是…… ($myfriends = 3 5 7 8 9 12). 如果我让它进入 while 循环……整个
html - 在这种情况下使用整数作为类名是否可以接受/正确
这个问题在这里已经有了答案: Is there a workaround to make CSS classes with names that start with numbers valid?
javascript - 在窗口更改时自动调整元素大小(正确)
我正在制作一个 JavaScript 函数，当调整窗口大小时，它会自动将 div 的大小调整为与窗口相同的宽度/高度。该功能非常基本，但我注意到在调整窗口大小时出现明显的“绘制”滞后。在 JS fi
javascript - 删除导航栏的类 - 正确
此问题的基本视觉效果可在 http://sevenx.de/demo/bootstrap-carousel/inc.carousel/tabbed-slider.html 获得。 - 如果你想看一看。
c - 从将其内存分配给同一函数的函数返回字符串是否安全/正确？
我明白，如果我想从函数返回一个字符串文字或一个数组，我应该将其声明为静态的，这样当被调用的函数被返回时，内容就不会“消亡”。但我的问题是，当我在函数内部使用 malloc 分配内存时会怎样？在下面
mysql - 正确/错误值的适当数据字段类型？
在 mySQL 数据库中存储 true/false/1/0 值最合适(读取数据消耗最少)的数据字段是什么？我以前使用过一个字符长的 tinyint，但我不确定它是否是最佳解决方案？谢谢! 最佳答案
c++ - 正确，有效地读取文件
我想一次读取并处理CSV文件第一行中的条目(例如打印)。我假设使用Unix风格的\n换行符，没有条目长度超过255个字符，并且(现在)在EOF之前有一个换行符。这意味着它是fgets()后跟strto
c++ - “正确”无符号整数比较
所以，我们都知道 -1 > 2u == true 的 C/C++ 有符号/无符号比较规则，并且我有一种情况，我想有效地实现“正确”比较。我的问题是，考虑到人们熟悉的尽可能多的架构，哪种方法更有效。显
Java异常处理：如何写出“正确”但被编译器认为有语法错误的程序
**摘要：**文章的标题看似自相矛盾。本文分享自华为云社区《Java异常处理：如何写出“正确”但被编译器认为有语法错误的程序》，作者： Jerry Wang 。文章的标题看似自相矛盾，然而我在“正
r - 进行按行替换的“正确”方法
我有一个数据框，看起来像: dataDemo % mutate_each(funs(ifelse(. == '.', REF, as.character(.))), -POS) # POS REF
text - VBScript 正确/重新格式化带分隔符的文本文件？
有人可以帮助我使用 VBScript 重新格式化/正确格式化带分隔符的文本文件吗？我有一个文本文件 ^分界如下: AGREE^NAME^ADD1^ADD2^ADD3^ADD4^PCODE^BAL^A
java - 语言认证以及诸如适当、正确、合法等术语的使用
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the he

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何让我的 Javascript 始终正确提交？