JQuery冲突导致文件上传失败
Posted
技术标签:
【中文标题】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>
标记中。
【讨论】:
以上是关于JQuery冲突导致文件上传失败的主要内容,如果未能解决你的问题,请参考以下文章
Jquery-fileupload 插件 - 上传文件但说“文件上传失败”
MVC中通过jquery实现图片预览上传,并对文件类型大小进行判断(极简)