时间戳

首页 > 解决方案 > JQuery冲突导致文件上传失败

javascript - JQuery冲突导致文件上传失败

问题描述

我有一个文件上传，在我的页面上运行良好。我还想使用基于手势的事件swipeleft和swiperight来自 jQuery，但由于某种原因，如果我使用这些库，我的文件上传会失败：

https://code.jquery.com/jquery-1.11.3.min.js
https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js

jQuery代码：

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<script>
$("#box").on("swiperight",function(){$('.active').prev().trigger('click');});
$("#box").on("swipeleft",function(){$('.active').next().trigger('click');});
</script>

如果我注释掉上述两个库，文件上传工作得很好，但是我无法使用滑动功能。

文件上传部分通过 PHP 表单提交处理。我究竟做错了什么？

PHP代码：

<?php  
    if(isset($_POST["submit"])){  
        $target= array();   
        $total = count($_FILES['file']['name']);    
        for( $i=0 ; $i < $total ; $i++ ) {
            $tmpFilePath = $_FILES['file']['tmp_name'][$i];
            if ($tmpFilePath != ""){ 
                $newFilePath = "./uploads/" . $_FILES['file']['name'][$i];
                if(move_uploaded_file($tmpFilePath, $newFilePath)) {
                    $target[$i]= $_FILES['file']['name'][$i];
                }
            }
        }
    }
?>

HTML 代码：

<div class="card-container">
<div id="box"></div>
</div>
<form class="contact100-form validate-form" method="post" enctype="multipart/form-data">
    <input class="input100" type="date" name="date" placeholder="Enter Date">
    <input class="input100" type="file" multiple="multiple" name="file[]">
    <button class="contact100-form-btn" type="submit" name="submit">
        <span>
             Submit
         </span>
    </button>
 </form>

标签： javascriptphpjqueryjquery-mobile

解决方案

显然这是 jQuery 移动和文件上传的问题。

要修复，您需要添加data-ajax="false"到<form>标签。

推荐阅读