个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我有一个 ajaxForm jQuery 库来完成该任务，并创建了一个示例脚本，如下所示:
HTML 和 JS
<!doctype html>
<body>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<style>
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
#progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
#bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
#percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
</head>
<body>
<h1>Ajax File Upload Demo</h1>
<form id="myForm" action="" method="post" enctype="multipart/form-data">
<input type="file" size="60" name="myfile" id="myfile">
<input type="submit" value="Ajax File Upload">
</form>
<div id="progress">
<div id="bar"></div>
<div id="percent">0%</div >
</div>
<br/>
<div id="message"></div>
<script>
$(document).ready(function()
{
$('#myfile').change(function(){
var options = {
url: "doajaxfileupload.php",
beforeSend: function()
{
$("#progress").show();
//clear everything
$("#bar").width('0%');
$("#message").html("");
$("#percent").html("0%");
},
uploadProgress: function(event, position, total, percentComplete)
{
$("#bar").width(percentComplete+'%');
$("#percent").html(percentComplete+'%');
},
success: function()
{
$("#bar").width('100%');
$("#percent").html('100%');
},
complete: function(response)
{
$("#message").html("<font color='green'>"+response.responseText+"</font>");
},
error: function()
{
$("#message").html("<font color='red'> ERROR: unable to upload files</font>");
}
};
$("#myForm").ajaxForm(options);
});
});
</script>
</body>
</html>
否，当使用“提交”按钮提交表单时，此脚本可以正常工作。
但是我尝试通过单击/更改文件上传按钮来上传文件，以便立即上传文件而不单击提交按钮，但它不起作用。
当然它不起作用，因为 $('#myForm').ajaxForm(options); 处理表单提交。
现在可以在此脚本中执行哪些操作来满足我的要求。请指导。
最佳答案
我将 $("#myForm").ajaxForm(options); 更改为:
$("#myForm").ajaxSubmit(options);
查看工作 JS Fiddle Demo .
此更改的原因:
您需要使用ajaxSubmit，以便可以管理选项中的事件。 ajaxForm 不允许您绑定(bind)事件，因为它是“托管”的。
Use ajaxSubmit if you want to bind your own submit handler to the form.
Use ajaxForm when you want the plugin to manage all the event binding for you.
(来源:Ajax Form JQuery 插件中的注释)
<小时/>这是使用Ajax Forms jQuery Plugin 。您的 HTML 有两个指向 jQuery 的链接，其中之一不应该是指向 jQuery 表单插件的链接吗？
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.io/jquery.form.js"></script>
关于javascript - 文件选择上的 Ajax 文件上传不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17852810/
25
4
0
有人有 Comet 应用程序 .net 的任何样本吗？ 我需要一个示例如何在服务器中保持客户端的连接？ 最佳答案 这里也有一些不错的: http://www.frozenmountain.com/we
我想知道是否有 Yii2 专家可以帮助我了解如何最好地使用 ajax 表单与 Yii ajax 验证相结合。我想我可以在不带您阅读我所有代码的情况下解释这个问题。 我正在处理一个促销代码输入表单，用户
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 要求提供代码的问题必须表现出对所解决问题的最低限度的了解。包括尝试的解决方案、为什么它们不起作用以及预期结果
f:ajax 和 a4j:ajax 标记之间有什么显着差异吗？ 我知道 Richfaces 4 中的 a4j:ajax 基于 native f:ajax JSF2 标记，添加了一些 f:ajax 中未
我已经尝试过这样但无法获取数组列表。它返回“null” var data=[]; data[0] = '1'; data[1] = '2'; $.ajax({
在教程中可以看到 jQuery.ajax 和 $.ajax 喜欢这里 http://www.thekludge.com/form-auto-save-with-jquery-serialize/ jQ
过度使用 AJAX 会影响性能吗？在大型 Web 应用程序的上下文中，您如何处理 AJAX 请求以控制异步请求？ 最佳答案 过度使用任何东西都会降低性能；在必要时使用 AJAX 将提高性能，特别是如果
似乎我无法使用 Ext.Ajax.request 进行跨域 ajax 调用。看起来 ScriptTag: True 没有任何效果。 这是我的代码: {
我正在使用 Bottle 微框架(但我怀疑我的问题来自它) 首先，如果我定义了一个从/test_redirect 到/x 的简单重定向，它会起作用。所以 Bottle redirect() 在简单的情
任何人都可以指出各种 AJAX 库的统一比较吗？我已经阅读了大约十几种不同的书，我即将开始一个项目，但我对自己是否已经探索了可能性的空间没有信心。 请注意，我不是在要求“我认为 XXX 很棒”——我正
似乎使用 AJAX 的站点和应用程序正在迅速增长。使用 AJAX 的主要原因之一可能是增强用户体验。我担心的是，仅仅因为项目可以使用 AJAX，并不意味着它应该。 可能是为了 UX，AJAX 向站点/
假设我有一个可以通过 Javascript 自定义的“报告”页面。假设我有可以更改的 start_date、end_date 和类型(“简单”或“完整”)。现在 我希望地址栏始终包含当前(自定义) V
我一直在阅读 Ajax 并且希望从 stackoverflow 社区看到我是否正确理解所有内容。 因此，正常的客户端服务器交互是用户在 url 中拉出 Web 浏览器类型，并将 HTTP 请求发送到服
这可能有点牵强，但让我们假设我们需要它以这种方式工作: 我在服务器的 web 根目录中有一个 index.html 文件。该文件中的 javascript 需要向/secure/ajax.php 发出
关闭。这个问题是opinion-based .它目前不接受答案。 想改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 去年关闭。 Improve this
我希望ajax post成功进入主页。由于某种原因，我一直做错事。知道我应该做什么来解决这个问题吗？ window.APP_ROOT_URL = ""; Ajax $.ajax({ url: '#{a
我在 2 个不同的函数中有 2 个 ajax 调用。我想用.click来调用这2个函数。 func1 将数据插入数据库，然后 func2 检索数据，所以我的问题是如何等到 func1 完全完成然后只执
我试图在单击按钮后禁用该按钮。我尝试过: $("#ajaxStart").click(function() { $("#ajaxStart").attr("disabled", true);
我试图在每个 Ajax 请求上显示加载动画/微调器 我的 application.js $(document).on("turbolinks:load", function() { window.
我正在显示使用jQplot监视数据的图形。 为了刷新保存该图的div，我每5秒调用一次ajax调用(请参见下面的JavaScript摘录)。 在服务器上，PHP脚本从数据库中检索数据。 成功后，将在5
我是一名优秀的程序员,十分优秀！