Fatal编程技术网
  • javascript/
  • Javascript 在文件上上载Ajax文件选择“不工作”

Javascript 在文件上上载Ajax文件选择“不工作”

javascript jquery

Javascript 在文件上上载Ajax文件选择“不工作”,javascript,jquery,jquery-forms-plugin,Javascript,Jquery,Jquery Forms Plugin,我有一个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/jqu

我有一个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>


窗体{显示：块；边距：20px自动；背景：#eee；边框半径：10px；填充：15px}
#进度{位置：相对；宽度：400px；边框：1px实心#ddd；填充：1px；边框半径：3px；}
#条{背景色：#B4F5B4；宽度：0%；高度：20px；边框半径：3px；}
#百分比{位置：绝对；显示：内联块；顶部：3px；左侧：48%；}
Ajax文件上传演示
0%


$（文档）.ready（函数（）
{
$（'#myfile'）.change（函数（）{
变量选项={
url:“doajaxfileupload.php”，
beforeSend:function（）
{
$（“#进度”）.show（）；
//清除一切
$（“#bar”）.width（'0%）；
$（“#消息”）.html（“”）；
$（“#百分比”）.html（“0%”）；
},
上载进度：功能（事件、位置、总数、完成百分比）
{
$（“#条”）.width（完成百分比+'%'）；
$（“#百分比”）.html（完成百分比+'%'）；
},
成功：函数（）
{
$（“#bar”）.宽度（'100%）；
$（“#percent”）.html（'100%）；
},
完成：功能（响应）
{
$（“#message”）.html（“+response.responseText+”）；
},
错误：函数（）
{
$（“#message”）.html（“错误：无法上载文件”）；
}
};
$（“#myForm”）.ajaxForm（选项）；
});
});
这里没有，当使用Submit按钮提交表单时，此脚本工作正常

但我尝试了点击/更改文件上传按钮上传文件，在没有点击提交按钮的情况下立即上传文件，但没有成功

当然它不起作用，因为
$（'#myForm'）.ajaxForm（选项）表单提交过程

现在，在这个脚本中可以做些什么来满足我的需求。请指导。
我更改了
$（“#myForm”）.ajaxForm（选项）至：


$("#myForm").ajaxSubmit(options);


见工作表

更改原因：

您需要使用
ajaxSubmit
，以便在
选项中管理事件<代码>ajaxForm
不允许您绑定事件，因为它是“托管”的

如果要将自己的提交处理程序绑定到表单，请使用ajaxSubmit

如果希望插件为您管理所有事件绑定，请使用ajaxForm

（来源：Ajax表单JQuery插件中的注释）



这是使用。您的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>





您是否尝试使用
$（“#myForm”）.ajaxForm（选项）.submit（）
或
触发器（'submit'）
？您的意思是在同一脚本中？如何使用
trigger（'submit'）
？我删除了
PHP
标记和
PHP
源代码，因为它正在工作，与解决客户端问题无关。只是为了简化问题。
$（“#myForm”）.ajaxForm（选项）。submit（）
或
$（“#myForm”）.ajaxForm（选项）。触发器（'submit'）
，在你的“$”（“#myfile'）。更改（函数（）{}）`（最后你有了它，但没有提交），谢谢@Scott的编辑