0

以下に示すように、タスクを実行するための 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);もちろん、フォーム送信時のプロセスのため、機能しません。

私の要件を機能させるために、このスクリプトで何ができるでしょうか。ガイドしてください。

4

1 に答える 1