Question

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

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>

Answer 1

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

要解决此问题，您需要在data-ajax="false"标签中添加<form>。

jQuery冲突导致文件上传失败

1 个答案: