Question

我有一个ajaxForm jQuery库来完成任务，创建了一个示例脚本，如下所示：

HTML＆amp; 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);进程提交。

现在可以在这个脚本中做些什么来使我的需求工作。请指导。

Answer 1

我将$("#myForm").ajaxForm(options);更改为：

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

查看工作JS Fiddle Demo。

此更改的原因：
您需要使用ajaxSubmit，以便管理options中的活动。 ajaxForm不允许您绑定事件，因为它是“托管”的。

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

当您希望插件为您管理所有事件绑定时，请使用ajaxForm。

（来源：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>

文件上的Ajax文件上传选择不起作用

1 个答案: