JQuery冲突导致文件上传失败

Posted 2023-05-09

【中文标题】JQuery冲突导致文件上传失败

【英文标题】：JQuery Conflict causes file upload to fail

【发布时间】：2019-03-05 12:16:17

【问题描述】：

我有一个文件上传，它在我的页面上运行良好。我还想使用来自 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>

【问题讨论】：

您需要展示您的代码以获得好的答案：您链接脚本和文件上传表单的方式。

我刚刚补充了

没有错误，点击提交按钮后其他输入字段正在加载，只是文件上传没有发生......删除这两个库=导致工作文件上传

这两个库中是否有任何函数阻止文件上传...或导致与其他库冲突

看看forum.jquery.com/topic/…

【参考方案1】：

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

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