JQuery冲突导致文件上传失败

Posted

技术标签:

【中文标题】JQuery冲突导致文件上传失败【英文标题】:JQuery Conflict causes file upload to fail 【发布时间】:2019-03-05 12:16:17 【问题描述】:

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

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" 添加到&lt;form&gt; 标记中。

【讨论】:

以上是关于JQuery冲突导致文件上传失败的主要内容,如果未能解决你的问题,请参考以下文章

Jquery-fileupload 插件 - 上传文件但说“文件上传失败”

大文件上的 JQuery Ajax 文件上传失败

文件上传失败,原因99611文件不存在

MVC中通过jquery实现图片预览上传,并对文件类型大小进行判断(极简)

MVC中通过jquery实现图片预览上传,并对文件类型大小进行判断(极简)

jQuery+ajax文件上传失败,啥原因